田辺  亮介

田辺 亮介

1658997973

如何使用 JWT 為您的網站進行身份驗證

自從 Web 應用程序開發出現以來,許多敏感信息都通過 Internet 發送,這使得身份驗證的概念成為每個 Web 開發人員都應該理解並在應用程序中應用以保護用戶委託給應用程序的信息。在本文中,我們將介紹一種稱為 JWT 身份驗證的 Web 應用程序身份驗證方法。與其他人相比,JWT 身份驗證因其對開發人員的諸多優勢而成為人們的最愛。

在深入編碼之前,我們將定義一些關鍵術語和概念以幫助我們了解 JWT 身份驗證的工作原理,之後我們會將這種形式的身份驗證集成到一個項目中,該項目有一個使用 Node.js 創建的服務器,以及一個使用 React.js 創建的前端是一個廣泛使用的前端開發框架(實際上是我個人最喜歡的)。

為了能夠繼續閱讀本文的其餘部分,您需要以下內容:

  • JavaScript的工作知識
  • 對 Node.js 以及如何在創建服務器時使用它有很好的理解。
  • 對數據庫創建的工作理解。
  • React.js 基礎知識
  • 郵遞員和如何使用郵遞員的知識。

什麼是 JWT,它是如何工作的?

JWT 代表 JSON Web Token,這是一種開放標準,用於在客戶端和服務器之間以 JSON 對象的形式共享安全信息。客戶端向服務器發出的請求中存在 JWT 表示該信息已經過驗證,並且它的可信度已經建立,因為它是使用用加密算法編寫的秘密進行數字簽名的,以確保聲明之後不會被更改發出令牌。雖然沒有中間人可以修改 JWT,但建議在 HTTPS 環境中使用它,因為 JWT 未加密。

JWT 身份驗證是一種無狀態身份驗證機制,通常用作客戶端無狀態會話。服務器不必完全依賴數據庫來保存會話信息。會話信息存儲在客戶端;因此,不需要數據庫查找來驗證請求用戶的身份。它是這樣工作的:

  • 用戶使用電子郵件/用戶名和密碼登錄網站或應用程序以證明其身份。
  • 服務器確認用戶的身份並發回一個唯一的訪問令牌,其中包含對其身份的引用。
  • 然後,客戶端在對服務器的每個請求中都包含這個唯一的訪問令牌,因此如果訪問令牌錯誤/更改,客戶端將被拒絕訪問。
  • 對於受保護的路由,在服務器中創建一個身份驗證中間件來斷言有效令牌的存在。服務器可以進一步使用身份來實現更細粒度的權限。

第一的

JWT 身份驗證的優缺點

有幾個優點:

  • 更緊湊:JSON 比 XML 更簡潔,因此在對其進行編碼時,JWT 小於 SAML 令牌。這使得 JWT 成為在 HTML 和 HTTP 環境中傳遞的絕佳選擇。
  • 更安全:JWT 可以使用公鑰/私鑰對作為 X.509 證書進行簽名。JWT 也可以使用 HMAC 算法通過共享密鑰進行對稱簽名。雖然 SAML 令牌可以使用 JWT 等公鑰/私鑰對,但與簽署 JSON 的簡單性相比,使用 XML 數字簽名簽署 XML 而不引入晦澀的安全漏洞是非常困難的。在此處閱讀有關 JWT 簽名算法的更多信息。
  • 更常見:JSON 解析器在大多數編程語言中都很常見,因為它們直接映射到對象。相反,XML 沒有自然的文檔到對象映射,這使得使用 JWT 比使用 SAML 斷言更容易。
  • 更容易處理:JWT 用於互聯網規模。這意味著更容易在用戶的設備上進行處理,尤其是移動設備。

但是,也有一些缺點:

  • 如果需要阻止或停用客戶端,應用程序將必須等待令牌過期才能使鎖定完全生效。
  • 如果客戶端需要更改密碼,並且事先已經執行了身份驗證,則使用之前的密碼生成的令牌在到期之前仍然有效。
  • 標準實現沒有指定“刷新”令牌。因此,在到期時,客戶端將不得不重新進行身份驗證。
  • 不破壞 JWT 令牌的“無狀態”方面是不可能銷毀令牌的:即使令牌從瀏覽器中刪除,它在到期之前仍然有效,因此不可能真正註銷。

為了應對這些挑戰,一些 JWT 庫在標準規範之上添加了一層,允許令牌刷新機制和一些功能,例如強制用戶重新進行身份驗證。以下是對 JWT 開發人員的一些建議。

什麼是 JWT 結構?

緊湊形式的 JSON Web 令牌由以點分隔的三部分組成,它們是:

  • 標題
  • 有效載荷
  • 簽名

標頭包含兩部分:令牌類型和簽名算法。簽名算法可以是 HMAC SHA256 或 RSA。然後將此 JSON 編碼為 Base64Url 以形成 JWT 的第一部分。下面是一個標頭示例:

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

有效載荷主要包含聲明。聲明是關於一個項目的陳述,在我們的例子中,是用戶和附加數據。服務器通常使用此信息來驗證用戶是否有權執行他們請求的操作。例如:

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

最後,簽名用於驗證消息沒有被更改,還用於驗證 JWT 的發送者是否就是它所說的那個人。簽名是通過獲取編碼的標頭、編碼的有效負載、秘密以及標頭中指定的算法並對其進行編碼來創建的。例如,如果你想使用 HMAC SHA256 算法,簽名會這樣創建:

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

完成所有這些之後,我們得到了三個 Base64Url 字符串,它們代表 JWT 令牌的三個不同部分,這些部分用點分隔,可以在 HTML 和 HTTP 環境中輕鬆傳遞。這是來自https://token.dev/paseto/的示例,顯示了標頭、有效負載、簽名和我們的三個用點分隔的 Base64Url 字符串。

2

將 JWT 身份驗證集成到後端

Node.js 是一個開源、跨平台的後端 JavaScript 運行時環境,可在 Web 瀏覽器之外執行 JavaScript 代碼。它旨在構建可擴展的網絡應用程序。對我來說,Node.js 是後端 Web 開發的 React。使用 Node.js,我們將創建我們的登錄、註冊和身份驗證路由,這些路由將從前端接收用戶信息,在必要時對密碼進行哈希處理,在用戶登錄並請求時創建、驗證和驗證用戶訪問我們的受保護路線。

除了這個項目的 Node.js,我們還使用 PostgreSQL 創建我們的數據庫;你可以在這裡學習如何做到這一點,Knex.js用於查詢構建,bcrypt.js用於散列我們的密碼,這樣如果我們的數據庫被洩露,黑客就無法獲得用戶密碼。

創建我們的註冊路線

首先,我們需要安裝此項目所需的 JWT 庫和其他依賴項。為此,我們將運行以下命令:

1npm i jsonwebtoken bcrypt knex postgres --save

然後我們將我們的秘密存儲在我們的 .env 文件中;

1REACT_APP_TOKEN= "jwtsecrettutorial"

我們將創建我們的註冊端點,它將從前端請求接收用戶信息,對密碼進行哈希處理,將信息發送到我們的數據庫,創建我們的 JWT 令牌並使用我們的 JWT 令牌響應前端;

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

上圖中使用 Postman 將客戶端的信息發送到服務器。保存客戶端信息後,服務器使用 JWT 令牌響應後續請求。

創建我們的登錄/登錄路由

對於登錄路由,我們將創建端點以接收來自前端請求的用戶信息,驗證用戶是否存在於我們的數據庫中,如果用戶存在,則創建一個 JWT 令牌並將其發送到客戶端; 此令牌將用於後續 API 請求。

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

在上圖中,客戶端的信息是使用 Postman 發送到服務器的。在交叉檢查並確認客戶端信息後,服務器以 JWT 令牌響應後續請求。

創建我們的身份驗證路由

對於身份驗證,我們將創建一個中間件,只要通過我們的受保護路由發出請求,該中間件就會執行身份驗證。此路由將要求請求標頭中的用戶令牌作為“x-auth-token”進行授權。令牌將從標頭中獲取並由我們的中間件進行驗證。您可以通過此處的請求標頭了解有關 HTTP 授權的更多信息。要創建中間件,請使用以下代碼;

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");
    }
  },
};

我們現在可以向我們的服務器添加一個受保護的路由;在授予或拒絕訪問之前,對該路由的請求將首先通過我們的中間件。

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

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

如果在沒有使用標頭中的“x-access-token”提供令牌的情況下發出請求,則會返回一條錯誤消息,提示“找不到令牌”。

5

在上圖中,請求通過 Postman 發送到服務器,但標頭中沒有令牌,服務器響應錯誤消息,提示找不到令牌。如果標頭中提供了令牌並且該令牌正確,則它允許客戶端訪問受保護的路由,但如果令牌錯誤,它會以錯誤消息響應“無效令牌”。

6

在上圖中,通過 Postman 向服務器發送了一個請求,請求的標頭中包含不正確的令牌,服務器以錯誤消息進行響應,指出令牌無效。

將 JWT 身份驗證集成到前端

為此,您需要在我們使用 React.js 創建的前端安裝 Axios:

1npm i axios

在 React.js 的註冊/註冊頁面中,我們希望客戶端在其信息存儲到數據庫後存儲從服務器端接收到的 JWT。這個令牌將用於後續的 API 請求,所以我們將這個函數添加到我們的代碼中;

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");
      }
    });
};

完成此操作後,令牌將存儲在客戶端的本地存儲中。我們將對登錄頁面執行相同的操作,以便在現有用戶登錄時為後續 API 調用創建令牌。

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");
      }
    });
};

對於我們的身份驗證路由,我們必須從存儲中檢索已經存儲的令牌,然後將其發送到服務器端進行身份驗證和進一步操作。

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() });

完成所有這些後,我們已經成功設置了一個可以與我們的 node.js(後端)一起工作的有效身份驗證系統,創建我們的令牌,並將其發送到我們的 react.js(前端),然後存儲我們的令牌並將其用於對我們受保護路由的後續請求。

結論

到目前為止,我們已經了解了 JWT 身份驗證、JWT 結構、什麼是 JWT 身份驗證、它是如何工作的以及如何將它添加到我們的服務器端 node.js 路由和我們的 React.js 應用程序中。您可以在此處了解有關 JWT 以及使您更輕鬆、更安全地使用 JWT 身份驗證的庫和工具的更多信息。我希望本教程對您有所幫助,享受使用 JSON Web 令牌驗證請求的樂趣。

鏈接:https ://blog.openreplay.com/authentication-with-jwt-for-your-website

#jwt #authentication

What is GEEK

Buddha Community

如何使用 JWT 為您的網站進行身份驗證
Shayne  Bayer

Shayne Bayer

1591456382

JSON Web Token (JWT) — Create and Use in ASP.NET Core (API Calling)

What is JSON Web Token?

#jwt #jwt-auth #jwt-token #aspnetcore #asp.net core #asp.net (.net)

田辺  亮介

田辺 亮介

1658997973

如何使用 JWT 為您的網站進行身份驗證

自從 Web 應用程序開發出現以來,許多敏感信息都通過 Internet 發送,這使得身份驗證的概念成為每個 Web 開發人員都應該理解並在應用程序中應用以保護用戶委託給應用程序的信息。在本文中,我們將介紹一種稱為 JWT 身份驗證的 Web 應用程序身份驗證方法。與其他人相比,JWT 身份驗證因其對開發人員的諸多優勢而成為人們的最愛。

在深入編碼之前,我們將定義一些關鍵術語和概念以幫助我們了解 JWT 身份驗證的工作原理,之後我們會將這種形式的身份驗證集成到一個項目中,該項目有一個使用 Node.js 創建的服務器,以及一個使用 React.js 創建的前端是一個廣泛使用的前端開發框架(實際上是我個人最喜歡的)。

為了能夠繼續閱讀本文的其餘部分,您需要以下內容:

  • JavaScript的工作知識
  • 對 Node.js 以及如何在創建服務器時使用它有很好的理解。
  • 對數據庫創建的工作理解。
  • React.js 基礎知識
  • 郵遞員和如何使用郵遞員的知識。

什麼是 JWT,它是如何工作的?

JWT 代表 JSON Web Token,這是一種開放標準,用於在客戶端和服務器之間以 JSON 對象的形式共享安全信息。客戶端向服務器發出的請求中存在 JWT 表示該信息已經過驗證,並且它的可信度已經建立,因為它是使用用加密算法編寫的秘密進行數字簽名的,以確保聲明之後不會被更改發出令牌。雖然沒有中間人可以修改 JWT,但建議在 HTTPS 環境中使用它,因為 JWT 未加密。

JWT 身份驗證是一種無狀態身份驗證機制,通常用作客戶端無狀態會話。服務器不必完全依賴數據庫來保存會話信息。會話信息存儲在客戶端;因此,不需要數據庫查找來驗證請求用戶的身份。它是這樣工作的:

  • 用戶使用電子郵件/用戶名和密碼登錄網站或應用程序以證明其身份。
  • 服務器確認用戶的身份並發回一個唯一的訪問令牌,其中包含對其身份的引用。
  • 然後,客戶端在對服務器的每個請求中都包含這個唯一的訪問令牌,因此如果訪問令牌錯誤/更改,客戶端將被拒絕訪問。
  • 對於受保護的路由,在服務器中創建一個身份驗證中間件來斷言有效令牌的存在。服務器可以進一步使用身份來實現更細粒度的權限。

第一的

JWT 身份驗證的優缺點

有幾個優點:

  • 更緊湊:JSON 比 XML 更簡潔,因此在對其進行編碼時,JWT 小於 SAML 令牌。這使得 JWT 成為在 HTML 和 HTTP 環境中傳遞的絕佳選擇。
  • 更安全:JWT 可以使用公鑰/私鑰對作為 X.509 證書進行簽名。JWT 也可以使用 HMAC 算法通過共享密鑰進行對稱簽名。雖然 SAML 令牌可以使用 JWT 等公鑰/私鑰對,但與簽署 JSON 的簡單性相比,使用 XML 數字簽名簽署 XML 而不引入晦澀的安全漏洞是非常困難的。在此處閱讀有關 JWT 簽名算法的更多信息。
  • 更常見:JSON 解析器在大多數編程語言中都很常見,因為它們直接映射到對象。相反,XML 沒有自然的文檔到對象映射,這使得使用 JWT 比使用 SAML 斷言更容易。
  • 更容易處理:JWT 用於互聯網規模。這意味著更容易在用戶的設備上進行處理,尤其是移動設備。

但是,也有一些缺點:

  • 如果需要阻止或停用客戶端,應用程序將必須等待令牌過期才能使鎖定完全生效。
  • 如果客戶端需要更改密碼,並且事先已經執行了身份驗證,則使用之前的密碼生成的令牌在到期之前仍然有效。
  • 標準實現沒有指定“刷新”令牌。因此,在到期時,客戶端將不得不重新進行身份驗證。
  • 不破壞 JWT 令牌的“無狀態”方面是不可能銷毀令牌的:即使令牌從瀏覽器中刪除,它在到期之前仍然有效,因此不可能真正註銷。

為了應對這些挑戰,一些 JWT 庫在標準規範之上添加了一層,允許令牌刷新機制和一些功能,例如強制用戶重新進行身份驗證。以下是對 JWT 開發人員的一些建議。

什麼是 JWT 結構?

緊湊形式的 JSON Web 令牌由以點分隔的三部分組成,它們是:

  • 標題
  • 有效載荷
  • 簽名

標頭包含兩部分:令牌類型和簽名算法。簽名算法可以是 HMAC SHA256 或 RSA。然後將此 JSON 編碼為 Base64Url 以形成 JWT 的第一部分。下面是一個標頭示例:

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

有效載荷主要包含聲明。聲明是關於一個項目的陳述,在我們的例子中,是用戶和附加數據。服務器通常使用此信息來驗證用戶是否有權執行他們請求的操作。例如:

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

最後,簽名用於驗證消息沒有被更改,還用於驗證 JWT 的發送者是否就是它所說的那個人。簽名是通過獲取編碼的標頭、編碼的有效負載、秘密以及標頭中指定的算法並對其進行編碼來創建的。例如,如果你想使用 HMAC SHA256 算法,簽名會這樣創建:

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

完成所有這些之後,我們得到了三個 Base64Url 字符串,它們代表 JWT 令牌的三個不同部分,這些部分用點分隔,可以在 HTML 和 HTTP 環境中輕鬆傳遞。這是來自https://token.dev/paseto/的示例,顯示了標頭、有效負載、簽名和我們的三個用點分隔的 Base64Url 字符串。

2

將 JWT 身份驗證集成到後端

Node.js 是一個開源、跨平台的後端 JavaScript 運行時環境,可在 Web 瀏覽器之外執行 JavaScript 代碼。它旨在構建可擴展的網絡應用程序。對我來說,Node.js 是後端 Web 開發的 React。使用 Node.js,我們將創建我們的登錄、註冊和身份驗證路由,這些路由將從前端接收用戶信息,在必要時對密碼進行哈希處理,在用戶登錄並請求時創建、驗證和驗證用戶訪問我們的受保護路線。

除了這個項目的 Node.js,我們還使用 PostgreSQL 創建我們的數據庫;你可以在這裡學習如何做到這一點,Knex.js用於查詢構建,bcrypt.js用於散列我們的密碼,這樣如果我們的數據庫被洩露,黑客就無法獲得用戶密碼。

創建我們的註冊路線

首先,我們需要安裝此項目所需的 JWT 庫和其他依賴項。為此,我們將運行以下命令:

1npm i jsonwebtoken bcrypt knex postgres --save

然後我們將我們的秘密存儲在我們的 .env 文件中;

1REACT_APP_TOKEN= "jwtsecrettutorial"

我們將創建我們的註冊端點,它將從前端請求接收用戶信息,對密碼進行哈希處理,將信息發送到我們的數據庫,創建我們的 JWT 令牌並使用我們的 JWT 令牌響應前端;

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

上圖中使用 Postman 將客戶端的信息發送到服務器。保存客戶端信息後,服務器使用 JWT 令牌響應後續請求。

創建我們的登錄/登錄路由

對於登錄路由,我們將創建端點以接收來自前端請求的用戶信息,驗證用戶是否存在於我們的數據庫中,如果用戶存在,則創建一個 JWT 令牌並將其發送到客戶端; 此令牌將用於後續 API 請求。

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

在上圖中,客戶端的信息是使用 Postman 發送到服務器的。在交叉檢查並確認客戶端信息後,服務器以 JWT 令牌響應後續請求。

創建我們的身份驗證路由

對於身份驗證,我們將創建一個中間件,只要通過我們的受保護路由發出請求,該中間件就會執行身份驗證。此路由將要求請求標頭中的用戶令牌作為“x-auth-token”進行授權。令牌將從標頭中獲取並由我們的中間件進行驗證。您可以通過此處的請求標頭了解有關 HTTP 授權的更多信息。要創建中間件,請使用以下代碼;

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");
    }
  },
};

我們現在可以向我們的服務器添加一個受保護的路由;在授予或拒絕訪問之前,對該路由的請求將首先通過我們的中間件。

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

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

如果在沒有使用標頭中的“x-access-token”提供令牌的情況下發出請求,則會返回一條錯誤消息,提示“找不到令牌”。

5

在上圖中,請求通過 Postman 發送到服務器,但標頭中沒有令牌,服務器響應錯誤消息,提示找不到令牌。如果標頭中提供了令牌並且該令牌正確,則它允許客戶端訪問受保護的路由,但如果令牌錯誤,它會以錯誤消息響應“無效令牌”。

6

在上圖中,通過 Postman 向服務器發送了一個請求,請求的標頭中包含不正確的令牌,服務器以錯誤消息進行響應,指出令牌無效。

將 JWT 身份驗證集成到前端

為此,您需要在我們使用 React.js 創建的前端安裝 Axios:

1npm i axios

在 React.js 的註冊/註冊頁面中,我們希望客戶端在其信息存儲到數據庫後存儲從服務器端接收到的 JWT。這個令牌將用於後續的 API 請求,所以我們將這個函數添加到我們的代碼中;

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");
      }
    });
};

完成此操作後,令牌將存儲在客戶端的本地存儲中。我們將對登錄頁面執行相同的操作,以便在現有用戶登錄時為後續 API 調用創建令牌。

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");
      }
    });
};

對於我們的身份驗證路由,我們必須從存儲中檢索已經存儲的令牌,然後將其發送到服務器端進行身份驗證和進一步操作。

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() });

完成所有這些後,我們已經成功設置了一個可以與我們的 node.js(後端)一起工作的有效身份驗證系統,創建我們的令牌,並將其發送到我們的 react.js(前端),然後存儲我們的令牌並將其用於對我們受保護路由的後續請求。

結論

到目前為止,我們已經了解了 JWT 身份驗證、JWT 結構、什麼是 JWT 身份驗證、它是如何工作的以及如何將它添加到我們的服務器端 node.js 路由和我們的 React.js 應用程序中。您可以在此處了解有關 JWT 以及使您更輕鬆、更安全地使用 JWT 身份驗證的庫和工具的更多信息。我希望本教程對您有所幫助,享受使用 JSON Web 令牌驗證請求的樂趣。

鏈接:https ://blog.openreplay.com/authentication-with-jwt-for-your-website

#jwt #authentication

Alverta  Crist

Alverta Crist

1596731229

How JSON Web Tokens Work

JSON Web tokens or JWTs are a very popular way to do user authorization in web apps today. JWT has also become very popular in the context of micro services and some of the other developments …

#json-web-token #jwt-auth #javascript #jwt-token #jwt

Rizwan Sharief

1597162106

Understanding the Need for JSON Web Token (JWT)

In this video We will be looking at what is JSON Web Token. In order to understand Authorization we will be taking example of user interaction with Gmail. Consider a scenario where a user wants to access his Gmail inbox page. This will involve user interaction with the Gmail server. For this the user will be sending HTTP requests to Gmail server and in response will expect the response from Gmail Server.

We will be looking at what is JSON Web Token. To understand authorization, we will be taking an example of user interaction with Gmail. Consider a scenario where a user wants to access their inbox page.

#jwt #spring secruity #jwt authentication #spring-boot

le pro

1606738079

Angular 9 JWT Login Authentication Example - loizenai.com

Angular 9 JWT Login Authentication Example

Tutorial: Angular 9 Login Authentication Example – Angular 9 + SpringBoot + MySQL/PostgreSQL JWT token Authentication
JWT Role Based Authorization with Spring Boot and Angular 9 (Spring Boot Login Example)

JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. So in tutorial ‘JWT Role Based Authorization with Spring Boot and Angular 9 (Spring Boot Login Example)’, I guide you very clearly how to implement full stack example to demonstrade an jwt token based authentication flow from frontend Angular 9 to backend: SpringBoot and MySQL.

– I give you an Epic of the application, a fullstack excutive flow from frontend – Angular 9 to backend – SpringBoot with overall architecture diagram.
– I give you an architecture diagram of SpringBoot security backend.
– I give you a working flow diagram of Angular 9 JWT Application.
– I guide you step by step how to develop a Backend SpringBoot secured RestAPIs with JWT token.
– I guide you step by step how to develop an Angular 9 JWT Token Authentication application.
– Finally, I do an integrative testing from Angular 9 JWT Authentication application to SpringBoot Backend Security RestAPIs.

Angular Spring Boot JWT Authentication example

We will build an application, from frontend (Angular) to backend (Spring Boot), which allows users to register, login account. This application is secured with JWT (JSON Web Token) authentication and Spring Security. Then, depending on the role of current User (user, pm or admin), this system accepts what he can access:

Angular-9-Login-Form

Angular 9 Register Form

Angular 9 Home Page of a User with USER_ROLE

Angular 9 Content Page of a User with USER_ROLE

The diagram below show how our system handles User Registration and User Login processes:

Angular 9 Spring Boot Security Jwt Token Authentication Work Process Diagram

SPRING BOOT BACK-END WITH SPRING SECURITY

This is diagram for SpringBoot Token based authentication Security/JWT classes that are separated into 3 layers:
– HTTP
– Spring Security
– REST API

Spring Boot Security Jwt Token Authentication Architecture Diagram Back End Server

– SecurityContextHolder provides access to the SecurityContext.
– SecurityContext holds the Authentication and possibly request-specific security information.
– Authentication represents the principal which includes GrantedAuthority that reflects the application-wide permissions granted to a principal.
– UserDetails contains necessary information to build an Authentication object from DAOs or other source of security data.
– UserDetailsService helps to create a UserDetails from a String-based username and is usually used by AuthenticationProvider.
– JwtAuthTokenFilter (extends OncePerRequestFilter) pre-processes HTTP request, from Token, create Authentication and populate it to SecurityContext.
– JwtProvider validates, parses token String or generates token String from UserDetails.
– UsernamePasswordAuthenticationToken gets username/password from login Request and combines into an instance of Authentication interface.
– AuthenticationManager uses DaoAuthenticationProvider (with help of UserDetailsService & PasswordEncoder) to validate instance of UsernamePasswordAuthenticationToken, then returns a fully populated Authentication instance on successful authentication.
– SecurityContext is established by calling SecurityContextHolder.getContext().setAuthentication(…​) with returned authentication object above.
– AuthenticationEntryPoint handles AuthenticationException.
– Access to Restful API is protected by HTTPSecurity and authorized with Method Security Expressions.

ANGULAR FRONT-END WITH INTERCEPTOR

In the tutorial, “Angular 9 + Spring Boot JWT Token Based Authentication Example”, we need the Angular HTTP Interceptor to add JWT Token Based for Security authentication:

Angular 9 Jwt Token Workflow Diagram

– app.component is the parent component that contains routerLink and router-outlet for routing. It also has an authority variable as the condition for displaying items on navigation bar.
– user.component, pm.component, admin.component correspond to Angular Components for User Board, PM Board, Admin Board. Each Board uses user.service to access authority data.
– register.component contains User Registration form, submission of the form will call auth.service.
– login.component contains User Login form, submission of the form will call auth.service and token-storage.service.

– user.service gets access to authority data from Server using Angular HttpClient ($http service).
– auth.service handles authentication and signup actions with Server using Angular HttpClient ($http service).
– every HTTP request by $http service will be inspected and transformed before being sent to the Server by auth-interceptor (implements HttpInterceptor).
– auth-interceptor check and get Token from token-storage.service to add the Token to Authorization Header of the HTTP Requests.

– token-storage.service manages Token inside Browser’s sessionStorage.

Video Guide – Angular SpringBoot JWT Authentication

https://youtu.be/7ZfInOvFsz0

Sourcecode

Tutorial Link

Angular 9 JWT Login Authentication Example

Related post

  1. Angular CRUD Application with SpringBoot and MySQL/PostgreSQL RestAPIs
  2. Build SpringBoot CRUD Application – FullStack: Frontend (Bootstrap and Ajax) to Backend (SpringBoot and MySQL/PostgreSQL database)
  3. Angular Nodejs Fullstack CRUD Application with MySQL/PostgreSQL

#angular #jwt #authentication #token #jwt-authentication #example