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

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

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

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

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

創(chuàng)建一個簡單的 Node.js/Express 應(yīng)用

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

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

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

基本 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 端點，一個開放，一個需要主動登錄，一個需要登錄和特定權(quán)限。

現(xiàn)在將開發(fā)腳本添加到 package.json 文件的腳本部分：

"dev": "nodemon server.js"

下一步需要安裝 nodemon 工具：

npm install -g nodemon

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

提供靜態(tài)文件

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

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

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

步驟三：開始 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>

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

保護端點

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

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

圖 1. 創(chuàng)建一個 Auth0 API

圖 1. Auth0 API創(chuàng)建界面

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

使用 Auth0 API

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

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

使用 Express auth 中間件

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

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

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

將checkJwt與必要的導(dǎo)入一起添加到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' 
  }); 
});

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

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

訪問群體字段將引用您創(chuàng)建的API的標識符，而不是系統(tǒng)API帳戶。

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

檢查你的進度

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

UnauthorizedError: No authorization token was found.

創(chuàng)建 Auth0 客戶端應(yīng)用程序

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

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

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

在應(yīng)用程序設(shè)置中配置回調(diào)、注銷和 Web 源 URL

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

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

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

建立客戶端身份驗證

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

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

現(xiàn)在可以連接 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，首先使用前面提到的設(shè)置信息配置 Auth0 客戶端。再次注意，域字段指的是每個用戶一個系統(tǒng) API。

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

基于身份驗證顯示和隱藏內(nèi)容

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

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

責任編輯：梁菲來源： InfoWord

JavaScript node.js 應(yīng)用安全軟件開發(fā)