Hoang  Kim

Hoang Kim

1659012494

Cách Xác Thực Với JWT Cho Trang Web Của Bạn

Kể từ khi phát triển ứng dụng web ra đời, rất nhiều thông tin nhạy cảm được gửi qua internet khiến khái niệm xác thực là điều mà mọi nhà phát triển web nên hiểu và áp dụng trong ứng dụng để bảo mật thông tin được người dùng giao phó cho ứng dụng. Trong bài viết này, chúng ta sẽ xem xét một phương tiện xác thực cho các ứng dụng web được gọi là xác thực JWT. So với các phương pháp khác, xác thực JWT đã trở thành một yêu thích do có nhiều ưu điểm đối với các nhà phát triển.

Trước khi đi sâu vào mã hóa, chúng tôi sẽ xác định một số thuật ngữ và khái niệm chính để giúp chúng tôi hiểu cách xác thực JWT hoạt động, sau đó chúng tôi sẽ tích hợp hình thức xác thực này vào một dự án có máy chủ được tạo bằng Node.js và front-end được tạo bằng React.js một khung công tác được sử dụng rộng rãi (thực sự là yêu thích của cá nhân tôi) để phát triển front-end.

Để có thể theo dõi phần còn lại của bài viết, bạn cần những điều sau:

  • Kiến thức làm việc về JavaScript
  • Hiểu rõ về Node.js và cách sử dụng nó trong việc tạo máy chủ.
  • Làm việc hiểu biết về tạo cơ sở dữ liệu.
  • Kiến thức cơ bản về React.js
  • Postman và kiến ​​thức về cách sử dụng Postman.

JWT là gì và nó hoạt động như thế nào?

JWT là viết tắt của JSON Web Token, một tiêu chuẩn mở được sử dụng để chia sẻ thông tin bảo mật dưới dạng đối tượng JSON giữa máy khách và máy chủ. Sự hiện diện của JWT trong một yêu cầu đến máy chủ từ khách hàng cho thấy rằng thông tin đã được xác minh và độ tin cậy của nó được thiết lập vì nó được ký kỹ thuật số bằng cách sử dụng bí mật được viết bằng thuật toán mật mã để đảm bảo rằng các xác nhận quyền sở hữu không bị thay đổi sau mã thông báo được phát hành. Mặc dù không có người trung gian nào có thể sửa đổi JWT, nhưng bạn nên sử dụng nó trong môi trường HTTPS vì JWT không được mã hóa.

Xác thực JWT là một cơ chế xác thực không trạng thái được sử dụng phổ biến như một phiên không trạng thái phía máy khách. Máy chủ không phải hoàn toàn dựa vào cơ sở dữ liệu để lưu thông tin phiên. Thông tin phiên được lưu trữ trên máy khách; do đó, không cần tra cứu cơ sở dữ liệu để xác minh danh tính của người dùng yêu cầu. Nó hoạt động như thế này:

  • Người dùng đăng nhập vào một trang web hoặc ứng dụng bằng email / tên người dùng và mật khẩu để chứng minh danh tính của mình.
  • Máy chủ xác nhận danh tính của người dùng và gửi lại mã thông báo truy cập duy nhất có chứa tham chiếu đến danh tính của anh ta.
  • Sau đó, máy khách bao gồm mã thông báo truy cập duy nhất này với mọi yêu cầu đến máy chủ, vì vậy nếu mã thông báo truy cập bị sai / bị thay đổi, máy khách sẽ bị từ chối truy cập.
  • Đối với các tuyến đường được bảo vệ, một phần mềm trung gian xác thực được tạo trong máy chủ để xác nhận sự hiện diện của mã thông báo hợp lệ. Máy chủ có thể sử dụng thêm danh tính để triển khai các quyền chi tiết hơn.

1

Ưu và nhược điểm của Xác thực JWT

Có một số lợi thế:

  • Nhỏ gọn hơn: JSON ít dài dòng hơn XML, vì vậy khi nó được mã hóa, JWT nhỏ hơn mã thông báo SAML. Điều này làm cho JWT trở thành một lựa chọn tuyệt vời để được thông qua trong các môi trường HTML và HTTP.
  • An toàn hơn: JWT có thể sử dụng cặp khóa công khai / riêng tư làm chứng chỉ X.509 để ký. JWT cũng có thể được ký đối xứng bằng một bí mật được chia sẻ bằng cách sử dụng thuật toán HMAC. Và trong khi các mã thông báo SAML có thể sử dụng các cặp khóa công khai / riêng tư như JWT, việc ký XML bằng Chữ ký số XML mà không có các lỗ hổng bảo mật khó hiểu là rất khó khi so sánh với sự đơn giản của việc ký JSON. Đọc thêm về các thuật toán ký JWT tại đây .
  • Phổ biến hơn: Bộ phân tích cú pháp JSON phổ biến trong hầu hết các ngôn ngữ lập trình vì chúng ánh xạ trực tiếp đến các đối tượng. Ngược lại, XML không có ánh xạ tài liệu sang đối tượng tự nhiên, làm cho việc làm việc với JWT dễ dàng hơn so với các xác nhận SAML.
  • Dễ dàng xử lý hơn: JWT được sử dụng trên quy mô internet. Điều này có nghĩa là nó dễ dàng hơn để xử lý trên các thiết bị của người dùng, đặc biệt là thiết bị di động.

Tuy nhiên, cũng có một số nhược điểm:

  • Nếu một ứng dụng khách cần bị chặn hoặc hủy kích hoạt, ứng dụng sẽ phải đợi mã thông báo hết hạn để khóa có hiệu lực hoàn toàn.
  • Nếu khách hàng cần thay đổi mật khẩu của họ và xác thực đã được thực hiện trước đó, mã thông báo được tạo bằng mật khẩu trước đó sẽ vẫn có giá trị cho đến khi hết hạn.
  • Việc triển khai tiêu chuẩn chỉ định không có mã thông báo "làm mới". Khi hết hạn, khách hàng sẽ phải xác thực lại.
  • Không thể phá hủy mã thông báo mà không vi phạm khía cạnh “không trạng thái” của mã thông báo JWT: Ngay cả khi mã thông báo bị xóa khỏi trình duyệt, nó vẫn có giá trị cho đến khi hết hạn, vì vậy không thể đăng xuất thực sự.

Để đối phó với những thách thức này, một số thư viện JWT thêm một lớp bên trên thông số kỹ thuật tiêu chuẩn, cho phép cơ chế làm mới mã thông báo và một số tính năng như buộc người dùng xác thực lại. Dưới đây là một số khuyến nghị cho các nhà phát triển JWT.

Cấu trúc JWT là gì?

Mã thông báo web JSON ở dạng nhỏ gọn bao gồm ba phần được phân tách bằng dấu chấm, đó là:

  • Tiêu đề
  • Khối hàng
  • Chữ ký

Tiêu đề chứa hai phần: loại mã thông báo và thuật toán ký. Thuật toán ký có thể là HMAC SHA256 hoặc RSA. JSON này sau đó được mã hóa Base64Url để tạo thành phần đầu tiên của JWT. Đây là một ví dụ về tiêu đề:

{
  "alg" : "HS256",
  "typ": "JWT"
}

Trọng tải chủ yếu chứa các xác nhận quyền sở hữu. Tuyên bố là tuyên bố về một mặt hàng, trong trường hợp của chúng tôi là người dùng và dữ liệu bổ sung. Máy chủ thường sử dụng thông tin này để xác minh rằng người dùng có quyền thực hiện hành động mà họ đang yêu cầu. Ví dụ:

{
  "iss":" Signin route",
  "name": "janet",
  "sub":"2"
  "admin": true
}

Cuối cùng, chữ ký được sử dụng để xác minh rằng tin nhắn không bị thay đổi và nó cũng được sử dụng để xác minh rằng người gửi JWT là người mà nó nói. Chữ ký được tạo bằng cách lấy tiêu đề được mã hóa, trọng tải được mã hóa, bí mật và thuật toán được chỉ định trong tiêu đề và mã hóa đó. Ví dụ: nếu bạn muốn sử dụng thuật toán HMAC SHA256, chữ ký sẽ được tạo theo cách này:

HMAC256(
    base64UrlEncode(header) + "." + base64UrlEncode(payload), secret
)

Sau khi tất cả điều này được thực hiện, chúng tôi nhận được ba chuỗi Base64Url đại diện cho ba phần khác nhau của mã thông báo JWT được phân tách bằng dấu chấm có thể dễ dàng chuyển trong môi trường HTML và HTTP. Đây là một ví dụ từ https://token.dev/paseto/ hiển thị tiêu đề, trọng tải, chữ ký và ba chuỗi Base64Url của chúng tôi được phân tách bằng dấu chấm.

2

Tích hợp Xác thực JWT vào back end

Node.js là một môi trường thời gian chạy JavaScript back-end, đa nền tảng, mã nguồn mở, thực thi mã JavaScript bên ngoài trình duyệt web. Nó được thiết kế để xây dựng các ứng dụng mạng có khả năng mở rộng. Đối với tôi, Node.js là React của phát triển web back-end. Sử dụng Node.js, chúng tôi sẽ tạo các tuyến đăng nhập, đăng ký và xác thực sẽ nhận thông tin người dùng từ giao diện người dùng, băm mật khẩu nếu cần, tạo, xác minh và xác thực người dùng bất cứ khi nào người dùng đăng nhập và yêu cầu truy cập tuyến đường được bảo vệ của chúng tôi.

Cùng với Node.js cho dự án này, chúng tôi đã sử dụng PostgreSQL để tạo cơ sở dữ liệu của mình; bạn có thể tìm hiểu cách thực hiện điều đó tại đây , Knex.js để xây dựng truy vấn và bcrypt.js để băm mật khẩu của chúng tôi để nếu cơ sở dữ liệu của chúng tôi bị xâm phạm thì tin tặc sẽ không sử dụng được mật khẩu người dùng.

Tạo lộ trình đăng ký của chúng tôi

Đầu tiên, chúng ta cần cài đặt thư viện JWT và các phụ thuộc khác mà chúng ta cần cho dự án này. Để làm điều đó, chúng tôi sẽ chạy lệnh sau:

1npm i jsonwebtoken bcrypt knex postgres --save

Sau đó, chúng tôi sẽ lưu trữ bí mật của chúng tôi trong tệp .env của chúng tôi;

1REACT_APP_TOKEN= "jwtsecrettutorial"

Chúng tôi sẽ tạo điểm cuối đăng ký của mình để nhận thông tin của người dùng từ giao diện người dùng yêu cầu, băm mật khẩu, gửi thông tin đến cơ sở dữ liệu của chúng tôi, tạo mã thông báo JWT của chúng tôi và trả lời giao diện người dùng bằng mã thông báo JWT của chúng tôi;

app.post("/register", (req, res, db, bcrypt, jwt) => {
  const { email, name, password } = req.body;

  if (!email || !name || !password) {
    return res
      .status(400)
      .json(`${console.log(req.body)}incorrect form submission`);
  }

  //Hashing our password with bcrypt
  const hash = bcrypt.hashSync(password);
  db.transaction((trx) => {
    trx
      .insert({
        hash: hash,
        email: email,
      })

      //Inserting our user's info into our login and user table
      .into("login")
      .returning("email")
      .then((loginEmail) => {
        return trx("users").returning("*").insert({
          email: loginEmail[0].email,
          name: name,
          joined: new Date(),
        });
      })
      //creating the JWT token and responding to the front end with our token
      .then((user) => {
        const accessToken = jwt.sign({ email }, process.env.REACT_APP_TOKEN, {
          expiresIn: "3000s",
        });
        res.json({ accessToken });
      });
  })
    .then(trx.commit)
    .catch(trx.rollback);
});

3

Thông tin của khách hàng đã được gửi đến máy chủ bằng Postman trong hình trên. Sau khi lưu thông tin của khách hàng, máy chủ sẽ phản hồi bằng mã thông báo JWT cho một yêu cầu tiếp theo.

Tạo lộ trình Đăng nhập / Đăng nhập của chúng tôi

Đối với lộ trình đăng nhập, chúng tôi sẽ tạo điểm cuối của mình để nhận thông tin người dùng từ yêu cầu giao diện người dùng, xác minh xem người dùng có tồn tại trong cơ sở dữ liệu của chúng tôi hay không và nếu người dùng tồn tại, mã thông báo JWT sẽ được tạo và gửi đến phía máy khách ; mã thông báo này sẽ được sử dụng cho một yêu cầu API tiếp theo.

app.post("/signin", (req, res, db, bcrypt, jwt) => {
  const { email, password } = req.body;
  if (!email || !password) {
    return res.status(400).json("incorrect form submission");
  }
  //Getting the user info from the database
  db.select("email", "hash")
    .from("login")
    .where("email", "=", email)
    .then((data) => {
      //comparing the password rech the one in the database using bcrypt
      const isValid = bcrypt.compareSync(password, data[0].hash);
      if (isValid) {
        return db
          .select("*")
          .from("users")
          .where("email", "=", email)
          .then((user) => {
            const accessToken = jwt.sign(
              { email },
              process.env.REACT_APP_TOKEN,
              { expiresIn: "3000s" }
            );
            res.json({ accessToken });
          })
          .catch((err) => res.status(400).json(`${err}wrong credentials`));
      } else {
        res.status(400).json(`${err}wrong credentials`);
      }
    })
    .catch((err) => res.status(400).json(`${err}wrong credentials`));
});

4

Trong hình trên, thông tin của khách hàng đã được gửi đến máy chủ bằng Postman. Sau khi kiểm tra chéo và xác nhận thông tin của khách hàng, máy chủ sẽ phản hồi bằng mã thông báo JWT cho các yêu cầu tiếp theo.

Tạo lộ trình xác thực của chúng tôi

Để xác thực, chúng tôi sẽ tạo một phần mềm trung gian thực hiện xác thực bất cứ khi nào yêu cầu được thực hiện thông qua tuyến đường được bảo vệ của chúng tôi. Lộ trình này sẽ yêu cầu mã thông báo người dùng trong tiêu đề yêu cầu là 'x-auth-token' để ủy quyền. Mã thông báo sẽ được lấy từ tiêu đề và được xác minh bởi phần mềm trung gian của chúng tôi. Bạn có thể tìm hiểu thêm về Ủy quyền HTTP qua tiêu đề yêu cầu tại đây . Để tạo phần mềm trung gian, hãy sử dụng mã bên dưới;

require("dotenv").config();
var jwt = require("jsonwebtoken");

module.exports = {
  jwtauth(req, res, next) {
    const token = req.header("x-auth-token");
    if (!token) {
      res.status(401).json("token not found");
    }
    try {
      const user = jwt.verify(token, process.env.REACT_APP_TOKEN);
      req.user = user.email;
      console.log("middleware is working");
      next();
    } catch (error) {
      res.status(401).json("invalid token");
    }
  },
};

Bây giờ chúng tôi có thể thêm một tuyến đường được bảo vệ vào máy chủ của chúng tôi; một yêu cầu tới tuyến đường này trước tiên sẽ đi qua phần mềm trung gian của chúng tôi trước khi quyền truy cập được cấp hoặc từ chối.

const jwtauth = require("./middleware/jwtauth");

app.post("/protected", jwtauth, (req, res) => {
  res.status(200).send("Here's the info you requested ");
});

Nếu một yêu cầu được thực hiện mà không cung cấp mã thông báo bằng 'x-access-token' trong tiêu đề, một thông báo lỗi sẽ được trả về cho biết "không tìm thấy mã thông báo".

5

Trong hình trên, một yêu cầu được gửi đến máy chủ qua Postman mà không có mã thông báo trong tiêu đề và máy chủ phản hồi bằng một thông báo lỗi cho biết không tìm thấy mã thông báo. Nếu mã thông báo được cung cấp trong tiêu đề và mã thông báo đó chính xác, nó cho phép khách hàng truy cập vào tuyến đường được bảo vệ, nhưng nếu mã thông báo sai, nó sẽ phản hồi bằng một thông báo lỗi cho biết “mã thông báo không hợp lệ”.

6

Trong hình trên, một yêu cầu được gửi đến máy chủ qua Postman với mã thông báo không chính xác trong tiêu đề và máy chủ phản hồi bằng một thông báo lỗi cho biết mã thông báo không hợp lệ.

Tích hợp Xác thực JWT vào giao diện người dùng

Để thực hiện việc này, bạn cần cài đặt Axios trong giao diện người dùng của chúng tôi được tạo bằng React.js bằng cách thực hiện;

1npm i axios

Trong trang đăng ký / đăng ký trong React.js của chúng tôi, chúng tôi muốn phía máy khách lưu trữ JWT mà nó nhận được từ phía máy chủ sau khi thông tin của họ được lưu trữ trên cơ sở dữ liệu. Mã thông báo này sẽ được sử dụng cho các yêu cầu API tiếp theo, vì vậy chúng tôi thêm chức năng này vào mã của mình;

onSubmitSignUp = () => {
  console.log(this.state);
  axios
    .post("http://localhost:3001/register", {
      email: this.state.email,
      password: this.state.password,
      name: this.state.name,
      enteries: this.state.enteries,
    })

    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      } else {
        console.log("no response");
      }
    });
};

Khi điều này được thực hiện, mã thông báo được lưu trữ trong bộ nhớ cục bộ của chúng tôi ở phía máy khách. Chúng tôi sẽ làm điều tương tự với trang đăng nhập của mình để mã thông báo sẽ được tạo cho các lệnh gọi API tiếp theo khi người dùng hiện có đăng nhập.

onSubmitSignIn = () => {
  console.log(this.state);
  axios
    .post("http://localhost:3001/signin", {
      email: this.state.email,
      password: this.state.password,
    })

    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      } else {
        console.log("no response");
      }
    });
};

Đối với lộ trình xác thực của chúng tôi, chúng tôi phải truy xuất mã thông báo đã được lưu trữ từ bộ nhớ của chúng tôi, sau đó sẽ được gửi đến phía máy chủ để xác thực và thực hiện thêm hành động.

export default function authHeader() {
  const user = JSON.parse(localStorage.getItem("user"));
  if (useraccessToken) {
    return { "x-auth-token": user.accessToken };
  }
}
axios.post("http://localhost:3001/protected", { header: authHeader() });

Với tất cả những điều này đã hoàn thành, chúng tôi đã thiết lập thành công một hệ thống xác thực hoạt động hoạt động với node.js (back-end) của chúng tôi, tạo mã thông báo của chúng tôi và gửi nó đến react.js (front-end) của chúng tôi, sau đó lưu trữ mã thông báo của chúng tôi và sử dụng nó cho các yêu cầu tiếp theo đối với tuyến đường được bảo vệ của chúng tôi.

Sự kết luận

Cho đến nay, chúng tôi đã xem xét xác thực JWT, cấu trúc JWT, xác thực JWT là gì, cách thức hoạt động và cách thêm nó vào các tuyến node.js phía máy chủ và ứng dụng React.js của chúng tôi. Bạn có thể tìm hiểu thêm về JWT cũng như các thư viện và công cụ giúp bạn sử dụng xác thực JWT dễ dàng và an toàn hơn tại đây . Tôi hy vọng hướng dẫn này hữu ích, chúc bạn có những yêu cầu xác thực vui vẻ với Mã thông báo web JSON.

Liên kết: https://blog.openreplay.com/authentication-with-jwt-for-your-website

#jwt #authentication

What is GEEK

Buddha Community

Cách Xác Thực Với JWT Cho Trang Web Của Bạn
Hoang  Kim

Hoang Kim

1659012494

Cách Xác Thực Với JWT Cho Trang Web Của Bạn

Kể từ khi phát triển ứng dụng web ra đời, rất nhiều thông tin nhạy cảm được gửi qua internet khiến khái niệm xác thực là điều mà mọi nhà phát triển web nên hiểu và áp dụng trong ứng dụng để bảo mật thông tin được người dùng giao phó cho ứng dụng. Trong bài viết này, chúng ta sẽ xem xét một phương tiện xác thực cho các ứng dụng web được gọi là xác thực JWT. So với các phương pháp khác, xác thực JWT đã trở thành một yêu thích do có nhiều ưu điểm đối với các nhà phát triển.

Trước khi đi sâu vào mã hóa, chúng tôi sẽ xác định một số thuật ngữ và khái niệm chính để giúp chúng tôi hiểu cách xác thực JWT hoạt động, sau đó chúng tôi sẽ tích hợp hình thức xác thực này vào một dự án có máy chủ được tạo bằng Node.js và front-end được tạo bằng React.js một khung công tác được sử dụng rộng rãi (thực sự là yêu thích của cá nhân tôi) để phát triển front-end.

Để có thể theo dõi phần còn lại của bài viết, bạn cần những điều sau:

  • Kiến thức làm việc về JavaScript
  • Hiểu rõ về Node.js và cách sử dụng nó trong việc tạo máy chủ.
  • Làm việc hiểu biết về tạo cơ sở dữ liệu.
  • Kiến thức cơ bản về React.js
  • Postman và kiến ​​thức về cách sử dụng Postman.

JWT là gì và nó hoạt động như thế nào?

JWT là viết tắt của JSON Web Token, một tiêu chuẩn mở được sử dụng để chia sẻ thông tin bảo mật dưới dạng đối tượng JSON giữa máy khách và máy chủ. Sự hiện diện của JWT trong một yêu cầu đến máy chủ từ khách hàng cho thấy rằng thông tin đã được xác minh và độ tin cậy của nó được thiết lập vì nó được ký kỹ thuật số bằng cách sử dụng bí mật được viết bằng thuật toán mật mã để đảm bảo rằng các xác nhận quyền sở hữu không bị thay đổi sau mã thông báo được phát hành. Mặc dù không có người trung gian nào có thể sửa đổi JWT, nhưng bạn nên sử dụng nó trong môi trường HTTPS vì JWT không được mã hóa.

Xác thực JWT là một cơ chế xác thực không trạng thái được sử dụng phổ biến như một phiên không trạng thái phía máy khách. Máy chủ không phải hoàn toàn dựa vào cơ sở dữ liệu để lưu thông tin phiên. Thông tin phiên được lưu trữ trên máy khách; do đó, không cần tra cứu cơ sở dữ liệu để xác minh danh tính của người dùng yêu cầu. Nó hoạt động như thế này:

  • Người dùng đăng nhập vào một trang web hoặc ứng dụng bằng email / tên người dùng và mật khẩu để chứng minh danh tính của mình.
  • Máy chủ xác nhận danh tính của người dùng và gửi lại mã thông báo truy cập duy nhất có chứa tham chiếu đến danh tính của anh ta.
  • Sau đó, máy khách bao gồm mã thông báo truy cập duy nhất này với mọi yêu cầu đến máy chủ, vì vậy nếu mã thông báo truy cập bị sai / bị thay đổi, máy khách sẽ bị từ chối truy cập.
  • Đối với các tuyến đường được bảo vệ, một phần mềm trung gian xác thực được tạo trong máy chủ để xác nhận sự hiện diện của mã thông báo hợp lệ. Máy chủ có thể sử dụng thêm danh tính để triển khai các quyền chi tiết hơn.

1

Ưu và nhược điểm của Xác thực JWT

Có một số lợi thế:

  • Nhỏ gọn hơn: JSON ít dài dòng hơn XML, vì vậy khi nó được mã hóa, JWT nhỏ hơn mã thông báo SAML. Điều này làm cho JWT trở thành một lựa chọn tuyệt vời để được thông qua trong các môi trường HTML và HTTP.
  • An toàn hơn: JWT có thể sử dụng cặp khóa công khai / riêng tư làm chứng chỉ X.509 để ký. JWT cũng có thể được ký đối xứng bằng một bí mật được chia sẻ bằng cách sử dụng thuật toán HMAC. Và trong khi các mã thông báo SAML có thể sử dụng các cặp khóa công khai / riêng tư như JWT, việc ký XML bằng Chữ ký số XML mà không có các lỗ hổng bảo mật khó hiểu là rất khó khi so sánh với sự đơn giản của việc ký JSON. Đọc thêm về các thuật toán ký JWT tại đây .
  • Phổ biến hơn: Bộ phân tích cú pháp JSON phổ biến trong hầu hết các ngôn ngữ lập trình vì chúng ánh xạ trực tiếp đến các đối tượng. Ngược lại, XML không có ánh xạ tài liệu sang đối tượng tự nhiên, làm cho việc làm việc với JWT dễ dàng hơn so với các xác nhận SAML.
  • Dễ dàng xử lý hơn: JWT được sử dụng trên quy mô internet. Điều này có nghĩa là nó dễ dàng hơn để xử lý trên các thiết bị của người dùng, đặc biệt là thiết bị di động.

Tuy nhiên, cũng có một số nhược điểm:

  • Nếu một ứng dụng khách cần bị chặn hoặc hủy kích hoạt, ứng dụng sẽ phải đợi mã thông báo hết hạn để khóa có hiệu lực hoàn toàn.
  • Nếu khách hàng cần thay đổi mật khẩu của họ và xác thực đã được thực hiện trước đó, mã thông báo được tạo bằng mật khẩu trước đó sẽ vẫn có giá trị cho đến khi hết hạn.
  • Việc triển khai tiêu chuẩn chỉ định không có mã thông báo "làm mới". Khi hết hạn, khách hàng sẽ phải xác thực lại.
  • Không thể phá hủy mã thông báo mà không vi phạm khía cạnh “không trạng thái” của mã thông báo JWT: Ngay cả khi mã thông báo bị xóa khỏi trình duyệt, nó vẫn có giá trị cho đến khi hết hạn, vì vậy không thể đăng xuất thực sự.

Để đối phó với những thách thức này, một số thư viện JWT thêm một lớp bên trên thông số kỹ thuật tiêu chuẩn, cho phép cơ chế làm mới mã thông báo và một số tính năng như buộc người dùng xác thực lại. Dưới đây là một số khuyến nghị cho các nhà phát triển JWT.

Cấu trúc JWT là gì?

Mã thông báo web JSON ở dạng nhỏ gọn bao gồm ba phần được phân tách bằng dấu chấm, đó là:

  • Tiêu đề
  • Khối hàng
  • Chữ ký

Tiêu đề chứa hai phần: loại mã thông báo và thuật toán ký. Thuật toán ký có thể là HMAC SHA256 hoặc RSA. JSON này sau đó được mã hóa Base64Url để tạo thành phần đầu tiên của JWT. Đây là một ví dụ về tiêu đề:

{
  "alg" : "HS256",
  "typ": "JWT"
}

Trọng tải chủ yếu chứa các xác nhận quyền sở hữu. Tuyên bố là tuyên bố về một mặt hàng, trong trường hợp của chúng tôi là người dùng và dữ liệu bổ sung. Máy chủ thường sử dụng thông tin này để xác minh rằng người dùng có quyền thực hiện hành động mà họ đang yêu cầu. Ví dụ:

{
  "iss":" Signin route",
  "name": "janet",
  "sub":"2"
  "admin": true
}

Cuối cùng, chữ ký được sử dụng để xác minh rằng tin nhắn không bị thay đổi và nó cũng được sử dụng để xác minh rằng người gửi JWT là người mà nó nói. Chữ ký được tạo bằng cách lấy tiêu đề được mã hóa, trọng tải được mã hóa, bí mật và thuật toán được chỉ định trong tiêu đề và mã hóa đó. Ví dụ: nếu bạn muốn sử dụng thuật toán HMAC SHA256, chữ ký sẽ được tạo theo cách này:

HMAC256(
    base64UrlEncode(header) + "." + base64UrlEncode(payload), secret
)

Sau khi tất cả điều này được thực hiện, chúng tôi nhận được ba chuỗi Base64Url đại diện cho ba phần khác nhau của mã thông báo JWT được phân tách bằng dấu chấm có thể dễ dàng chuyển trong môi trường HTML và HTTP. Đây là một ví dụ từ https://token.dev/paseto/ hiển thị tiêu đề, trọng tải, chữ ký và ba chuỗi Base64Url của chúng tôi được phân tách bằng dấu chấm.

2

Tích hợp Xác thực JWT vào back end

Node.js là một môi trường thời gian chạy JavaScript back-end, đa nền tảng, mã nguồn mở, thực thi mã JavaScript bên ngoài trình duyệt web. Nó được thiết kế để xây dựng các ứng dụng mạng có khả năng mở rộng. Đối với tôi, Node.js là React của phát triển web back-end. Sử dụng Node.js, chúng tôi sẽ tạo các tuyến đăng nhập, đăng ký và xác thực sẽ nhận thông tin người dùng từ giao diện người dùng, băm mật khẩu nếu cần, tạo, xác minh và xác thực người dùng bất cứ khi nào người dùng đăng nhập và yêu cầu truy cập tuyến đường được bảo vệ của chúng tôi.

Cùng với Node.js cho dự án này, chúng tôi đã sử dụng PostgreSQL để tạo cơ sở dữ liệu của mình; bạn có thể tìm hiểu cách thực hiện điều đó tại đây , Knex.js để xây dựng truy vấn và bcrypt.js để băm mật khẩu của chúng tôi để nếu cơ sở dữ liệu của chúng tôi bị xâm phạm thì tin tặc sẽ không sử dụng được mật khẩu người dùng.

Tạo lộ trình đăng ký của chúng tôi

Đầu tiên, chúng ta cần cài đặt thư viện JWT và các phụ thuộc khác mà chúng ta cần cho dự án này. Để làm điều đó, chúng tôi sẽ chạy lệnh sau:

1npm i jsonwebtoken bcrypt knex postgres --save

Sau đó, chúng tôi sẽ lưu trữ bí mật của chúng tôi trong tệp .env của chúng tôi;

1REACT_APP_TOKEN= "jwtsecrettutorial"

Chúng tôi sẽ tạo điểm cuối đăng ký của mình để nhận thông tin của người dùng từ giao diện người dùng yêu cầu, băm mật khẩu, gửi thông tin đến cơ sở dữ liệu của chúng tôi, tạo mã thông báo JWT của chúng tôi và trả lời giao diện người dùng bằng mã thông báo JWT của chúng tôi;

app.post("/register", (req, res, db, bcrypt, jwt) => {
  const { email, name, password } = req.body;

  if (!email || !name || !password) {
    return res
      .status(400)
      .json(`${console.log(req.body)}incorrect form submission`);
  }

  //Hashing our password with bcrypt
  const hash = bcrypt.hashSync(password);
  db.transaction((trx) => {
    trx
      .insert({
        hash: hash,
        email: email,
      })

      //Inserting our user's info into our login and user table
      .into("login")
      .returning("email")
      .then((loginEmail) => {
        return trx("users").returning("*").insert({
          email: loginEmail[0].email,
          name: name,
          joined: new Date(),
        });
      })
      //creating the JWT token and responding to the front end with our token
      .then((user) => {
        const accessToken = jwt.sign({ email }, process.env.REACT_APP_TOKEN, {
          expiresIn: "3000s",
        });
        res.json({ accessToken });
      });
  })
    .then(trx.commit)
    .catch(trx.rollback);
});

3

Thông tin của khách hàng đã được gửi đến máy chủ bằng Postman trong hình trên. Sau khi lưu thông tin của khách hàng, máy chủ sẽ phản hồi bằng mã thông báo JWT cho một yêu cầu tiếp theo.

Tạo lộ trình Đăng nhập / Đăng nhập của chúng tôi

Đối với lộ trình đăng nhập, chúng tôi sẽ tạo điểm cuối của mình để nhận thông tin người dùng từ yêu cầu giao diện người dùng, xác minh xem người dùng có tồn tại trong cơ sở dữ liệu của chúng tôi hay không và nếu người dùng tồn tại, mã thông báo JWT sẽ được tạo và gửi đến phía máy khách ; mã thông báo này sẽ được sử dụng cho một yêu cầu API tiếp theo.

app.post("/signin", (req, res, db, bcrypt, jwt) => {
  const { email, password } = req.body;
  if (!email || !password) {
    return res.status(400).json("incorrect form submission");
  }
  //Getting the user info from the database
  db.select("email", "hash")
    .from("login")
    .where("email", "=", email)
    .then((data) => {
      //comparing the password rech the one in the database using bcrypt
      const isValid = bcrypt.compareSync(password, data[0].hash);
      if (isValid) {
        return db
          .select("*")
          .from("users")
          .where("email", "=", email)
          .then((user) => {
            const accessToken = jwt.sign(
              { email },
              process.env.REACT_APP_TOKEN,
              { expiresIn: "3000s" }
            );
            res.json({ accessToken });
          })
          .catch((err) => res.status(400).json(`${err}wrong credentials`));
      } else {
        res.status(400).json(`${err}wrong credentials`);
      }
    })
    .catch((err) => res.status(400).json(`${err}wrong credentials`));
});

4

Trong hình trên, thông tin của khách hàng đã được gửi đến máy chủ bằng Postman. Sau khi kiểm tra chéo và xác nhận thông tin của khách hàng, máy chủ sẽ phản hồi bằng mã thông báo JWT cho các yêu cầu tiếp theo.

Tạo lộ trình xác thực của chúng tôi

Để xác thực, chúng tôi sẽ tạo một phần mềm trung gian thực hiện xác thực bất cứ khi nào yêu cầu được thực hiện thông qua tuyến đường được bảo vệ của chúng tôi. Lộ trình này sẽ yêu cầu mã thông báo người dùng trong tiêu đề yêu cầu là 'x-auth-token' để ủy quyền. Mã thông báo sẽ được lấy từ tiêu đề và được xác minh bởi phần mềm trung gian của chúng tôi. Bạn có thể tìm hiểu thêm về Ủy quyền HTTP qua tiêu đề yêu cầu tại đây . Để tạo phần mềm trung gian, hãy sử dụng mã bên dưới;

require("dotenv").config();
var jwt = require("jsonwebtoken");

module.exports = {
  jwtauth(req, res, next) {
    const token = req.header("x-auth-token");
    if (!token) {
      res.status(401).json("token not found");
    }
    try {
      const user = jwt.verify(token, process.env.REACT_APP_TOKEN);
      req.user = user.email;
      console.log("middleware is working");
      next();
    } catch (error) {
      res.status(401).json("invalid token");
    }
  },
};

Bây giờ chúng tôi có thể thêm một tuyến đường được bảo vệ vào máy chủ của chúng tôi; một yêu cầu tới tuyến đường này trước tiên sẽ đi qua phần mềm trung gian của chúng tôi trước khi quyền truy cập được cấp hoặc từ chối.

const jwtauth = require("./middleware/jwtauth");

app.post("/protected", jwtauth, (req, res) => {
  res.status(200).send("Here's the info you requested ");
});

Nếu một yêu cầu được thực hiện mà không cung cấp mã thông báo bằng 'x-access-token' trong tiêu đề, một thông báo lỗi sẽ được trả về cho biết "không tìm thấy mã thông báo".

5

Trong hình trên, một yêu cầu được gửi đến máy chủ qua Postman mà không có mã thông báo trong tiêu đề và máy chủ phản hồi bằng một thông báo lỗi cho biết không tìm thấy mã thông báo. Nếu mã thông báo được cung cấp trong tiêu đề và mã thông báo đó chính xác, nó cho phép khách hàng truy cập vào tuyến đường được bảo vệ, nhưng nếu mã thông báo sai, nó sẽ phản hồi bằng một thông báo lỗi cho biết “mã thông báo không hợp lệ”.

6

Trong hình trên, một yêu cầu được gửi đến máy chủ qua Postman với mã thông báo không chính xác trong tiêu đề và máy chủ phản hồi bằng một thông báo lỗi cho biết mã thông báo không hợp lệ.

Tích hợp Xác thực JWT vào giao diện người dùng

Để thực hiện việc này, bạn cần cài đặt Axios trong giao diện người dùng của chúng tôi được tạo bằng React.js bằng cách thực hiện;

1npm i axios

Trong trang đăng ký / đăng ký trong React.js của chúng tôi, chúng tôi muốn phía máy khách lưu trữ JWT mà nó nhận được từ phía máy chủ sau khi thông tin của họ được lưu trữ trên cơ sở dữ liệu. Mã thông báo này sẽ được sử dụng cho các yêu cầu API tiếp theo, vì vậy chúng tôi thêm chức năng này vào mã của mình;

onSubmitSignUp = () => {
  console.log(this.state);
  axios
    .post("http://localhost:3001/register", {
      email: this.state.email,
      password: this.state.password,
      name: this.state.name,
      enteries: this.state.enteries,
    })

    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      } else {
        console.log("no response");
      }
    });
};

Khi điều này được thực hiện, mã thông báo được lưu trữ trong bộ nhớ cục bộ của chúng tôi ở phía máy khách. Chúng tôi sẽ làm điều tương tự với trang đăng nhập của mình để mã thông báo sẽ được tạo cho các lệnh gọi API tiếp theo khi người dùng hiện có đăng nhập.

onSubmitSignIn = () => {
  console.log(this.state);
  axios
    .post("http://localhost:3001/signin", {
      email: this.state.email,
      password: this.state.password,
    })

    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      } else {
        console.log("no response");
      }
    });
};

Đối với lộ trình xác thực của chúng tôi, chúng tôi phải truy xuất mã thông báo đã được lưu trữ từ bộ nhớ của chúng tôi, sau đó sẽ được gửi đến phía máy chủ để xác thực và thực hiện thêm hành động.

export default function authHeader() {
  const user = JSON.parse(localStorage.getItem("user"));
  if (useraccessToken) {
    return { "x-auth-token": user.accessToken };
  }
}
axios.post("http://localhost:3001/protected", { header: authHeader() });

Với tất cả những điều này đã hoàn thành, chúng tôi đã thiết lập thành công một hệ thống xác thực hoạt động hoạt động với node.js (back-end) của chúng tôi, tạo mã thông báo của chúng tôi và gửi nó đến react.js (front-end) của chúng tôi, sau đó lưu trữ mã thông báo của chúng tôi và sử dụng nó cho các yêu cầu tiếp theo đối với tuyến đường được bảo vệ của chúng tôi.

Sự kết luận

Cho đến nay, chúng tôi đã xem xét xác thực JWT, cấu trúc JWT, xác thực JWT là gì, cách thức hoạt động và cách thêm nó vào các tuyến node.js phía máy chủ và ứng dụng React.js của chúng tôi. Bạn có thể tìm hiểu thêm về JWT cũng như các thư viện và công cụ giúp bạn sử dụng xác thực JWT dễ dàng và an toàn hơn tại đây . Tôi hy vọng hướng dẫn này hữu ích, chúc bạn có những yêu cầu xác thực vui vẻ với Mã thông báo web JSON.

Liên kết: https://blog.openreplay.com/authentication-with-jwt-for-your-website

#jwt #authentication

Evolution in Web Design: A Case Study of 25 Years - Prismetric

The term web design simply encompasses a design process related to the front-end design of website that includes writing mark-up. Creative web design has a considerable impact on your perceived business credibility and quality. It taps onto the broader scopes of web development services.

Web designing is identified as a critical factor for the success of websites and eCommerce. The internet has completely changed the way businesses and brands operate. Web design and web development go hand-in-hand and the need for a professional web design and development company, offering a blend of creative designs and user-centric elements at an affordable rate, is growing at a significant rate.

In this blog, we have focused on the different areas of designing a website that covers all the trends, tools, and techniques coming up with time.

Web design
In 2020 itself, the number of smartphone users across the globe stands at 6.95 billion, with experts suggesting a high rise of 17.75 billion by 2024. On the other hand, the percentage of Gen Z web and internet users worldwide is up to 98%. This is not just a huge market but a ginormous one to boost your business and grow your presence online.

Web Design History
At a huge particle physics laboratory, CERN in Switzerland, the son of computer scientist Barner Lee published the first-ever website on August 6, 1991. He is not only the first web designer but also the creator of HTML (HyperText Markup Language). The worldwide web persisted and after two years, the world’s first search engine was born. This was just the beginning.

Evolution of Web Design over the years
With the release of the Internet web browser and Windows 95 in 1995, most trading companies at that time saw innumerable possibilities of instant worldwide information and public sharing of websites to increase their sales. This led to the prospect of eCommerce and worldwide group communications.

The next few years saw a soaring launch of the now-so-famous websites such as Yahoo, Amazon, eBay, Google, and substantially more. In 2004, by the time Facebook was launched, there were more than 50 million websites online.

Then came the era of Google, the ruler of all search engines introducing us to search engine optimization (SEO) and businesses sought their ways to improve their ranks. The world turned more towards mobile web experiences and responsive mobile-friendly web designs became requisite.

Let’s take a deep look at the evolution of illustrious brands to have a profound understanding of web design.

Here is a retrospection of a few widely acclaimed brands over the years.

Netflix
From a simple idea of renting DVDs online to a multi-billion-dollar business, saying that Netflix has come a long way is an understatement. A company that has sent shockwaves across Hollywood in the form of content delivery. Abundantly, Netflix (NFLX) is responsible for the rise in streaming services across 190 countries and meaningful changes in the entertainment industry.

1997-2000

The idea of Netflix was born when Reed Hastings and Marc Randolph decided to rent DVDs by mail. With 925 titles and a pay-per-rental model, Netflix.com debuts the first DVD rental and sales site with all novel features. It offered unlimited rentals without due dates or monthly rental limitations with a personalized movie recommendation system.

Netflix 1997-2000

2001-2005

Announcing its initial public offering (IPO) under the NASDAQ ticker NFLX, Netflix reached over 1 million subscribers in the United States by introducing a profile feature in their influential website design along with a free trial allowing members to create lists and rate their favorite movies. The user experience was quite engaging with the categorization of content, recommendations based on history, search engine, and a queue of movies to watch.

Netflix 2001-2005 -2003

2006-2010

They then unleashed streaming and partnering with electronic brands such as blu-ray, Xbox, and set-top boxes so that users can watch series and films straight away. Later in 2010, they also launched their sophisticated website on mobile devices with its iconic red and black themed background.

Netflix 2006-2010 -2007

2011-2015

In 2013, an eye-tracking test revealed that the users didn’t focus on the details of the movie or show in the existing interface and were perplexed with the flow of information. Hence, the professional web designers simply shifted the text from the right side to the top of the screen. With Daredevil, an audio description feature was also launched for the visually impaired ones.

Netflix 2011-2015

2016-2020

These years, Netflix came with a plethora of new features for their modern website design such as AutoPay, snippets of trailers, recommendations categorized by genre, percentage based on user experience, upcoming shows, top 10 lists, etc. These web application features yielded better results in visual hierarchy and flow of information across the website.

Netflix 2016-2020

2021

With a sleek logo in their iconic red N, timeless black background with a ‘Watch anywhere, Cancel anytime’ the color, the combination, the statement, and the leading ott platform for top video streaming service Netflix has overgrown into a revolutionary lifestyle of Netflix and Chill.

Netflix 2021

Contunue to read: Evolution in Web Design: A Case Study of 25 Years

#web #web-design #web-design-development #web-design-case-study #web-design-history #web-development

prashant patil

1598286700

whatsapp web-w app web-webs whatsapp »

Through whatsapp web you can easily run whatsapp on your android pc on your android mobile. Just like whatsapp mobile is for android device, whatsapp web is for windows device. Whatsapp web is quite popular which has quite cool features.

whatsapp web

how to use whatsapp web desktop
Whatsapp web is very easy to use. Simply you have to search web.whatsapp.com in your google chrome and click on first result which is the official website of whatsapp web.

As soon as you click, an interface will open in front of you, on which you will see a barcode. Follow the steps given below to use whatsapp web on your desktop

web.whatsapp.com

open your whatsapp on your mobile
You will see 3dots on the right side top inside whatsapp, you have to click
The 3rd option is whatsapp web, you have to click it
Now you have to capture the barcode you see on your desktop through your phone.
Now you can use whatsapp of your android mobile in your desktop
webs whatsapp

note: You can see whatsapp of anyone’s mobile by pointing to the barcode of your desktop. You can also call it whatsapp hack.

Remember that after using whatsapp web, logout it from your desktop. To logout follow the steps given below.

w app web

open your whatsapp on your mobile
You will see 3dots on the right side top inside whatsapp, you have to click
The 3rd option is whatsapp web, you have to click it
You will see the symbol for logout, you have to logout by clicking it.

read more

#whatsapp #whatappweb #https://web.whatsapp.com/ #wsp web #web.whatsapp web #web whatsapp

Hollie  Ratke

Hollie Ratke

1600484400

How to Disable Caching of particular JS/CSS file?

You fixed everything in your website the images and text everything.

You have a pretty good idea about what will appear on your screen and what will not.

But!

There is a good chance when you open your file in the browser to see how the site is doing over there, you will see the really old version rendering at first.

Then Refresh, Refresh and Refresh….

And there it is!

#web-tips-tricks #web-development #web #web-dev-resources #web-tips

Ananya Gupta

Ananya Gupta

1613386017

Key Points For Joining The Best Web Designing For Better Career Option

The scope of the web designer is increasing day by day, because of high demanding job forms an important part of our society. Web Designing is that the creation and planning of internet sites. it’s a process of developing different sites.

To be an honest web designer you ought to have an entire knowledge of CSS and HTML. These are the important prerequisite for designing an internet site. In today’s world of competition to be amongst at the highest one needs media. Websites are playing a key role in today’s life. Whether in online web desiging course mention shopping or engineering everything is formed online.

These are some of the main benefits which a standard person has made with the utilization of internet sites. many roles are available for web designers than before. Many big companies demand experienced and quality web designers.

Web designing is the creative and innovative part of web development during which the designer is especially concerned with how our website looks. CSS is the heart of the web designing part.

The scope of web designing is increasing day by day. In today’s web and internet world, people want a creative website once they want to access it. Top company web development of India hands over 8-10 lac per annum for an experienced web designer. So it’s a really good field for creating websites.

Web designers have the work of designing whole websites which forms the primary step of web development. After web designing remaining work will start. In today’s growing scenario there are many job opportunities for fresher and experienced candidates.

Web designing is a crucial course that features a lot of scope within the present and also in the future scenario. There are two ways to travel through this course. If you’re curious about taking over a full-time web designer course then we will make a career in media or as advertising agents.

If one is curious about Engineering or in Commerce course but getting to develop the skill in web designing, then you’ll prefer the part-time short course in web designing.

When it comes to selecting a training institute, you will find them in every corner. CETPA Infotech is a reputed training institution and provides training that is industry oriented, updated, innovative and summer training has become a pioneer during this online designing field.

#web designing training in noida #web designing training in delhi #web designing online training #web designing online course #web designing course #web designing training