繁體中文（台灣）
使用 Logto 建立 CapacitorJS 認證
在本教程中，我們將展示如何在 Capacitor 中使用 Logto 建立認證流程。這將使你能夠輕鬆創建跨平台的登入和註冊流程。
Gao
Founder
Founder
在本教程中，我們將展示如何在 Capacitor 中使用 Logto 建立認證流程。這將使你能夠輕鬆創建跨平台的登入和註冊流程。
在本教程中，我們將展示如何在 Capacitor 中使用 Logto 建立認證流程。這將使你能夠輕鬆創建跨平台的登入和註冊流程。
在開始之前，請確保你具備以下條件：
要開始，創建一個 "Native" 類型的 Logto 應用程序。Logto 應用程序充當 OAuth 2.0 和 OpenID Connect (OIDC) 流程中的客戶端應用程序。按照以下步驟創建 Logto 應用程序：
創建 Logto 應用程序後，配置重定向 URI。重定向 URI 用於在認證流程後將用戶重定向回你的應用程序。
確保 URI 重定向到 Capacitor 應用程序，例如 com.example.app://callback。值可能根據你的 Capacitor 應用程序配置而有所不同。詳情請參見 Capacitor 深層鏈接。
更新重定向 URI 後請記得點擊 Save Changes。
如果你不確定重定向 URI，可以暫時留空，稍後再更新。
假設你已經有一個 Capacitor 項目，本教程不依賴於任何框架，所以你可以使用任何你喜歡的 UI 框架並相應地更新代碼。
endpoint 是 Logto API 的端點。你可以在內建指南或租戶設置的 Domains 部分找到。appId 是 Logto 應用程序 ID。你可以在應用程序詳細信息頁面找到。將以下代碼添加到登錄按鈕的 onClick 處理器中：
將 com.example.app://callback 替換為你在 Logto 應用程序中配置的重定向 URI。
運行 Capacitor 應用程序並點擊登錄按鈕。一個瀏覽器窗口將會打開，重定向到 Logto 登錄頁面。
由於 Capacitor 在 iOS 上使用 Safari 查看控制器和在 Android 上使用 Chrome 自定義標籤，認證狀態可以暫時持續。然而，有時用戶可能希望立即登出應用程序。在這種情況下，我們可以使用 signOut 方法來登出用戶：
signOut 方法有一個可選的參數，用於登出後的重定向 URI。如果未提供，則用戶將被重定向到 Logto 的登出頁面：
用戶需要點擊“完成”以關閉網頁視圖並返回到 Capacitor 應用程序。如果你希望自動將用戶重定向回 Capacitor 應用程序，可以提供登出後的重定向 URI：
確保登出後的重定向 URI 重定向到 Capacitor 應用程序，並記得將登出後的重定向 URI 添加到 Logto Console：
再次運行 Capacitor 應用程序並點擊登錄按鈕。如果一切順利，當認證流程完成後，Capacitor 應用程序將收到登錄結果並在控制台打印用戶聲明。
然後點擊登出按鈕，Capacitor 應用程序將被重定向到 Logto 登出頁面。如果配置了登出後的重定向 URI，它將自動重定向回 Capacitor 應用程序。
現在你可以在 Logto Cloud Console 中配置認證流程，而無需編寫複雜的代碼。此配置將適用於所有客戶端應用程序，確保一致的用戶體驗。
如果在整合過程中遇到任何問題，請隨時通過郵件 [email protected] 與我們聯繫，或加入我們的 Discord 服務器！