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');
 
 
 
 

 
 
 
 

  
  
  
  
"dev": "nodemon server.js"
 
 
 
 

 
 
 
 

  
  
  
  
npm install -g nodemon
 
 
 
 

 
 
 
 

  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    
Infoworld: Intro to Auth0
  
  
  
  
    Log in
  
  
  
  
    Log out
  
  
  
  

  
  
  
  
    
Fetch Open API
  
  
  
  
    
  
  
  
  
    Open API
  
  
  
  

  
  
  
  
    
Fetch Members Only API
  
  
  
  
    
  
  
  
  
    Members Only API
  
  
  
  

  
  
  
  
    
Fetch Protected API
  
  
  
  
    
  
  
  
  
    Protected API
  
  
  
  
    

  
  
  
  
    
  
  
  
  
      

  
  
  
  
        This content is hidden until user is logged in.
  
  
  
  
      

  
  
  
  
      
  
  
  
  
        Access token:
  
  
  
  
        

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

保護(hù)端點(diǎn)

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

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

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

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

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

使用 Auth0 API

RS256公鑰托管在 URL 中，格式為 https://[your_domain].auth0.com/.well-known/jwks.json?？梢酝ㄟ^(guò)單擊它旁邊的“設(shè)置”找到新 API 的詳細(xì)信息。注意，您現(xiàn)在提供的標(biāo)識(shí)符的格式為 https://[your_domain].us.auth0.com/api/v2/，很快就會(huì)看到這兩個(gè) URL 正在運(yùn)行。

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

使用 Express auth 中間件

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

清單 3. 添加身份驗(yàn)證依賴項(xiàng)

 
 
 
 

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

將checkJwt與必要的導(dǎo)入一起添加到server.js，如清單 4 所示。請(qǐng)注意，您將使用詳細(xì)信息填充一些元素（在方括號(hào)中）。

清單 4. 保護(hù)端點(diǎn)

 
 
 
 

  
  
  
  
//...
  
  
  
  
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'
  
  
  
  
  });
  
  
  
  
});
 
 
 
 

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

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

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

最后，請(qǐng)注意，還有checkScopes應(yīng)用于受保護(hù)的端點(diǎn)。這將檢查read:protected（讀?。菏鼙Ｗo(hù)）權(quán)限。

檢查你的進(jìn)度

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

UnauthorizedError: No authorization token was found. 

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

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

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

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

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

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

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

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

建立客戶端身份驗(yàn)證

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

 
 
 
 

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

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

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

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

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

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