使用 Logto 建立 Expo (React Native) 認證
學習如何透過集成 Logto SDK，在 Expo (React Native) 中建立用戶認證流程。
Founder
開始使用
簡介
- Logto 是一個開源的 Auth0 替代方案，用於構建身份基礎設施。它支持各種登錄方式，包括用戶名、電郵、電話號碼和流行的社交登錄，例如 Google 和 GitHub。
- Expo (React Native) 是一個工具生態系統，幫助你使用 React 創建可運行於 Android、iOS 和網頁的通用原生應用程式。
在本教程中，我們將向你展示如何通過集成 Logto SDK 來使用 Expo (React Native) 構建用戶身份驗證流程。教程使用 TypeScript 作為編程語言。
先決條件
在開始之前，請確保你具備以下條件：
- 一個 Logto 帳戶。如果你還沒有，可以 免費註冊。
- An Expo (React Native) 開發環境和一個項目。
創建一個 Logto 應用程序
要開始，請創建一個類型為 "Native" 的 Logto 應用程序。按照以下步驟創建 Logto 應用程序：
- 登錄到 Logto 控制台。
- 在左側導航欄中，點擊 應用程序。
- 點擊 創建應用程序。
- 在打開的頁面中，找到 "Native" 部分並定位到 "Expo (React Native)" 卡片。
- 點擊 開始構建，輸入你的應用程序名稱。
- 點擊 創建。
然後你應該會看到一個互動指南，指導你如何將 Logto SDK 集成到你的 Expo (React Native) 應用程序中。以下內容可以作為未來的參考。
與 Logto SDK 集成
安裝
透過你喜愛的包管理器安裝 Logto SDK 和對等依賴項：
@logto/rn 包是 Logto 的 SDK，其餘包是它的對等依賴項。由於 Expo CLI 要求所有原生模塊的依賴項必須直接在根項目的 package.json 中安裝，故無法將其列為直接依賴項。
初始化 Logto 提供者
導入並使用 LogtoProvider 提供 Logto 上下文：
實施登入與登出
轉到 Logto 控制台的應用程式詳細資訊頁面。新增一個原生重定向 URI（例如，io.logto://callback），然後點擊「Save」。
-
對於 iOS，重定向 URI 協議實際上並不重要，因為
ASWebAuthenticationSession類會監聽重定向 URI，不管它是否已註冊。 -
對於 Android，重定向 URI 協議必須填寫在 Expo 的
app.json文件中，例如：
現在回到你的應用程式，你可以使用 useLogto 鉤子來登入和登出：
顯示用戶資訊
要顯示用戶資訊，你可以使用 getIdTokenClaims() 方法：
檢查點：運行應用程式
現在你可以運行應用程序並嘗試使用 Logto 登錄/登出：
- 在瀏覽器中打開應用程序，你應該會看到 "登錄" 按鈕。
- 點擊 "登錄" 按鈕，你應該會被重定向到 Logto 登錄頁面。
- 登錄後，你應該會被重定向回應用程序，並且你應該會看到用戶數據和 "登出" 按鈕。
- 點擊 "登出" 按鈕，你應該會被重定向到 Logto 登出頁面，然後被重定向回應用程序，處於未登錄狀態。
如果在集成過程中遇到任何問題，請隨時 加入我們的 Discord 服務器 與社區和 Logto 團隊聊天！