日本語
Logto を使用したカスタム FlutterFlow 認証
Logto Flutter SDK を使用して、Flutter アプリケーションにカスタム認証を実装する方法を学びます。
Simeng
Developer
Developer
Logto Flutter SDK を使用して、Flutter アプリケーションにカスタム認証を実装する方法を学びます。
FlutterFlow は、視覚的に Flutter アプリケーションを作成できるローコードプラットフォームです。アプリの UI をデザインするためのドラッグアンドドロップインターフェースを提供し、対応する Flutter コードを生成します。 公式 ドキュメント によると、次の 3 つの認証統合オプションが提供されています:
最初の 2 つについては、FlutterFlow は Firebase と Supabase とのシームレスな統合を提供しています。Firebase または Supabase プロジェクトをセットアップし、FlutterFlow で認証設定を行う必要があります。ただし、別の認証プロバイダーを使用したい場合は、自分で認証ロジックを実装する必要があります。
カスタム認証 に関しては、FlutterFlow はカスタム 認証 API を通じて、任意の認証プロバイダーとの統合を可能にします。
しかし、クライアントと認証サーバー間での直接的なユーザー資格情報の交換は、現代のセキュリティ基準において推奨されていません。代わりに、OAuth 2.0 や OpenID Connect (OIDC) などの安全な認証フローを使用してユーザーを認証すべきです。Auth0、Okta、Logto などの最新の OAuth 2.0 または OIDC に基づくアイデンティティ プロバイダー (IdP) では、リソース オーナー パスワード クレデンシャル (ROPC) グラント タイプはセキュリティ上の理由から推奨されておらず、使用が禁止されています。詳細は 無効化された ropc グラント タイプ を参照してください。
標準的な OAuth 2.0 または OIDC 認証フローは、クライアント アプリケーション、認可サーバー、ユーザーのブラウザ間での複数のステップとリダイレクトを伴います。この投稿では、Logto Flutter SDK を使用して、FlutterFlow アプリケーションで安全な認証フローを実装するために、FluterFlow の CustomAuthManager クラスをカスタマイズする方法を紹介します。
CustomAuthManager クラスをカスタマイズするには、FlutterFlow でカスタム コード機能を有効にする必要があります。Manage Custom Code In GitHub ガイドに従って、FlutterFlow プロジェクトと GitHub をリンクおよび同期します。
完了すると、GitHub の FlutterFlow リポジトリには 3 つの異なるブランチが作成されます:
main: Flutter プロジェクトの主要ブランチ。プロジェクトを展開するには、このブランチが必要です。flutterflow: FlutterFlow から UI エディタの変更をコードベースに同期するためのブランチ。develop: カスタム コードを修正できるブランチ。FlutterFlow で UI を作成します。要件に基づいて UI を作成するには、FlutterFlow ドキュメント に従うことができます。このチュートリアルでは、最小限の要件として、2 つのページがあると仮定します:
HomePage。(サインイン フォームは不要です。ユーザー認証フローは Logto 側で処理されます。詳細は カスタマイズ sie ガイドを参照してください。)
user プロフィール ページ。
App Settings - Authentication ページに移動し、カスタム認証を有効にします。これにより、FlutterFlow プロジェクトに CustomAuthManager クラスと関連ファイルが作成されます。
カスタム UI を作成して FlutterFlow でカスタム認証を有効にした後は、プロジェクトを GitHub と同期する必要があります。integrations - GitHub ページに移動し、Push to Repository をクリックします。
CustomAuthManager コードをカスタマイズするGitHub リポジトリで develop ブランチに切り替え、flutterflow ブランチから最新の変更をマージします。これにより、ページのウィジェットや、事前に作成された CustomAuthManager クラスを含むすべての UI 変更が develop ブランチに同期されます。
プロジェクトに Logto SDK 依存関係を追加します。
UserProvider クラスはユーザー認証状態を管理します。Logto SDK によって提供されるユーザー認証情報を格納するために、プロパティをカスタマイズする必要があります。
認証されたユーザーの id_token クレームを格納するために、型 OpenIdClaims の idToken プロパティを追加します。
OpenIdClaimsクラスは Logto SDK で定義されており、OIDC 標準のid_tokenクレームを認証されたユーザーから提供します。
initialize メソッドは、Logto クライアント インスタンスを初期化し、ローカル ストレージに保持されているユーザー認証ステータスで現在のユーザー ストリームを更新します。
Logto SDK は、ユーザー認証データを安全に保存するために flutter_secure_storage パッケージを使用します。ユーザーが認証されると、
id_tokenクレームがローカル ストレージに保存されます。
LogtoClient.signIn メソッドを呼び出すと、標準的な OIDC 認証フローが開始されます。Logto サインイン ページは WebView で開かれます。WebView ベースの認証フローは flutter_web_auth によってサポートされています。
LogtoClient は認可、トークン交換、ユーザー情報の取得手順を処理します。ユーザーが認証されると、idTokenClaims がローカル ストレージに保存されます。
LogtoClient から idTokenClaims を取得し、現在のユーザー ストリームを更新します。
signOut メソッドは、ローカル ストレージに保存されているユーザー認証データをクリアし、現在のユーザー ストリームを更新します。
CustomAuthManager インスタンスにアクセスするための authManager ゲッターを追加します。currentUserUid ゲッターを追加します。currentUserData ゲッターを追加します。logtoClient ゲッターを追加します。ユーザーがサインイン ボタンをクリックしたときに認証フローを開始するには、authManager.signIn メソッドを呼び出します。
redirectUriは、Logto サインイン ページからの認可コールバックをキャプチャするために使用されるコールバック URL です。 redirectUri の詳細については、implement sign-in を参照してください。
ユーザーは認証が成功した後、user ページにリダイレクトされます。
認証ユーティリティ ゲッターを使用して現在のユーザー データと Logto クライアント インスタンスにアクセスします。
たとえば、複数の Text ウィジェットを使用してユーザー情報を表示するには次のようにします:
ユーザーがサインアウト ボタンをクリックしたときにサインアウト メソッドを呼び出し、ユーザーをホーム ページにリダイレクトします。
エミュレータで FlutterFlow アプリケーションを実行します。ホーム ページのサインイン ボタンをクリックして認証フローを開始します。Logto サインイン ページが WebView に表示されます。認証が成功すると、ユーザーはユーザー プロフィール ページにリダイレクトされます。ユーザー情報がユーザー プロフィール ページに表示されます。サインアウト ボタンをクリックしてユーザーをサインアウトし、ホーム ページにリダイレクトします。
develop ブランチを main ブランチにマージし、変更を GitHub リポジトリにプッシュするのを忘れないでください。
Logto SDK は、Logto API と対話するための多くのメソッドを提供します。Logto SDK を使用してさらに多くの機能を実装するために、CustomAuthManager クラスをさらにカスタマイズすることができます。