如何在 Node.js 和 Express 中使用 Auth0

作者：Matthew Tyson 2021-08-20 16:05:28

了解如何將Auth0登錄功能添加到Node.js/Express應用程序，并使用經過身份驗證的用戶信息顯示/隱藏UI信息和安全API。

【51CTO.com快譯】基于云計算的身份驗證和授權平臺（有時稱為 IDaaS 或身份即服務）是云工具的一個不斷擴展的領域，原因很容易理解。應用程序安全性困難且容易出錯，幾乎每個項目都需要云計算。將大部分工作轉移到專門且經過驗證的服務上的能力很有吸引力。

Auth0是一個身份驗證和授權服務（以及開源軟件）新興提供商。在本文中，您將看到如何將 Auth0 登錄功能合并到一個具有 Node.js/Express 后端的應用程序中，服務于一個直接的 JS 前端，然后使用經過身份驗證的用戶信息（通過 JWT）來顯示/隱藏UI 信息并保護 RESTful 端點。

創建一個簡單的 Node.js/Express 應用

首先，設置一個簡單的 Express 應用程序。首先從命令行輸入npm init開始。也可以任意命名項目名稱。請注意，此示例應用程序旨在以簡單和精簡的方式突出顯示安全元素，因此忽略了許多生產所需的功能，如錯誤處理和配置文件。

接下來，通過運行npm install Express從運行init的同一目錄安裝Express。

在您選擇的代碼編輯器中，在根目錄中添加一個 server.js 文件，并將以下內容粘貼其中。

基本 server.js 文件

const express = require('express'); 
  const app = express(); 
 
app.get('/api/open', function(req, res) { 
  console.log("/api/open"); 
  res.json({ 
    message: "Open Endpoint" 
  }); 
}); 
 
app.get('/api/members-only', function(req, res){ 
  console.log("/api/members-only") 
  res.json({ 
    message: 'Members Only Endpoint' 
  }); 
}) 
 
app.get('/api/protected', function(req, res) { 
  console.log("/api/protected") 
  res.json({ 
    message: 'Protected Endpoint' 
  }); 
}); 
 
app.listen(3000); 
console.log('Listening on http://localhost:3000');

這段代碼概述了主要是：三個 API 端點，一個開放，一個需要主動登錄，一個需要登錄和特定權限。

現在將開發腳本添加到 package.json 文件的腳本部分：

"dev": "nodemon server.js"

下一步需要安裝 nodemon 工具：

npm install -g nodemon

然后，使用npm run dev運行簡單服務器，并在 localhost:3000/api/open 查看 API 響應。

提供靜態文件

接著使用 express.static 從 /public/index.html 為客戶端提供服務。該文件包含所有 HTML 和 JS，以便于理解所有內容，因此，Auth0文檔稱之為單頁應用程序 (SPA)。我們的客戶端將調用上面定義的后端 API。

在server.js中的app.listen行之前，添加以下行：app.use(express.static(join(__dirname, "public")));

意思是指示Node.js在/public中提供文件。然后創建文件 /public/index.html 并將以下的內容放入其中。

步驟三：開始 index.html

<html> 
  <head> 
  <style> 
      .hidden { 
        display: none; 
      } 
      label { 
        margin-bottom: 10px; 
        display: block; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>Infoworld: Intro to Auth0</h1> 
    <button id="btn-login" disabled="true" onclick="login()">Log in</button> 
    <button id="btn-logout" disabled="true" onclick="logout()">Log out</button> 
 
    <h2>Fetch Open API</h2> 
    <h3 id="openMessage"></h3> 
    <button onclick="fetchOpenApi()">Open API</button> 
 
    <h2>Fetch Members Only API</h2> 
    <h3 id="moMessage"></h3> 
    <button onclick="fetchMembersOnlyApi()">Members Only API</button> 
 
    <h2>Fetch Protected API</h2> 
    <h3 id="protectedMessage"></h3> 
    <button onclick="fetchProtectedApi()">Protected API</button> 
    <hr> 
    <div class="hidden" id="gated-content"> 
      <p> 
        This content is hidden until user is logged in. 
      </p> 
      <label> 
        Access token: 
        <pre id="ipt-access-token"></pre> 
      </label> 
      <label> 
        User profile: 
        <pre id="ipt-user-profile"></pre> 
      </label> 
    </div> 
  </body> 
</html> 
 
<script> 
  async function fetchOpenApi(){ 
    let result = await fetch("/api/open"); 
    let json = await result.json(); 
    document.getElementById("openMessage").innerHTML = JSON.stringify(json.message); 
  } 
  async function fetchMembersOnlyApi(){ 
    const token = await auth0.getTokenSilently(); 
    let result = await fetch("/api/members-only"); 
    let json = await result.json(); 
    document.getElementById("moMessage").innerHTML = JSON.stringify(json.message); 
  } 
  async function fetchProtectedApi(){ 
    const token = await auth0.getTokenSilently(); 
    let result = await fetch("/api/protected"); 
    let json = await result.json(); 
    document.getElementById("protectedMessage").innerHTML = JSON.stringify(json.message); 
  } 
</script>

完成上述操作，就可以轉到 localhost:3000/，將看到一個基本的 HTML 頁面，其中包含點擊三個端點的三個按鈕。在此階段，如果單擊按鈕，這三個按鈕都將返回結果，因為安全端點尚不安全。此外，登錄和注銷按鈕尚未執行任何操作，頁面底部的內容仍處于隱藏狀態。

保護端點

現在，還需要一個 Auth0 帳戶，該帳戶可免費滿足基本的使用。當注冊賬戶時，Auth0 將為用戶創建一個默認的“系統 API”。這是一個的特殊 API，每個用戶只有一個，并讓用戶訪問 Auth0 平臺。公鑰（在本例中為 RS256 的 jwks）通過此 API 公開。

接下來，將在 Auth0 系統中創建一個 API。單擊“CreateAPI”按鈕，這將打開如圖 1 所示的屏幕。

圖 1. 創建一個 Auth0 API

圖 1. Auth0 API創建界面

對于name領域，可以使用任何名字。對于identifier，應該使用一個 URL，但不必公開 URL — 它只是一個在代碼中引用的標識符。當然，在實際項目中，則需使用實際域名。對于表單上的最后一個字段，可以將算法保留為 RS256。

使用 Auth0 API

RS256公鑰托管在 URL 中，格式為 https://[your_domain].auth0.com/.well-known/jwks.json。可以通過單擊它旁邊的“設置”找到新 API 的詳細信息。注意，您現在提供的標識符的格式為 https://[your_domain].us.auth0.com/api/v2/，很快就會看到這兩個 URL 正在運行。

下一步要做的就是定義權限。在這種情況下，需要訪問之前創建的受保護端點所需的權限。在設置頁面中，選擇“權限”選項卡。創建一個read:protected權限并點擊“添加”按鈕。

使用 Express auth 中間件

使用 Express 中間件來強制執行權限策略。繼續安裝步驟三中的依賴項，其中分別包括 Express JWT（JSON Web 令牌）、JSON Web 密鑰和 Express JWT 授權擴展。請記住，JWT 是一個帶有身份驗證信息的加密令牌。它將用于前端、后端和 Auth0 平臺之間的通信。

清單 3. 添加身份驗證依賴項

npm install --save express-jwt jwks-rsa express-jwt-authz

將checkJwt與必要的導入一起添加到server.js，如清單 4 所示。請注意，您將使用詳細信息填充一些元素（在方括號中）。

清單 4. 保護端點

//... 
const jwt = require('express-jwt'); 
const jwtAuthz = require('express-jwt-authz'); 
const jwksRsa = require('jwks-rsa'); 
//... 
const checkJwt = jwt({ 
  secret: jwksRsa.expressJwtSecret({ 
    cache: true, 
    rateLimit: true, 
    jwksRequestsPerMinute: 5, 
    jwksUri: `https://[YOUR SYSTEM API DOMAIN].us.auth0.com/.well-known/jwks.json` 
  }), 
 
  audience: '[THE IDENTIFIER FROM YOUR API]', 
  issuer: [`https://[YOUR SYSTEM API DOMAIN].us.auth0.com/`], 
  algorithms: ['RS256'] 
}); 
var options = { customScopeKey: 'permissions'};  // This is necessary to support the direct-user permissions 
const checkScopes = jwtAuthz([ 'read:protected' ]); 
//... 
 
app.get('/api/members-only', checkJwt, function(req, res){ 
  console.log("/api/members-only") 
  res.json({ 
    message: 'Members Only Endpoint' 
  }); 
}) 
 
app.get('/api/protected', checkJwt, checkScopes, function(req, res) { 
  console.log("/api/protected") 
  res.json({ 
    message: 'Protected Endpoint' 
  }); 
});

概括地說，上面的內容是創建了一個 Express 中間件checkJwt，它將檢查有效的 JSON Web 令牌。被配置為使用之前創建的 Auth0 API 中的信息。

請注意，issuer和jwksUri指向您的系統 API 帳戶，該帳戶是在您注冊時為您創建的。同樣，每個用戶有一個系統 API 帳戶，而不是每個 API。此帳戶提供密鑰（在本例中為 JSON Web 密鑰集）以對特定 API 的身份驗證信息進行標記。

訪問群體字段將引用您創建的API的標識符，而不是系統API帳戶。

最后，請注意，還有checkScopes應用于受保護的端點。這將檢查read:protected（讀取：受保護）權限。

檢查你的進度

此時，如果返回瀏覽器并單擊“Members Only API”（或“Protected API”）按鈕，服務器將響應錯誤：

UnauthorizedError: No authorization token was found.

創建 Auth0 客戶端應用程序

像創建一個 Auth0 API 來為后端應用程序建模一樣，您現在將創建并配置安全端點的客戶端或使用者。同樣，Auth0 將它們稱為 SPA（它們過去被稱為“客戶端”，現在仍然在一些 Auth0 文檔中）。轉到 Auth0 儀表板，然后在左側菜單中選擇“應用程序 -> 應用程序”，就在配置服務器時使用的 API 鏈接上方。

現在選擇“創建應用程序”按鈕。給它起個名字（也許稱它為“客戶端”以區別于后端應用程序）并確保選擇“SPA”作為類型。點擊“創建”。

然后通過從列表中選擇來打開客戶端應用程序。在這里，可以找到設置測試應用程序客戶端所需的信息：域和客戶端 ID。記下這些信息；后面會使用到。

在應用程序設置中配置回調、注銷和 Web 源 URL

但是，如圖 2 所示，將開發應用程序的 localhost 地址 (http://localhost:3000) 添加到允許的回調中。這讓 Auth0 知道它可以將您的開發 URL 用于這些目標。

圖 2. 將 localhost 添加到客戶端配置

圖 2. 將 localhost 添加到客戶端配置

建立客戶端身份驗證

接著，返回應用程序代碼，并在index.html中將Auth0 SDK添加到客戶端。在這種情況下，我們將使用 CDN。將以下內容添加到文件的標題中：

< script  src ="https://cdn.auth0.com/js/auth0-spa-js/1.13/auth0-spa-js.production.js"></ script >

現在可以連接 auth.。首先連接登錄和注銷按鈕。它們的處理程序見清單 5。

清單 5. 登錄和注銷處理程序

const configureClient = async () => { 
        auth0 = await createAuth0Client({ 
          domain: "[YOUR SYSTEM API URL].us.auth0.com", 
          client_id: "[YOUR CLIENT ID]", 
          audience: "[YOUR API IDENTIFIER]" // The backend api id 
        }); 
      } 
const login = async () => { 
        await auth0.loginWithRedirect({ 
          redirect_uri: "http://localhost:3000" 
        }); 
      }; 
      const logout = () => { 
        auth0.logout({ 
          returnTo: window.location.origin 
        }); 
      };

對于清單 5，首先使用前面提到的設置信息配置 Auth0 客戶端。再次注意，域字段指的是每個用戶一個系統 API。

兩個處理程序都依賴于之前導入的 Auth0 庫。如果應用此選項并刷新應用程序，則可以單擊“登錄”按鈕并重定向到 Auth0 登錄頁面。這個頁面是“通用登錄”入口（Auth0 也支持集成一個“鎖箱”組件）。注意，它自動支持用戶名/密碼和社交登錄。

基于身份驗證顯示和隱藏內容

清單 6 對 index.html 進行了一些更多的腳本更改，以實現顯示/隱藏功能。

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】

責任編輯：梁菲來源： InfoWord

JavaScript node.js 應用安全軟件開發

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

如何在 Node.js 和 Express 中使用 Auth0