繁體中文（香港）
  • netlify
  • 身份驗證解決方案
  • 保護 Netlify 功能

使用 Logto 在 Netlify 上的全端身份驗證解決方案：保護網絡應用和無伺服器功能

展示如何使用 Logto 身份驗證來保護 Netlify 網絡應用和無伺服器功能，附有源代碼示例和線上演示預覽。

Yijun
Yijun
Developer

Stop wasting weeks on user auth
Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.
Get started
Product screenshot

Netlify 是一個強大的平台，用於部署和託管現代網絡項目，提供無縫的 Git 集成、自動化構建和無伺服器功能，為快速和可擴展的開發工作流程提供支持。

在這份全面的指南中，你將學習如何：

  • 使用 Logto 在 Netlify 上的單頁應用 (SPA) 中實現身份驗證，並展示 Vite + React 示例
  • 使用 Logto 身份驗證保護你的 Netlify 無伺服器功能
  • 使用我們的參考實現部署一個生產就緒的應用：example-vite-react-logto

查看 線上演示預覽。

先決條件

在開始本教程之前，需要設置以下內容：

使用 Vite 創建 React 應用

按照 Vite 的 入門指南 創建 React 應用。

根據創建指南選擇你希望的技術棧。在本文中，我們將選擇 React + TypeScript。

然後進入項目根目錄，根據指南安裝依賴並運行應用。

使用 Netlify 部署應用

按照 Netlify 入門指南 部署應用。

一旦部署成功，你可以在 https://<your-site-name>.netlify.app 查看線上網站。

記下這個網址，稍後配置 Logto 時將需要它。

將 Logto 集成到應用中

開始使用 Logto 身份驗證：

  1. 導航到 Logto 控制台中的“應用”頁面
  2. 創建一個新應用
    • 選擇你的前端框架 (在我們的示例中為 React)
    • 注意：你可以根據需要創建任何單頁應用 (SPA) 或原生應用
  3. 遵循 Logto 控制台內置或官方 React 身份驗證集成指南 提供的集成指南
  4. 從應用詳情頁面記下：
    • 你的應用程序 ID
    • Logto 端點（可在“端點和憑證”部分找到，格式通常為 https://<your-instance>.logto.app/） 這些憑證將在後續步驟中需要。

注意，在我們的演示中，我們使用 /callback 路徑來處理 Logto 的登錄重定向。 Logto 中的重定向 URI 需要配置為 https://<your-site-name>.netlify.app/callback。 用戶登出後，我們返回主頁，因此將登出後重定向 URI 設置為 https://<your-site-name>.netlify.app。

然後在 Netlify 的環境變量中設置我們創建的 Logto 應用的信息（你的網站 -> 網站配置 -> 環境變量）：

然後我們在前端項目中使用這些配置：

你可以在這裡查看最終的集成代碼：example-vite-react-logto。

注意，當我們部署到 Netlify 並通過 Logto 登錄時，我們的 URL 並不會自動重定向到回調頁。這是因為 Netlify 默認不支持單頁應用 (SPA) 的客戶端路由。

當你訪問像 /callback 這樣的路徑時，Netlify 會嘗試在服務器上找到相應的文件，而不是將請求轉發給你的 React 應用。

此時，我們需要在 Netlify 項目的公用目錄中創建一個 _redirects 文件，告訴 Netlify 將所有請求重定向到你的 index.html：

或者，你可以在項目根目錄創建一個 netlify.toml 文件：

現在，我們的路由應該能正常工作。

使用 Netlify 函數創建後端 API

Netlify 函數提供了一種簡單而強大的方式來構建後端 API。使用 Netlify 函數，我們可以編寫服務器端邏輯，而不需要擔心傳統的服務器配置和維護。

這些函數與你的網站一起版本控制、構建和部署，使前端和後端的開發和部署過程無縫銜接。

讓我們開始使用 Netlify 函數構建後端 API。

首先，我們需要在項目的 netlify 目錄下創建一個 functions 目錄，然後創建一個 hello.ts 文件：

當我們訪問 https://<your-site-name>.netlify.app/.netlify/functions/hello，這個函數將被調用，並返回 "Hello world!"。"。

如果你認為路徑 /.netlify/functions/hello 有點奇怪，你可以通過在公用/_redirects 文件中添加重定向規則來設置重定向，以調用函數：

這樣，當我們訪問 https://<your-site-name>.netlify.app/api/hello，它將調用我們的函數並返回 "Hello world!"。這實際上是使用 Netlify 函數構建 API 的常見方式。

我們可以在前端項目中使用 fetch 訪問此 API：

使用 Logto 保護你的 Netlify 函數

現在我們有了一個後端 API，我們需要確保只有已驗證的用戶才能訪問它。我們將使用 Logto 的身份驗證機制保護我們的 Netlify 函數。

為了保護我們的 API 端點：

  1. 在 Logto Console 中創建一個 API 資源來表示我們的後端 API：
  • 進入 Logto Console 的“API 資源”並創建一個新的 API
  • 設置一個名稱和 API 標識符（例如 https://api.backend.com）
  • 在 API 資源詳情頁面上記下 API 標識符，因為我們稍後會需要它
  1. 配置你的應用以使用此 API 資源，將標識符添加到你的 Netlify 環境變量中：
  1. 更新你的 Logto 配置以包含此 API 資源：
  1. 在向受保護的端點發出請求時，你的前端需要包含一個有效的訪問令牌。以下是如何請求並使用它：

現在，讓我們在後端實現令牌驗證，以確保只有帶有有效訪問令牌的請求才能被處理。

首先，我們需要安裝 jose 依賴來幫助我們驗證 JWT 令牌：

然後，我們可以在後端實現令牌驗證：

現在，讓我們更新 Netlify 函數以使用 verifyLogtoToken 函數：

就是這樣！現在，我們的 Netlify 函數已被 Logto 保護，只有帶有有效訪問令牌的請求將被處理。

測試我們的演示

現在，將你的應用部署到 Netlify 並進行測試！你可以在這裡參考線上演示預覽 這裡。

  1. 在 https://<your-site-name>.netlify.app 訪問現場網站
  2. 點擊導航欄中的“登錄”按鈕
  3. 使用 Logto 用戶帳戶登錄，你將看到已登錄狀態。
  4. 點擊導航欄中的“受保護資源”選項卡，你將被重定向到受保護頁面。
  5. 點擊“查看受保護資源”按鈕，你將看到來自 api/hello 端點的回應數據。
  6. 點擊導航欄中的“註銷”按鈕，你將被重定向到主頁。

結論

本指南展示了如何將 Logto 身份驗證集成到部署在 Netlify 上的網絡應用中。

通過配置 Logto 應用和 API 資源，我們實現了前端身份驗證並保護了 Netlify 函數端點。

對於更細粒度的訪問控制，你可以利用 Logto 的 RBAC (角色基於訪問控制) 功能，通過在 Logto 控制台中定義角色和權限，並在 Netlify 函數中驗證用戶角色。