使用 JWT 和 Logto 保護你的 Express.js API
學習如何使用 JSON Web Tokens (JWT) 和 Logto 來保護你的 Express.js API 端點。
學習如何使用 JSON Web Tokens (JWT) 和 Logto 來保護你的 Express.js API 端點。
在開發 Web 應用程式時,保護你的 API 端點以防止未經授權的訪問是至關重要的。想像一下你正在建立一個線上購物網站,你一定不希望網絡小偷利用你的 API。
假設你已經建立了一個具有使用者身份驗證的 Express.js 應用程式,使用者必須登入後才能執行某些操作。如果沒有,你可以使用 Logto 開始你的旅程。只需幾行程式碼即可建立使用者身份驗證流程。
然而,即使在使用者身份驗證後,你仍面臨各種選擇來保護你的 API 端點。不幸的是,大多數這些選項都有其缺點:
在這個教學中,我們將演示如何使用 JSON Web Tokens (JWT) 和 Logto 來強化你的 API 端點。這種方法提供了可擴展性和最低的額外成本。
在深入之前,請確保你擁有以下內容:
Logto 充分利用了 RFC 8707: OAuth 2.0 的資源指示器 來保護你的 API 端點。這意味著你可以使用實際 URL 定義你的 API 資源。
導航到 Logto 控制台的 "API 資源" 標籤並點擊 "創建 API 資源" 來創建一個新資源。例如,如果你想保護 /api/products 端點,可以使用 URL https://yourdomain.com/api/products 作為標識符。

要繼續下去,你需要將 Logto SDK 整合到你的客戶應用程式中。這個應用程式可能與你的 Express.js 後端不同;例如,你可能有一個 React 應用程式使用 Express.js 作為後端 API 伺服器。
你還需要調整 Logto SDK 配置,通知 Logto 你想在這個授權流程中請求 API 的訪問令牌。以下是一個使用 React 的範例:
一旦使用者透過 Logto 登入,Logto SDK 中的 isAuthenticated 會變為 true:
現在,你可以使用 getAccessToken 方法為你的 API 獲取訪問令牌:
最後,在向你的 API 發出的請求中使用 Authorization 標頭包含這個訪問令牌:
在你的 Express.js 應用程式中,安裝 jose 庫以進行 JWT 驗證:
由於我們使用的是 Bearer 驗證,從 Authorization 標頭中提取訪問令牌:
接著,創建一個中介軟體來驗證訪問令牌:
你現在可以使用這個中介軟體來保護你的 API 端點:
通過這種方法,你不需要在每次請求到達時聯繫 Logto 伺服器。相反,你只需從 Logto 伺服器中獲取一次 JSON Web Key Set (JWKS),然後在本地驗證訪問令牌。
到目前為止,我們只檢查了用戶是否通過 Logto 登入。我們仍然不知道使用者是否具有適當的權限來訪問 API 端點。這是因為 Logto 允許任何人為現有 API 資源獲取訪問令牌。
為了解決這個問題,我們可以使用基於角色的訪問控制 (RBAC)。在 Logto 中,你可以定義角色並為其分配權限。參考這篇教學來學習如何在 Logto 中定義角色和權限。
定義角色和權限後,你可以將 scopes 選項添加到 LogtoProvider 元件:
然後,Logto 只會向用戶發放具有適當範圍的訪問令牌。例如,如果用戶只有 read:products 範圍,訪問令牌只會包含該範圍:
如果用戶同時具有 read:products 和 write:products 範圍,訪問令牌將包含用空格分隔的兩個範圍:
在你的 Express.js 應用程式中,你可以在授予對 API 端點的訪問權限之前,驗證訪問令牌是否包含正確的範圍:
在確保可擴展性的同時保護 API 端點並不是一件簡單的事情。Logto 致力於簡化開發人員的請求身份驗證,使你能更專注於商業邏輯。
如有任何問題,歡迎加入我們的 Discord 伺服器。我們的社群隨時樂意為你提供幫助。