## 介紹 [FlutterFlow](https://flutterflow.io/) 是一個低代碼平台，允許你以視覺化方式構建 Flutter 應用程式。它提供拖放介面來設計你 app 的 UI 並生成相應的 Flutter 代碼。根據官方[文件](https://docs.flutterflow.io/settings-and-integrations/app-settings/authentication)，它提供了三種不同的認證整合選項： 1. 通過內建的 Firebase 認證 2. 通過內建的 Supabase 認證 3. 自訂認證對於前兩種選擇，FlutterFlow 提供與 Firebase 和 Supabase 的無縫整合。你需要設置你的 Firebase 或 Supabase 專案，並在 FlutterFlow 中配置認證設置。然而，如果你想使用不同的認證提供者，你需要自行實現認證邏輯。至於[自訂認證](https://docs.flutterflow.io/data-and-backend/custom-authentication)，FlutterFlow 提供了一種通過單一自訂[認證 API](https://docs.flutterflow.io/data-and-backend/custom-authentication#id-3.-authenticate-users)與任何認證提供者整合的方法。然而，現代安全標準不建議在客戶端和認證伺服器之間直接進行用戶憑證交換。取而代之的，你應該使用例如 OAuth 2.0 或 OpenID Connect (OIDC) 等安全的認證流程來進行用戶認證。對於現代的基於 OAuth 2.0 或 OIDC 的身份提供者（如 Auth0、Okta 和 Logto），出於安全原因，不建議或禁止使用資源所有者密碼憑證 (ROPC) 授權類型。詳情請參閱[Deprecated ropc grant type](https://blog.logto.io/deprecated-ropc-grant-type/)。標準的 OAuth 2.0 或 OIDC 認證流涉及在客戶端應用程式、授權伺服器和用戶的瀏覽器之間的多個步驟和重導。在這篇文章中，我們將向你展示如何使用 [Logto Flutter SDK](https://docs.logto.io/quick-starts/flutter) 自訂 FluterFlow 的 `CustomAuthManager` 類，以在你的 FlutterFlow 應用程式中實現安全的認證流程。 ## 先決條件 - 一個 [Logto Cloud](https://cloud.logto.io/) 帳戶或自行託管的 Logto 實例。（查看 [⚡ 快速開始](https://docs.logto.io/docs/tutorials/get-started/) 指南以創建 Logto 實例） - 使用 FlutterFlow 創建的 Flutter 應用程式。 - 在你的 Logto 控制台中註冊一個 Flutter 應用程式。 - 一個 GitHub 儲存庫來管理你在 FlutterFlow 中的自訂代碼。 - 查看我們的 Flutter SDK 整合[指南](https://docs.logto.io/quick-starts/flutter/)。 - Logto Flutter SDK 套件可在 [pub.dev](https://pub.dev/packages/logto_dart_sdk) 和 Logto [github 儲存庫](https://github.com/logto-io/dart) 中獲得。 - 該 SDK 目前僅適用於 Android 和 iOS 平台。 - 在 GitHub 上管理自訂代碼是 FlutterFlow 的一個高級功能。你需要將你的 FlutterFlow 升級到 `Pro` 計劃以啟用此功能。 ## 步驟 1：啟用在 FlutterFlow 中管理自訂代碼為了自訂 `CustomAuthManager` 類，你需要在 FlutterFlow 中啟用自訂代碼功能。按照 [在 GitHub 上管理自訂代碼](https://docs.flutterflow.io/customizing-your-app/manage-custom-code-in-github) 指南連接和同步你的 FlutterFlow 專案與 GitHub。完成後，你的 GitHub FlutterFlow 儲存庫下將有三個不同的分支： 1. `main`：Flutter 專案的主分支。你需要此分支來部署你的專案。 2. `flutterflow`：FlutterFlow 將從 UI 編輯器同步更改到你的代碼庫的分支。 3. `develop`：你可以在此分支中修改你的自訂代碼。 ## 步驟 2：在 FlutterFlow 中設計並創建你的自訂 UI 流程 ### 建立你的頁面在 FlutterFlow 中創建你的 UI。你可以按照 [FlutterFlow 文檔](https://docs.flutterflow.io/) 來根據你的需求創建 UI。在本教程中，最低要求是我們假設你有兩個頁面： 1. 一個簡單的 `HomePage`，帶有一個登錄按鈕。（不需要登錄表單，用戶認證流程在 Logto 端處理。請查看[自訂化 sie](https://docs.logto.io/docs/recipes/customize-sie/) 指南以獲取更多詳細信息。） ![home page](https://uploads.strapi.logto.io/1/home_page_f57a437adb.webp) 2. 一個 `user` 個人資料頁面，用於顯示用戶信息和登出按鈕。 ![user page](https://uploads.strapi.logto.io/1/user_page_0bed85dc6d.webp) ### 在 FlutterFlow 中啟用自訂認證進入 `App Settings` - `Authentication` 頁面並啟用自訂認證。這將在你的 FlutterFlow 專案中創建一個 `CustomAuthManager` 類及相關文件。 FlutterFlow custom authentication

## 步驟 3：將你的 FlutterFlow 專案與 GitHub 同步在你創建了自訂 UI 並在 FlutterFlow 中啟用了自訂認證後，你需要將你的專案與 GitHub 同步。前往 `integrations` - `GitHub` 頁面，並點擊 `Push to Repository` FlutterFlow GitHub push

## 步驟 4：自訂 `CustomAuthManager` 代碼切換到 GitHub 儲存庫中的 `develop` 分支，並合併來自 `flutterflow` 分支的最新更改。這將同步所有的 UI 變更到你的 `develop` 分支，包括你的頁面小部件和預建的 `CustomAuthManager` 類。 ### 安裝 Logto SDK 依賴將 Logto SDK 依賴新增至你的專案。 ```bash flutter pub add logto_dart_sdk ``` 可選的 Http 套件： Logto 客戶端需要一個 http 客戶端來進行 API 呼叫。你可以使用 `http` 套件或其他任何你選擇的 http 客戶端套件。 ```bash flutter pub add http ``` ### 更新 UserProvider 類 `UserProvider` 類負責管理用戶的認證狀態。我們需要自訂屬性以存儲由 Logto SDK 提供的用戶認證信息。新增一個類型為 `OpenIdClaims` 的 `idToken` 屬性來存儲已認證用戶的 `id_token` 聲明。 > `OpenIdClaims` 類定義在 Logto SDK 中，它將提供來自已認證用戶的 `OIDC` 標準 `id_token` 聲明。 ```dart // lib/auth/custom_auth/custom_auth_user_provider.dart import 'package:logto_dart_sdk/src/modules/id_token.dart'; import 'package:rxdart/rxdart.dart'; import 'custom_auth_manager.dart'; class FlutterFlowAuthAuthUser { FlutterFlowAuthAuthUser({required this.loggedIn, this.uid, this.idToken}); bool loggedIn; String? uid; OpenIdClaims? idToken; } /// Generates a stream of the authenticated user. BehaviorSubject flutterFlowAuthAuthUserSubject = BehaviorSubject.seeded(FlutterFlowAuthAuthUser(loggedIn: false)); Stream flutterFlowAuthAuthUserStream() => flutterFlowAuthAuthUserSubject .asBroadcastStream() .map((user) => currentUser = user); ``` ### 自訂 CustomAuthManager 類並初始化 Logto 客戶端 ```dart // lib/auth/custom_auth/custom_auth_manager.dart import 'dart:async'; import 'package:flutter/foundation.dart'; import 'package:http/http.dart' as http; import 'package:logto_dart_sdk/logto_client.dart'; import 'package:logto_dart_sdk/src/modules/id_token.dart'; import 'custom_auth_user_provider.dart'; export 'custom_auth_manager.dart'; class CustomAuthManager { late LogtoClient logtoClient; // Logto configuration final logtoConfig = const LogtoConfig( appId: '', endpoint: ''); // ... FlutterFlowAuthAuthUser? _updateCurrentUser( {bool loggedIn = false, String? uid, OpenIdClaims? idToken}) { // Update the current user stream. final updatedUser = FlutterFlowAuthAuthUser( loggedIn: loggedIn, uid: uid, idToken: idToken, ); flutterFlowAuthAuthUserSubject.add(updatedUser); return updatedUser; } Future initialize() async { logtoClient = LogtoClient(config: logtoConfig, httpClient: http.Client()); late OpenIdClaims? idToken; try { idToken = await logtoClient.idTokenClaims; } catch (e) { if (kDebugMode) { print('Error initializing auth: $e'); } } _updateCurrentUser( loggedIn: idToken != null, uid: idToken?.subject, idToken: idToken); } } FlutterFlowAuthAuthUser? currentUser; bool get loggedIn => currentUser?.loggedIn ?? false; ``` `initialize` 方法將初始化一個 Logto 客戶端實例，並更新當前用戶流，與保存在本地儲存中的用戶認證狀態進行同步。 > Logto SDK 使用 [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage) 套件來安全地存儲用戶認證數據。當用戶認證後，`id_token` 聲明將存儲在本地儲存中。 ### 使用 Logto 客戶端實現登錄方法呼叫 `LogtoClient.signIn` 方法將啟動標準 `OIDC` 認證流程。Logto 登錄頁面將在 webview 中打開。基於 webview 的認證流程由 [flutter_web_auth](https://pub.dev/packages/flutter_web_auth) 提供。 ```dart // lib/auth/custom_auth/custom_auth_manager.dart Future signIn( String redirectUri, ) async { await logtoClient.signIn(redirectUri); var idTokenClaims = await logtoClient.idTokenClaims; return _updateCurrentUser( loggedIn: idTokenClaims != null, uid: idTokenClaims?.subject, idToken: idTokenClaims, ); } ``` LogtoClient 將處理授權、令牌交換和用戶信息檢索的步驟。一旦用戶認證成功，`idTokenClaims` 將會存儲在本地儲存中。從 LogtoClient 中檢索 `idTokenClaims` 並更新當前用戶流。 ### 實現登出方法 ```dart // lib/auth/custom_auth/custom_auth_manager.dart Future signOut() async { await logtoClient.signOut(); flutterFlowAuthAuthUserSubject.add( FlutterFlowAuthAuthUser(loggedIn: false), ); } ``` `signOut` 方法將清除存儲在本地儲存中的用戶認證數據並更新當前用戶流。 ### 更新認證工具方法 - 添加 `authManager` 獲取器以訪問 `CustomAuthManager` 實例。 - 添加 `currentUserUid` 獲取器以獲取當前用戶 uid。 - 添加 `currentUserData` 獲取器以獲取當前用戶數據。 - 添加 `logtoClient` 獲取器以訪問 Logto 客戶端實例。 ```dart // lib/auth/custom_auth/auth_util.dart import 'package:logto_dart_sdk/logto_client.dart'; import 'package:logto_dart_sdk/src/modules/id_token.dart'; import 'custom_auth_manager.dart'; export 'custom_auth_manager.dart'; final _authManager = CustomAuthManager(); CustomAuthManager get authManager => _authManager; String get currentUserUid => currentUser?.uid ?? ''; OpenIdClaims? get currentUserData => currentUser?.idToken; LogtoClient get logtoClient => _authManager.logtoClient; ``` ## 步驟 5：在你的 UI 中更新登錄和登出按鈕 ### 主頁當用戶點擊登錄按鈕時，呼叫 `authManager.signIn` 方法來啟動認證流。 > `redirectUri` 是用來從 Logto 登錄頁面捕獲授權回調的回調 URL。 > 詳情請參見 [實現登錄](https://docs.logto.io/quick-starts/flutter/#implement-sign-in)。 ```dart // lib/pages/home_page/home_page_widget.dart final redirectUri = 'io.logto://callback'; // ... FFButtonWidget( onPressed: () async { GoRouter.of(context).prepareAuthEvent(); await authManager.signIn(redirectUri); context.replaceNamed('user'); }, text: 'Sign In', // ... ) ``` 用戶成功認證後，將被重定向到 `user` 頁面。 ### 用戶資料頁使用認證工具獲取器來訪問當前用戶數據和 Logto 客戶端實例。例如，使用多個 `Text` 小部件來顯示用戶信息： ```dart // lib/pages/user/user_widget.dart import '/auth/custom_auth/auth_util.dart'; // ... children: [ Text( 'User ID: $currentUserUid', ), Text( 'Display Name: ${currentUserData?.name}', ), Text( 'Username: ${currentUserData?.username}', ), Text( 'Email: ${currentUserData?.emailVerified ?? currentUserData?.email}', ), ] ``` 當用戶點擊登出按鈕時觸發登出方法，並將用戶重定向回主頁。 ```dart // lib/pages/user/user_widget.dart FFButtonWidget( onPressed: () async { await authManager.signOut(); context.replaceNamed('HomePage'); }, text: 'Sign Out', // ... ) ``` ## 測試在模擬器上運行你的 FlutterFlow 應用程式。點擊主頁上的登錄按鈕以啟動認證流。Logto 登錄頁面將在 webview 中打開。認證成功後，用戶將被重定向到用戶個人資料頁面。用戶信息將在用戶個人資料頁面顯示。點擊登出按鈕登出用戶並將用戶重定向回主頁。別忘了將 `develop` 分支合併回 `main` 分支並將更改推送到 GitHub 儲存庫。 FlutterFlow GitHub 推送是從 FlutterFlow 到 GitHub 的單向同步。在 `flutterflow` 分支下進行的任何更改都將在你將更改推送到 GitHub 儲存庫時被 FlutterFlow UI 編輯器覆蓋。請務必使用 `develop` 分支來管理你的自訂代碼，並將更改合併回 `main` 分支以進行部署。 ## 進一步閱讀 Logto SDK 提供了更多與 Logto API 互動的方法。你可以進一步自訂 `CustomAuthManager` 類，以使用 Logto SDK 實現更多功能。 - [用戶信息端點](https://docs.logto.io/quick-starts/flutter/#get-user-information) - [獲取資源訪問令牌](https://docs.logto.io/quick-starts/flutter/#api-resources) - [獲取組織訪問令牌](https://docs.logto.io/quick-starts/flutter/#organization)