展示如何使用 Logto 身份驗證來保護 Netlify 網絡應用和無伺服器功能，附有源代碼示例和線上演示預覽。
Netlify 是一個強大的平台，用於部署和託管現代網絡項目，提供無縫的 Git 集成、自動化構建和無伺服器功能，為快速和可擴展的開發工作流程提供支持。
在這份全面的指南中，你將學習如何：
查看 線上演示預覽。
在開始本教程之前，需要設置以下內容：
按照 Vite 的 入門指南 創建 React 應用。
根據創建指南選擇你希望的技術棧。在本文中，我們將選擇 React + TypeScript。
然後進入項目根目錄，根據指南安裝依賴並運行應用。
按照 Netlify 入門指南 部署應用。
一旦部署成功，你可以在 https://<your-site-name>.netlify.app 查看線上網站。
記下這個網址，稍後配置 Logto 時將需要它。
開始使用 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 函數，我們可以編寫服務器端邏輯，而不需要擔心傳統的服務器配置和維護。
這些函數與你的網站一起版本控制、構建和部署，使前端和後端的開發和部署過程無縫銜接。
讓我們開始使用 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：
現在我們有了一個後端 API，我們需要確保只有已驗證的用戶才能訪問它。我們將使用 Logto 的身份驗證機制保護我們的 Netlify 函數。
為了保護我們的 API 端點：
https://api.backend.com）現在，讓我們在後端實現令牌驗證，以確保只有帶有有效訪問令牌的請求才能被處理。
首先，我們需要安裝 jose 依賴來幫助我們驗證 JWT 令牌：
然後，我們可以在後端實現令牌驗證：
現在，讓我們更新 Netlify 函數以使用 verifyLogtoToken 函數：
就是這樣！現在，我們的 Netlify 函數已被 Logto 保護，只有帶有有效訪問令牌的請求將被處理。
現在，將你的應用部署到 Netlify 並進行測試！你可以在這裡參考線上演示預覽 這裡。
https://<your-site-name>.netlify.app 訪問現場網站api/hello 端點的回應數據。本指南展示了如何將 Logto 身份驗證集成到部署在 Netlify 上的網絡應用中。
通過配置 Logto 應用和 API 資源，我們實現了前端身份驗證並保護了 Netlify 函數端點。
對於更細粒度的訪問控制，你可以利用 Logto 的 RBAC (角色基於訪問控制) 功能，通過在 Logto 控制台中定義角色和權限，並在 Netlify 函數中驗證用戶角色。