繁體中文（台灣）
  • netlify
  • auth solution
  • secure netlify functions

使用 Logto 在 Netlify 上的全端認證解決方案：保護 web 應用程式和無伺服器函數

展示如何利用 Logto 認證來保護 Netlify 的 web 應用程式和無伺服器函數，並附有源代碼範例與線上預覽展示。

Yijun
Yijun
Developer

不要在使用者認證上浪費數週時間
使用 Logto 更快地發布安全應用程式。幾分鐘內整合使用者認證，專注於您的核心產品。
立即開始
Product screenshot

Netlify 是一個強大的平台，用於部署和託管現代 web 專案，提供無縫的 Git 整合、自動化構建和無伺服器函數，適合快速和可擴展的開發工作流程。

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

  • 使用 Logto 在 Netlify 上為單頁應用程式 (SPA) 實作認證，並用 Vite + React 範例演示
  • 使用 Logto 認證保護你的 Netlify 無伺服器函數
  • 使用我們的參考實作來部署一個可投入生產的應用程式：example-vite-react-logto

查看線上預覽展示。

先決條件

在開始本教程之前，你需要設定以下事物：

使用 Vite 創建 React 應用程式

按照 Vite 的 入門指南 創建一個 React 應用程式。

根據創建指導來選擇你想要的技術棧。在本文中，我們將選擇 React + TypeScript。

然後進入專案根目錄，根據指南安裝相依性，並運行應用程式。

使用 Netlify 部署應用程式

按照 Get started with Netlify 指南部署你的應用程式。

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

記下此 URL，因為我們稍後將需要配置 Logto。

將 Logto 整合到你的應用程式中

要開始使用 Logto 認證：

  1. 導航至 Logto 控制台的「應用程式」頁面
  2. 創建一個新的應用程式
    • 選擇你的前端框架（在我們的例子中是 React）
    • 注意：你可以根據需要創建任何單頁應用程式（SPA）或原生應用程式
  3. 按照集成指南來自：
  4. 從應用程式詳情頁中，記下：
    • 你的應用程式 ID
    • Logto 端點（可以在「端點和憑據」部分找到，通常格式為 https://<your-instance>.logto.app/） 這些憑據將在後續步驟中需要。

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

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

然後我們在前端專案中使用這些配置：

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

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

當你訪問類似 /callback 的路徑時，Netlify 將嘗試在伺服器上查找相應的文件，而不是將請求轉發到你的 React 應用程式。

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

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

現在，我們的路由應該可以正常工作了。

使用 Netlify 函數創建後端 APIs

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

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

讓我們開始使用 Netlify 函數來構建我們的後端 APIs。

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

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

如果你覺得路徑 /.netlify/functions/hello 看起來有點奇怪，可以在 public/_redirects 文件中設置一個重定向規則來調用該函數：

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

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

使用 Logto 保護你的 Netlify 函數

既然我們已經有了一個後端 API，我們需要確保只有經驗證的用戶可以訪問它。我們將使用 Logto 的認證機制來保護我們的 Netlify 函數。

要保護我們的 API 端點：

  1. 在 Logto 控制台中創建一個 API 資源來表示我們的後端 API：
  • 前往 Logto 控制台的 "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 的 web 應用程式中。

通過配置 Logto 應用程式和 API 資源，我們實施了前端認證並保護了 Netlify 函數端點。

為了更細緻的訪問控制，你可以利用 Logto 的 RBAC（基於角色的訪問控制） 功能，通過在 Logto 控制台中定義角色和權限，並在 Netlify 函數中驗證用戶角色實現。