使用 Logto 建立 CapacitorJS 認證
在本教程中，我們將展示如何在 Capacitor 中使用 Logto 建立認證流程。這將使你能夠輕鬆創建跨平台的登入和註冊流程。
Founder
介紹
- Logto 是一個現代的 Auth0 替代方案，可以以最小的努力構建客戶身份基礎設施。它支持多種登錄方法，包括用戶名、電子郵件、電話號碼和流行的社交登入，如 Google 和 GitHub。
- Capacitor 是一個開源的原生運行時，用於構建 Web Native 應用程序。
在本教程中，我們將展示如何在 Capacitor 中使用 Logto 建立認證流程。這將使你能夠輕鬆創建跨平台的登入和註冊流程。
先決條件
在開始之前，請確保你具備以下條件：
創建 Logto 應用程序
要開始，創建一個 "Native" 類型的 Logto 應用程序。Logto 應用程序充當 OAuth 2.0 和 OpenID Connect (OIDC) 流程中的客戶端應用程序。按照以下步驟創建 Logto 應用程序：
- 登錄到 Logto Cloud Console。
- 在左側導航欄中，點擊 Applications。
- 點擊 Create application。
- 選擇 Native 作為應用程序類型，並輸入應用程序名稱。
- 點擊 Create。
創建 Logto 應用程序後，配置重定向 URI。重定向 URI 用於在認證流程後將用戶重定向回你的應用程序。
確保 URI 重定向到 Capacitor 應用程序，例如 com.example.app://callback。值可能根據你的 Capacitor 應用程序配置而有所不同。詳情請參見 Capacitor 深層鏈接。
更新重定向 URI 後請記得點擊 Save Changes。
如果你不確定重定向 URI，可以暫時留空，稍後再更新。
設置 Capacitor
假設你已經有一個 Capacitor 項目，本教程不依賴於任何框架，所以你可以使用任何你喜歡的 UI 框架並相應地更新代碼。
安裝依賴
初始化 Logto 客戶端
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 服務器！