如何在 Node.js 和 Express 中使用 Auth0
譯文【51CTO.com快譯】基于云計(jì)算的身份驗(yàn)證和授權(quán)平臺(tái)（有時(shí)稱為 IDaaS 或身份即服務(wù)）是云工具的一個(gè)不斷擴(kuò)展的領(lǐng)域，原因很容易理解。應(yīng)用程序安全性困難且容易出錯(cuò)，幾乎每個(gè)項(xiàng)目都需要云計(jì)算。將大部分工作轉(zhuǎn)移到專門且經(jīng)過(guò)驗(yàn)證的服務(wù)上的能力很有吸引力。
Auth0是一個(gè)身份驗(yàn)證和授權(quán)服務(wù)（以及開源軟件）新興提供商。在本文中，您將看到如何將 Auth0 登錄功能合并到一個(gè)具有 Node.js/Express 后端的應(yīng)用程序中，服務(wù)于一個(gè)直接的 JS 前端，然后使用經(jīng)過(guò)身份驗(yàn)證的用戶信息（通過(guò) JWT）來(lái)顯示/隱藏UI 信息并保護(hù) RESTful 端點(diǎn)。
創(chuàng)建一個(gè)簡(jiǎn)單的 Node.js/Express 應(yīng)用
首先，設(shè)置一個(gè)簡(jiǎn)單的 Express 應(yīng)用程序。首先從命令行輸入npm init開始。也可以任意命名項(xiàng)目名稱。請(qǐng)注意，此示例應(yīng)用程序旨在以簡(jiǎn)單和精簡(jiǎn)的方式突出顯示安全元素，因此忽略了許多生產(chǎn)所需的功能，如錯(cuò)誤處理和配置文件。
接下來(lái)，通過(guò)運(yùn)行npm install Express從運(yùn)行init的同一目錄安裝Express。
在您選擇的代碼編輯器中，在根目錄中添加一個(gè) 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');
這段代碼概述了主要是：三個(gè) API 端點(diǎn)，一個(gè)開放，一個(gè)需要主動(dòng)登錄，一個(gè)需要登錄和特定權(quán)限。
現(xiàn)在將開發(fā)腳本添加到 package.json 文件的腳本部分：
- "dev": "nodemon server.js"
下一步需要安裝 nodemon 工具：
- npm install -g nodemon
然后，使用npm run dev運(yùn)行簡(jiǎn)單服務(wù)器，并在 localhost:3000/api/open 查看 API 響應(yīng)。
提供靜態(tài)文件
接著使用 express.static 從 /public/index.html 為客戶端提供服務(wù)。該文件包含所有 HTML 和 JS，以便于理解所有內(nèi)容，因此，Auth0文檔稱之為單頁(yè)應(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/，將看到一個(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"></ 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
- });
- };
對(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)顯示/隱藏功能。
【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】
