メインコンテンツまでスキップ
新しい友達のために:

Logto は、モダンなアプリや SaaS 製品向けに設計された Auth0 の代替です。 Cloudオープンソース の両方のサービスを提供し、アイデンティティと管理 (IAM) システムを迅速に立ち上げるのに役立ちます。認証 (Authentication)、認可 (Authorization)、マルチテナント管理を すべて一つに まとめて楽しんでください。

Logto Cloud で無料の開発テナントから始めることをお勧めします。これにより、すべての機能を簡単に探索できます。

この記事では、FlutterLogto を使用して、Google サインイン体験(ユーザー認証 (Authentication))を迅速に構築する手順を説明します。

前提条件

  • 稼働中の Logto インスタンス。紹介ページ をチェックして始めてください。
  • Flutter の基本的な知識。
  • 使用可能な Google アカウント。

Logto でアプリケーションを作成する

Logto は OpenID Connect (OIDC) 認証 (Authentication) と OAuth 2.0 認可 (Authorization) に基づいています。これは、複数のアプリケーション間でのフェデレーテッドアイデンティティ管理をサポートし、一般的にシングルサインオン (SSO) と呼ばれます。

あなたの ネイティブアプリ アプリケーションを作成するには、次の手順に従ってください:

  1. Logto コンソール を開きます。「Get started」セクションで、「View all」リンクをクリックしてアプリケーションフレームワークのリストを開きます。あるいは、Logto Console > Applications に移動し、「Create application」ボタンをクリックします。 Get started
  2. 開いたモーダルで、左側のクイックフィルターチェックボックスを使用して、利用可能なすべての "ネイティブアプリ" フレームワークをフィルタリングするか、"ネイティブアプリ" セクションをクリックします。"Flutter" フレームワークカードをクリックして、アプリケーションの作成を開始します。 Frameworks
  3. アプリケーション名を入力します。例:「Bookstore」と入力し、「Create application」をクリックします。

🎉 タダーン!Logto で最初のアプリケーションを作成しました。詳細な統合ガイドを含むお祝いページが表示されます。ガイドに従って、アプリケーションでの体験を確認してください。

Flutter SDK を統合する

ヒント:
  • SDK パッケージは pub.dev と Logto の GitHub リポジトリ で利用可能です。
  • サンプルプロジェクトは Flutter material を使用して構築されています。pub.dev で見つけることができます。
  • この SDK は iOS、Android、Web プラットフォームの Flutter アプリケーションと互換性があります。他のプラットフォームとの互換性はテストされていません。

インストール

logto_dart_sdk package を pub パッケージマネージャーを使用して直接インストールできます。 プロジェクトのルートで次のコマンドを実行してください:

flutter pub add logto_dart_sdk

または、次の内容を pubspec.yaml ファイルに追加してください:

dependencies:
logto_dart_sdk: ^3.0.0

その後、次を実行します:

flutter pub get

依存関係と構成

SDK バージョンの互換性

Logto SDK バージョンDart SDK バージョンDart 3.0 互換性
< 2.0.0>= 2.17.6 < 3.0.0false
>= 2.0.0 < 3.0.0>= 3.0.0true
>= 3.0.0>= 3.6.0true

flutter_secure_storage のセットアップ

この SDK は、クロスプラットフォームの永続的なセキュアトークンストレージを実装するために flutter_secure_storage を使用しています。

  • iOS では Keychain が使用されます。
  • Android では AES 暗号化が使用されます。

Android バージョンの設定

プロジェクトの android/app/build.gradle ファイルで android:minSdkVersion>= 18 に設定します。

build.gradle
  android {
...

defaultConfig {
...
minSdkVersion 18
...
}
}

Android での自動バックアップの無効化

デフォルトでは、Android は Google Drive にデータをバックアップします。これにより、例外 java.security.InvalidKeyException:Failed が発生する可能性があります。これを避けるために、

  1. 自動バックアップを無効にするには、アプリのマニフェストファイルに移動し、android:allowBackupandroid:fullBackupContent 属性を false に設定します。

    AndroidManifest.xml
    <manifest ... >
    ...
    <application
    android:allowBackup="false"
    android:fullBackupContent="false"
    ...
    >
    ...
    </application>
    </manifest>

  2. FlutterSecureStorage から sharedprefs を除外します。

    アプリのために android:fullBackupContent を無効にするのではなく保持する必要がある場合は、バックアップから sharedprefs ディレクトリを除外できます。 詳細は Android ドキュメント を参照してください。

    AndroidManifest.xml ファイルで、次の例のように <application> 要素に android:fullBackupContent 属性を追加します。この属性は、バックアップルールを含む XML ファイルを指します。

    AndroidManifest.xml
    <application ...
    android:fullBackupContent="@xml/backup_rules">
    </application>

    res/xml/ ディレクトリに @xml/backup_rules という名前の XML ファイルを作成します。このファイルに <include><exclude> 要素を使用してルールを追加します。次のサンプルは、device.xml を除くすべての共有設定をバックアップします:

    @xml/backup_rules
    <?xml version="1.0" encoding="utf-8"?>
    <full-backup-content>
    <exclude domain="sharedpref" path="FlutterSecureStorage"/>
    </full-backup-content>

詳細については、flutter_secure_storage を確認してください。

flutter_web_auth_2 のセットアップ

この SDK は、Logto でユーザーを認証 (Authentication) するために flutter_web_auth_2 を使用しています。このパッケージは、システム WebView またはブラウザを使用して Logto でユーザーを認証 (Authentication) するための簡単な方法を提供します。

このプラグインは、iOS 12+ および macOS 10.15+ では ASWebAuthenticationSession を、iOS 11 では SFAuthenticationSession を、Android では Chrome Custom Tabs を使用し、Web では新しいウィンドウを開きます。

  • iOS: 追加のセットアップは不要

  • Android: Android でコールバック URL を登録

    Logto のサインイン Web ページからコールバック URL をキャプチャするために、サインイン redirectUri を AndroidManifest.xml ファイルに登録する必要があります。

    AndroidManifest.xml
      <manifest>
    <application>
    <activity
    android:name="com.linusu.flutter_web_auth_2.CallbackActivity"
    android:exported="true">
    <intent-filter android:label="flutter_web_auth_2">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="YOUR_CALLBACK_URL_SCHEME_HERE" />
    </intent-filter>
    </activity>
    </application>
    </manifest>
  • Web ブラウザ: コールバック URL を処理するエンドポイントを作成

    Web プラットフォームを使用している場合、コールバック URL を処理し、postMessage API を使用してアプリケーションに返すエンドポイントを作成する必要があります。

    callback.html
    <!doctype html>
    <title>Authentication complete</title>
    <p>認証 (Authentication) が完了しました。自動的に閉じない場合は、ウィンドウを閉じてください。</p>
    <script>
    function postAuthenticationMessage() {
    const message = {
    'flutter-web-auth-2': window.location.href,
    };

    if (window.opener) {
    window.opener.postMessage(message, window.location.origin);
    window.close();
    } else if (window.parent && window.parent !== window) {
    window.parent.postMessage(message, window.location.origin);
    } else {
    localStorage.setItem('flutter-web-auth-2', window.location.href);
    window.close();
    }
    }

    postAuthenticationMessage();
    </script>

詳細については、flutter_web_auth_2 パッケージのセットアップガイドを確認してください。

統合

LogtoClient を初期化する

logto_dart_sdk パッケージをインポートし、アプリケーションのルートで LogtoClient インスタンスを初期化します。

lib/main.dart
import 'package:logto_dart_sdk/logto_dart_sdk.dart';
import 'package:http/http.dart' as http;

void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);


Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Logto Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;


State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
late LogtoClient logtoClient;

void render() {
// state change
}

// LogtoConfig
final logtoConfig = const LogtoConfig(
endpoint: "<your-logto-endpoint>",
appId: "<your-app-id>"
);

void _init() {
logtoClient = LogtoClient(
config: logtoConfig,
httpClient: http.Client(), // Optional http client
);
render();
}


void initState() {
super.initState();
_init();
}

// ...
}

サインインを実装する

詳細に入る前に、エンドユーザー体験の概要を簡単にご紹介します。サインインプロセスは次のようにシンプルにまとめられます:

  1. アプリがサインインメソッドを呼び出します。
  2. ユーザーは Logto のサインインページにリダイレクトされます。ネイティブアプリの場合は、システムブラウザが開かれます。
  3. ユーザーがサインインし、アプリ(リダイレクト URI として設定)に戻されます。

リダイレクトベースのサインインについて

  1. この認証 (Authentication) プロセスは OpenID Connect (OIDC) プロトコルに従い、Logto はユーザーのサインインを保護するために厳格なセキュリティ対策を講じています。
  2. 複数のアプリがある場合、同じアイデンティティプロバイダー (Logto) を使用できます。ユーザーがあるアプリにサインインすると、Logto は別のアプリにアクセスした際に自動的にサインインプロセスを完了します。

リダイレクトベースのサインインの理論と利点について詳しく知るには、Logto サインイン体験の説明を参照してください。


始める前に、アプリケーションのために管理コンソールでリダイレクト URI を追加する必要があります。

Logto コンソールのアプリケーション詳細ページに切り替えましょう。リダイレクト URI io.logto://callback を追加し、「変更を保存」をクリックします。

Logto コンソールのリダイレクト URI
  • iOS の場合、ASWebAuthenticationSession クラスがリダイレクト URI を登録しているかどうかに関係なくリダイレクト URI をリッスンするため、リダイレクト URI スキームは実際には重要ではありません。
  • Android の場合、リダイレクト URI スキームは AndroidManifest.xml ファイルに登録する必要があります。

リダイレクト URI が設定されたら、ページにサインインボタンを追加し、logtoClient.signIn API を呼び出して Logto サインインフローを開始します:

lib/main.dart
class _MyHomePageState extends State<MyHomePage> {
// ...
final redirectUri = 'io.logto://callback';


Widget build(BuildContext context) {
// ...

Widget signInButton = TextButton(
onPressed: () async {
await logtoClient.signIn(redirectUri);
render();
},
child: const Text('Sign In'),
);

return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SelectableText('My Demo App'),
signInButton,
],
),
),
);
}
}

サインアウトを実装する

Logto コンソールのアプリケーション詳細ページに切り替えましょう。ポストサインアウトリダイレクト URI io.logto://callback を追加し、「変更を保存」をクリックします。

Logto コンソールのポストサインアウトリダイレクト URI

ポストサインアウトリダイレクト URI は、サインアウト後にリダイレクトする場所を示す OAuth 2.0 の概念です。

次に、メインページにサインアウトボタンを追加して、ユーザーがアプリケーションからサインアウトできるようにします。

lib/main.dart
class _MyHomePageState extends State<MyHomePage> {
// ...

final postSignOutRedirectUri = 'io.logto//home';


Widget build(BuildContext context) {
// ...

Widget signOutButton = TextButton(
onPressed: () async {
await logtoClient.signOut(postSignOutRedirectUri);
render();
},
child: const Text('Sign Out'),
);

return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SelectableText('My Demo App'),
signInButton,
signOutButton,
],
),
),
);
}
}

認証 (Authentication) ステータスを処理する

Logto SDK は、認証 (Authentication) ステータスを確認するための非同期メソッドを提供します。このメソッドは logtoClient.isAuthenticated です。このメソッドは、ユーザーが認証 (Authentication) されている場合は true を、そうでない場合は false を返します。

この例では、認証 (Authentication) ステータスに基づいてサインインボタンとサインアウトボタンを条件付きでレンダリングします。次に、状態変更を処理するために Widget の render メソッドを更新しましょう:

lib/main.dart
class _MyHomePageState extends State<MyHomePage> {
// ...
bool? isAuthenticated = false;

void render() {
setState(() async {
isAuthenticated = await logtoClient.isAuthenticated;
});
}


Widget build(BuildContext context) {
// ...

return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SelectableText('My Demo App'),
isAuthenticated == true ? signOutButton : signInButton,
],
),
),
);
}
}

チェックポイント: アプリケーションをテストする

これで、アプリケーションをテストできます:

  1. アプリケーションを実行すると、サインインボタンが表示されます。
  2. サインインボタンをクリックすると、SDK がサインインプロセスを初期化し、Logto のサインインページにリダイレクトされます。
  3. サインインすると、アプリケーションに戻り、サインアウトボタンが表示されます。
  4. サインアウトボタンをクリックして、トークンストレージをクリアし、サインアウトします。

Google コネクターを追加する

迅速なサインインを有効にし、ユーザーコンバージョンを向上させるために、アイデンティティプロバイダー (IdP) として Flutter を接続します。Logto ソーシャルコネクターは、いくつかのパラメーター入力を許可することで、この接続を数分で確立するのに役立ちます。

ソーシャルコネクターを追加するには、次の手順に従ってください:

  1. Console > Connectors > Social Connectors に移動します。
  2. 「Add social connector」をクリックし、「Google」を選択します。
  3. README ガイドに従い、必要なフィールドを完了し、設定をカスタマイズします。
Connector tab
注記:

インプレースコネクターガイドに従っている場合は、次のセクションをスキップできます。

Google OAuth アプリ を設定する

ステップ 1: Google Auth Platform でプロジェクトを作成する

Google を認証 (Authentication) プロバイダーとして利用する前に、Google Cloud Console でプロジェクトを作成し、OAuth 2.0 認証情報を取得する必要があります。すでにプロジェクトがある場合は、このステップをスキップできます。

  1. Google Cloud Console にアクセスし、Google アカウントでサインインします。
  2. 上部メニューバーの プロジェクトを選択 ボタンをクリックし、新しいプロジェクト ボタンをクリックしてプロジェクトを作成します。
  3. 作成したプロジェクトで、API とサービス > OAuth 同意画面 に移動し、アプリを設定します:
    • アプリ情報:同意画面に表示される アプリケーション名サポートメール を入力します
    • オーディエンス (Audience):希望するオーディエンスタイプを選択します:
      • 内部 - 組織内の Google Workspace ユーザーのみ
      • 外部 - すべての Google ユーザー向け(本番利用には検証が必要)
    • 連絡先情報:Google からプロジェクトの変更通知を受け取るためのメールアドレスを入力します
    • Google のポリシーに同意します にチェックを入れて基本設定を完了します
  4. 必要に応じて ブランディング セクションで製品情報を編集し、アプリロゴ をアップロードできます。OAuth 同意画面に表示され、ユーザーがアプリを認識しやすくなります。
ヒント:

外部 オーディエンスタイプを選択した場合、開発中はテストユーザーを追加し、本番利用時にはアプリを公開する必要があります。

ステップ 2: OAuth 2.0 認証情報を作成する

Google Cloud Console の 認証情報 ページに移動し、アプリケーション用の OAuth 認証情報を作成します。

  1. 認証情報を作成 > OAuth クライアント ID をクリックします。
  2. アプリケーションの種類として ウェブアプリケーション を選択します。
  3. OAuth クライアントの 名前 を入力します。これは認証情報の識別用で、エンドユーザーには表示されません。
  4. 許可済み URI を設定します:
    • 許可済み JavaScript オリジン:Logto インスタンスのオリジン(例:https://your-logto-domain.com)を追加します
    • 許可済みリダイレクト URI:Logto の Callback URI を追加します(Logto Google コネクターからコピー)
  5. 作成 をクリックして OAuth クライアントを生成します。

ステップ 3: Logto コネクターに認証情報を設定する

OAuth クライアント作成後、Google から認証情報が表示されます:

  1. クライアント ID をコピーし、Logto の clientId フィールドに貼り付けます
  2. クライアントシークレット をコピーし、Logto の clientSecret フィールドに貼り付けます
  3. Logto で 保存して完了 をクリックし、アイデンティティシステムと Google を接続します
警告:

クライアントシークレットは安全に保管し、クライアントサイドのコードで絶対に公開しないでください。漏洩した場合は直ちに新しいものを発行してください。

ステップ 4: スコープを設定する

スコープ (Scope) は、アプリがユーザーから要求する権限を定義し、Google アカウントからどのデータにアクセスできるかを制御します。

Google Cloud Console でスコープを設定する

  1. API とサービス > OAuth 同意画面 > スコープ に移動します。
  2. スコープを追加または削除 をクリックし、アプリに必要なスコープのみを選択します:
    • 認証 (Authentication)(必須)
      • https://www.googleapis.com/auth/userinfo.email
      • https://www.googleapis.com/auth/userinfo.profile
      • openid
    • API アクセス(任意):アプリに必要な追加スコープを追加します(例:Drive、Calendar、YouTube)。利用可能なサービスは Google API ライブラリ で確認できます。基本権限以外の Google API へアクセスする場合は、まず Google API ライブラリで該当 API(例:Google Drive API、Gmail API、Calendar API)を有効化してください。
  3. 更新 をクリックして選択を確定します。
  4. 保存して続行 をクリックして変更を適用します。

Logto でスコープを設定する

ニーズに応じて、以下のいずれかの方法を選択してください:

オプション 1: 追加の API スコープが不要な場合

  • Logto Google コネクターの Scopes フィールドは空欄のままにします。
  • デフォルトで openid profile email スコープがリクエストされ、Logto が基本的なユーザー情報を正しく取得できます。

オプション 2: サインイン時に追加スコープをリクエストする場合

  • 必要なすべてのスコープを Scopes フィールドにスペース区切りで入力します。
  • ここに記載したスコープがデフォルトを上書きするため、必ず認証 (Authentication) 用スコープ(https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile openid)を含めてください。
  • スコープはフル URL で記載します。例:https://www.googleapis.com/auth/calendar.readonly

オプション 3: 後からインクリメンタルにスコープをリクエストする場合

  • ユーザーがサインインした後、必要に応じてフェデレーテッドソーシャル認可 (Authorization) フローを再実行し、ユーザーのトークンセットを更新することで追加スコープをリクエストできます。
  • これらの追加スコープは Logto Google コネクターの Scopes フィールドに記載する必要はなく、Logto の Social Verification API を通じて実現できます。

これらの手順に従うことで、Logto Google コネクターはアプリに必要な権限だけをリクエストします。

ヒント:

アプリがこれらのスコープをリクエストして Google API へアクセス・操作する場合は、Logto Google コネクターで 永続的な API アクセス用にトークンを保存 を有効にしてください。詳細は次のセクションを参照してください。

ステップ 5: 認証 (Authentication) プロンプトをカスタマイズする

Logto で Prompts を設定し、ユーザー認証 (Authentication) 体験を制御できます。Prompts は、必要なユーザーインタラクションの種類を指定する文字列配列です:

  • none - 認可 (Authorization) サーバーは認証 (Authentication) や同意画面を表示しません。ユーザーがすでに認証 (Authentication) 済みかつ要求されたスコープに事前同意していない場合はエラーを返します。既存の認証 (Authentication) や同意の有無を確認する用途です。
  • consent - 認可 (Authorization) サーバーはクライアントに情報を返す前にユーザーに同意を求めます。Google API への オフラインアクセス を有効にするには必須です。
  • select_account - 認可 (Authorization) サーバーはユーザーにアカウント選択を促します。複数の Google アカウントを持つユーザーが認証 (Authentication) に使用するアカウントを選択できます。

ステップ 6: 一般設定

Google への接続自体には影響しませんが、エンドユーザーの認証 (Authentication) 体験に関わる一般的な設定です。

プロフィール情報の同期

Google コネクターでは、ユーザー名やアバターなどのプロフィール情報の同期ポリシーを設定できます。選択肢は以下の通りです:

  • サインアップ時のみ同期:ユーザーが初回サインインしたときにプロフィール情報を取得します。
  • サインイン時に常に同期:ユーザーがサインインするたびにプロフィール情報を更新します。

Google API へのトークン保存(任意)

Google API へアクセスし、ユーザーの認可 (Authorization) のもとで操作を行いたい場合(ソーシャルサインインやアカウント連携経由)、Logto は特定の API スコープを取得し、トークンを保存する必要があります。

  1. 必要なスコープを Google Cloud Console の OAuth 同意画面設定と Logto Google コネクターに追加します。
  2. Logto Google コネクターで 永続的な API アクセス用にトークンを保存 を有効にします。Logto は Google のアクセス トークン (Access token) およびリフレッシュ トークン (Refresh token) を Secret Vault に安全に保存します。
  3. リフレッシュ トークン (Refresh token) を確実に取得するため、Logto Google コネクターの設定を以下のようにします:
    • Promptsconsent を含める
    • オフラインアクセス を有効にする
警告:

Logto の Scope フィールドに offline_access を追加する必要はありません。追加するとエラーになる場合があります。Google ではオフラインアクセスが有効な場合、自動的に access_type=offline が使用されます。

ステップ 7: Google One Tap を有効にする(任意)

Google One Tap は、ユーザーが Google アカウントでポップアップインターフェースを使ってウェブサイトにサインインできる安全かつシームレスな方法です。

Google コネクターのセットアップが完了すると、コネクター詳細ページに Google One Tap 用のカードが表示されます。スイッチを切り替えて Google One Tap を有効にします。

Google One Tap の設定オプション

  • 条件を満たせば自動で認証情報を選択 - 特定条件 を満たす場合、Google アカウントで自動的にサインインします
  • ユーザーが外側をクリック/タップしたらプロンプトをキャンセル - ユーザーがプロンプト外をクリックまたはタップした場合、Google One Tap プロンプトを閉じます。無効の場合、ユーザーは閉じるボタンをクリックしてプロンプトを閉じる必要があります。
  • ITP ブラウザでアップグレードされた One Tap UX を有効化 - Intelligent Tracking Prevention (ITP) ブラウザでアップグレードされた Google One Tap ユーザー体験を有効にします。詳細は こちらのドキュメント を参照してください。
警告:

OAuth クライアント設定の 許可済み JavaScript オリジン セクションにドメインを追加してください。追加しないと Google One Tap は表示できません。

Google One Tap の重要な制限事項

永続的な API アクセス用にトークンを保存Google One Tap の両方を有効にしても、アクセス トークン (Access token) やリクエストしたスコープは自動的には取得できません。

Google One Tap サインイン(標準の「Google でサインイン」ボタンとは異なり)は、OAuth アクセス トークン (Access token) を発行しません。ID トークン (ID token)(署名付き JWT)だけが返され、ユーザーのアイデンティティは検証できますが、API アクセス権は付与されません。

Google One Tap ユーザーで Google API へアクセスするには、Logto の Social Verification API を使って、ユーザーが Google One Tap でサインインした後にフェデレーテッドソーシャル認可 (Authorization) フローを再実行してください。これにより、必要な追加スコープをリクエストし、ユーザーのトークンセットを更新できます。Logto Google コネクターのスコープ事前設定は不要です。この方法によりインクリメンタル認可 (Authorization) が可能となり、アプリが実際に必要とするタイミングでのみ追加権限の同意をユーザーに求められます。

Google One Tap の制限事項 については公式ドキュメントもご参照ください。

ステップ 8: アプリのテストと公開

内部アプリの場合

Google の オーディエンス (Audience) タイプが 内部 の場合、アプリは組織内の Google Workspace ユーザーのみ利用可能です。組織の任意のアカウントでテストできます。

外部アプリの場合

オーディエンス (Audience) タイプが 外部 の場合:

  1. 開発中OAuth 同意画面 > テストユーザー に移動し、テストユーザーのメールアドレスを追加します。これらのユーザーのみがアプリでサインインできます。
  2. 本番利用時:OAuth 同意画面セクションで アプリを公開 をクリックし、すべての Google アカウントユーザーが利用できるようにします。
注記:

センシティブまたは制限付きスコープを持つアプリは、公開前に Google の検証が必要な場合があります。このプロセスには数週間かかることがあります。

設定を保存する

Logto コネクター設定エリアで必要な値をすべて記入したことを確認してください。「保存して完了」または「変更を保存」をクリックすると、Google コネクターが利用可能になります。

サインイン体験で Google コネクターを有効にする

ソーシャルコネクターを正常に作成したら、サインイン体験で「Google で続行」ボタンとして有効にすることができます。

  1. Console > サインイン体験 > サインアップとサインイン に移動します。
  2. (オプション)ソーシャルログインのみが必要な場合は、サインアップ識別子に「該当なし」を選択します。
  3. 設定済みの Google コネクターを「ソーシャルサインイン」セクションに追加します。
サインイン体験タブ

テストと検証

Flutter アプリに戻ります。これで Google を使用してサインインできるはずです。お楽しみください!

さらなる読み物

エンドユーザーフロー:Logto は、MFA やエンタープライズシングルサインオン (SSO) を含む即時使用可能な認証 (Authentication) フローを提供し、アカウント設定、セキュリティ検証、マルチテナント体験の柔軟な実装のための強力な API を備えています。

認可 (Authorization):認可 (Authorization) は、ユーザーが認証 (Authentication) された後に行えるアクションやアクセスできるリソースを定義します。ネイティブおよびシングルページアプリケーションの API を保護し、ロールベースのアクセス制御 (RBAC) を実装する方法を探ります。

組織 (Organizations):特にマルチテナント SaaS や B2B アプリで効果的な組織機能は、テナントの作成、メンバー管理、組織レベルの RBAC、およびジャストインタイムプロビジョニングを可能にします。

顧客 IAM シリーズ:顧客(または消費者)アイデンティティとアクセス管理に関する連続ブログ投稿で、101 から高度なトピックまでを網羅しています。