Logto を使用したカスタム FlutterFlow 認証

はじめに#

FlutterFlow は、視覚的に Flutter アプリケーションを作成できるローコードプラットフォームです。アプリの UI をデザインするためのドラッグアンドドロップインターフェースを提供し、対応する Flutter コードを生成します。 公式 ドキュメント によると、次の 3 つの認証統合オプションが提供されています:

1. 組み込みの Firebase 認証
2. 組み込みの Supabase 認証
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 クラスをカスタマイズする方法を紹介します。

前提条件#

• Logto Cloud アカウントまたは自己ホストされた Logto インスタンス。Logto インスタンスを作成するには ⚡ Get started ガイドを参照してください。
• FlutterFlow を使用して作成された Flutter アプリケーション。
• Logto コンソールに Flutter アプリケーションを登録します。
• FlutterFlow でカスタム コードを管理するための GitHub リポジトリ。
• Flutter SDK の統合 ガイド を確認します。

ステップ 1: FlutterFlow でカスタム コードの管理を有効にする#

CustomAuthManager クラスをカスタマイズするには、FlutterFlow でカスタム コード機能を有効にする必要があります。Manage Custom Code In GitHub ガイドに従って、FlutterFlow プロジェクトと GitHub をリンクおよび同期します。

完了すると、GitHub の FlutterFlow リポジトリには 3 つの異なるブランチが作成されます:

1. main: Flutter プロジェクトの主要ブランチ。プロジェクトを展開するには、このブランチが必要です。
2. flutterflow: FlutterFlow から UI エディタの変更をコードベースに同期するためのブランチ。
3. develop: カスタム コードを修正できるブランチ。

ステップ 2: FlutterFlow でカスタム UI フローを設計および作成する#

ページを作成する#

FlutterFlow で UI を作成します。要件に基づいて UI を作成するには、FlutterFlow ドキュメント に従うことができます。このチュートリアルでは、最小限の要件として、2 つのページがあると仮定します:

1. サインイン ボタンを持つシンプルな HomePage。(サインイン フォームは不要です。ユーザー認証フローは Logto 側で処理されます。詳細は カスタマイズ sie ガイドを参照してください。)

2. ユーザー情報とサインアウト ボタンを表示するための user プロフィール ページ。

FlutterFlow でカスタム認証を有効にする#

App Settings - Authentication ページに移動し、カスタム認証を有効にします。これにより、FlutterFlow プロジェクトに CustomAuthManager クラスと関連ファイルが作成されます。

ステップ 3: FlutterFlow プロジェクトを GitHub と同期する#

カスタム UI を作成して FlutterFlow でカスタム認証を有効にした後は、プロジェクトを GitHub と同期する必要があります。integrations - GitHub ページに移動し、Push to Repository をクリックします。

ステップ 4: CustomAuthManager コードをカスタマイズする#

GitHub リポジトリで develop ブランチに切り替え、flutterflow ブランチから最新の変更をマージします。これにより、ページのウィジェットや、事前に作成された CustomAuthManager クラスを含むすべての UI 変更が develop ブランチに同期されます。

Logto SDK 依存関係をインストールする#

プロジェクトに Logto SDK 依存関係を追加します。

UserProvider クラスを更新する#

UserProvider クラスはユーザー認証状態を管理します。Logto SDK によって提供されるユーザー認証情報を格納するために、プロパティをカスタマイズする必要があります。

認証されたユーザーの id_token クレームを格納するために、型 OpenIdClaims の idToken プロパティを追加します。

OpenIdClaims クラスは Logto SDK で定義されており、OIDC 標準の id_token クレームを認証されたユーザーから提供します。

CustomAuthManager クラスをカスタマイズして Logto クライアントを初期化する#

initialize メソッドは、Logto クライアント インスタンスを初期化し、ローカル ストレージに保持されているユーザー認証ステータスで現在のユーザー ストリームを更新します。

Logto SDK は、ユーザー認証データを安全に保存するために flutter_secure_storage パッケージを使用します。ユーザーが認証されると、id_token クレームがローカル ストレージに保存されます。

Logto クライアントを使用してサインインメソッドを実装する#

LogtoClient.signIn メソッドを呼び出すと、標準的な OIDC 認証フローが開始されます。Logto サインイン ページは WebView で開かれます。WebView ベースの認証フローは flutter_web_auth によってサポートされています。

LogtoClient は認可、トークン交換、ユーザー情報の取得手順を処理します。ユーザーが認証されると、idTokenClaims がローカル ストレージに保存されます。

LogtoClient から idTokenClaims を取得し、現在のユーザー ストリームを更新します。

サインアウト メソッドを実装する#

signOut メソッドは、ローカル ストレージに保存されているユーザー認証データをクリアし、現在のユーザー ストリームを更新します。

認証ユーティリティ メソッドを更新する#

• CustomAuthManager インスタンスにアクセスするための authManager ゲッターを追加します。
• 現在のユーザー UID を取得するための currentUserUid ゲッターを追加します。
• 現在のユーザーデータを取得するための currentUserData ゲッターを追加します。
• Logto クライアント インスタンスにアクセスするための logtoClient ゲッターを追加します。

ステップ 5: UI のサインインおよびサインアウト ボタンを更新する#

ホーム ページ#

ユーザーがサインイン ボタンをクリックしたときに認証フローを開始するには、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 クラスをさらにカスタマイズすることができます。

• ユーザー情報エンドポイント
• リソース アクセス トークンを取得する
• 組織アクセス トークンを取得する