如何在 Node.js 和 Express 中使用 Auth0
譯文【51CTO.com快譯】基于云計算的身份驗證和授權平臺（有時稱為 IDaaS 或身份即服務）是云工具的一個不斷擴展的領域，原因很容易理解。應用程序安全性困難且容易出錯，幾乎每個項目都需要云計算。將大部分工作轉(zhuǎn)移到專門且經(jīng)過驗證的服務上的能力很有吸引力。
Auth0是一個身份驗證和授權服務（以及開源軟件）新興提供商。在本文中，您將看到如何將 Auth0 登錄功能合并到一個具有 Node.js/Express 后端的應用程序中，服務于一個直接的 JS 前端，然后使用經(jīng)過身份驗證的用戶信息（通過 JWT）來顯示/隱藏UI 信息并保護 RESTful 端點。
創(chuàng)建一個簡單的 Node.js/Express 應用
首先，設置一個簡單的 Express 應用程序。首先從命令行輸入npm init開始。也可以任意命名項目名稱。請注意，此示例應用程序旨在以簡單和精簡的方式突出顯示安全元素，因此忽略了許多生產(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 端點，一個開放，一個需要主動登錄，一個需要登錄和特定權限。
現(xiàn)在將開發(fā)腳本添加到 package.json 文件的腳本部分：
- "dev": "nodemon server.js"
下一步需要安裝 nodemon 工具：
- npm install -g nodemon
然后，使用npm run dev運行簡單服務器，并在 localhost:3000/api/open 查看 API 響應。
提供靜態(tài)文件
接著使用 express.static 從 /public/index.html 為客戶端提供服務。該文件包含所有 HTML 和 JS，以便于理解所有內(nèi)容，因此，Auth0文檔稱之為單頁應用程序 (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領域，可以使用任何名字。對于identifier，應該使用一個 URL，但不必公開 URL — 它只是一個在代碼中引用的標識符。當然，在實際項目中，則需使用實際域名。對于表單上的最后一個字段，可以將算法保留為 RS256。
使用 Auth0 API
RS256公鑰托管在 URL 中，格式為 https://[your_domain].auth0.com/.well-known/jwks.json?？梢酝ㄟ^單擊它旁邊的“設置”找到新 API 的詳細信息。注意，您現(xiàn)在提供的標識符的格式為 https://[your_domain].us.auth0.com/api/v2/，很快就會看到這兩個 URL 正在運行。
下一步要做的就是定義權限。在這種情況下，需要訪問之前創(chuàng)建的受保護端點所需的權限。在設置頁面中，選擇“權限”選項卡。創(chuàng)建一個read:protected權限并點擊“添加”按鈕。
使用 Express auth 中間件
使用 Express 中間件來強制執(zhí)行權限策略。繼續(xù)安裝步驟三中的依賴項，其中分別包括 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'
- });
- });
概括地說，上面的內(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應用于受保護的端點。這將檢查read:protected（讀?。菏鼙Ｗo）權限。
檢查你的進度
此時，如果返回瀏覽器并單擊“Members Only API”（或“Protected API”）按鈕，服務器將響應錯誤：
UnauthorizedError: No authorization token was found.
創(chuàng)建 Auth0 客戶端應用程序
像創(chuàng)建一個 Auth0 API 來為后端應用程序建模一樣，您現(xiàn)在將創(chuàng)建并配置安全端點的客戶端或使用者。同樣，Auth0 將它們稱為 SPA（它們過去被稱為“客戶端”，現(xiàn)在仍然在一些 Auth0 文檔中）。轉(zhuǎn)到 Auth0 儀表板，然后在左側(cè)菜單中選擇“應用程序 -> 應用程序”，就在配置服務器時使用的 API 鏈接上方。
現(xiàn)在選擇“創(chuàng)建應用程序”按鈕。給它起個名字（也許稱它為“客戶端”以區(qū)別于后端應用程序）并確保選擇“SPA”作為類型。點擊“創(chuàng)建”。
然后通過從列表中選擇來打開客戶端應用程序。在這里，可以找到設置測試應用程序客戶端所需的信息：域和客戶端 ID。記下這些信息；后面會使用到。
在應用程序設置中配置回調(diào)、注銷和 Web 源 URL
但是，如圖 2 所示，將開發(fā)應用程序的 localhost 地址 (http://localhost:3000) 添加到允許的回調(diào)中。這讓 Auth0 知道它可以將您的開發(fā) URL 用于這些目標。
圖 2. 將 localhost 添加到客戶端配置
圖 2. 將 localhost 添加到客戶端配置
建立客戶端身份驗證
接著，返回應用程序代碼，并在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，首先使用前面提到的設置信息配置 Auth0 客戶端。再次注意，域字段指的是每個用戶一個系統(tǒng) API。
兩個處理程序都依賴于之前導入的 Auth0 庫。如果應用此選項并刷新應用程序，則可以單擊“登錄”按鈕并重定向到 Auth0 登錄頁面。這個頁面是“通用登錄”入口（Auth0 也支持集成一個“鎖箱”組件）。注意，它自動支持用戶名/密碼和社交登錄。
基于身份驗證顯示和隱藏內(nèi)容
清單 6 對 index.html 進行了一些更多的腳本更改，以實現(xiàn)顯示/隱藏功能。
【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】
