How to build Google Workspace enterprise SSO with Flutter

新しい友達のために:

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

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

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

前提条件

実行中の Logto インスタンス。始めるには紹介ページをご覧ください。
Flutter の基本的な知識。
使用可能な Google Workspace enterprise SSO アカウント。

Create an application in Logto

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

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

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

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

Integrate Flutter SDK

ヒント:

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

インストール

pub.dev
GitHub

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

flutter pub add logto_dart_sdk

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

dependencies:
  logto_dart_sdk: ^3.0.0

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

flutter pub get

SDK の独自バージョンをフォークしたい場合は、GitHub からリポジトリを直接クローンできます。

git clone https://github.com/logto-io/dart

依存関係と構成

SDK バージョンの互換性

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

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 が発生する可能性があります。これを避けるために、

自動バックアップを無効にするには、アプリのマニフェストファイルに移動し、android:allowBackup と android:fullBackupContent 属性を false に設定します。
AndroidManifest.xml
```
<manifest ... >
    ...
    <application
      android:allowBackup="false"
      android:fullBackupContent="false"
      ...
    >
        ...
    </application>
</manifest>
```
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);

  @override
  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;

  @override
  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();
  }

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

  // ...
}

詳細に入る前に、エンドユーザーの体験について簡単に説明します。サインインプロセスは次のように簡略化できます：

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

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

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

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

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

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';

  @override
  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 を追加し、「変更を保存」をクリックします。

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

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

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

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

  @override
  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;
    });
  }

  @override
  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,
          ],
        ),
      ),
    );
  }
}

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

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

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

Add Google Workspace enterprise SSO connector

To simplify access management and gain enterprise-level safeguards for your big clients, connect with Flutter as a federated identity provider. The Logto enterprise SSO connector helps you establish this connection in minutes by allowing several parameter inputs.

To add an enterprise SSO connector, simply follow these steps:

Navigate to Logto console > Enterprise SSO.

SSO page

Click "Add enterprise connector" button and choose your SSO provider type. Choose from prebuilt connectors for Microsoft Entra ID (Azure AD), Google Workspace, and Okta, or create a custom SSO connection using the standard OpenID Connect (OIDC) or SAML protocol.
Provide a unique name (e.g., SSO sign-in for Acme Company).

Select your SSO provider

Configure the connection with your IdP in the "Connection" tab. Check the guides above for each connector types.

SSO connection

Customize the SSO experience and enterprise’s email domain in the "Experience" tab. Users sign in with the SSO-enabled email domain will be redirected to SSO authentication.

SSO experience

Save changes.

Set up Google Cloud Platform

ステップ 1: Google Cloud Platform で新しいプロジェクトを作成する

Google Workspace を認証 (Authentication) プロバイダーとして使用する前に、Google API Console でプロジェクトを設定し、OAuth 2.0 資格情報を取得する必要があります。すでにプロジェクトがある場合は、このステップをスキップできます。そうでない場合は、Google 組織の下で新しいプロジェクトを作成してください。

新しい OIDC 資格情報を作成するには、アプリケーションの同意画面を設定する必要があります。

OAuth 同意画面ページに移動し、Internal ユーザータイプを選択します。これにより、OAuth アプリケーションは組織内のユーザーのみが利用可能になります。

Google Workspace consent screen user type.webp

ページの指示に従って 同意画面 設定を入力します。次の最低限の情報を提供する必要があります：

アプリケーション名: アプリケーションの名前。これは同意画面に表示されます。
サポートメール: アプリケーションのサポートメール。これは同意画面に表示されます。

Google Workspace consent screen settings.webp

アプリケーションの スコープ (Scopes) を設定します。ユーザーのアイデンティティ情報とメールアドレスを IdP から適切に取得するために、Logto SSO コネクターは IdP から次のスコープを付与する必要があります：

Google Workspace consent screen scopes.webp

openid: このスコープは OIDC 認証 (Authentication) に必要です。ID トークンを取得し、IdP の userInfo エンドポイントにアクセスするために使用されます。
profile: このスコープはユーザーの基本的なプロフィール情報にアクセスするために必要です。
email: このスコープはユーザーのメールアドレスにアクセスするために必要です。

保存 ボタンをクリックして同意画面の設定を保存します。

ステップ 3: 新しい OAuth 資格情報を作成する

Credentials ページに移動し、Create Credentials ボタンをクリックします。ドロップダウンメニューから OAuth client ID オプションを選択して、アプリケーション用の新しい OAuth 資格情報を作成します。

Google Workspace create credentials.webp

次の情報を入力して OAuth 資格情報の設定を続行します：

Google Workspace credentials config.webp

アプリケーションタイプとして Web application を選択します。
クライアントアプリケーションの Name を入力します。例えば、Logto SSO Connector です。これにより、将来資格情報を識別するのに役立ちます。
Authorized redirect URIs に Logto のコールバック URI を入力します。これは、Google が認証に成功した後にユーザーのブラウザをリダイレクトする URI です。ユーザーが IdP での認証に成功した後、IdP は認可コードと共にユーザーのブラウザをこの指定された URI にリダイレクトします。Logto は、この URI から受け取った認可コードに基づいて認証プロセスを完了します。
Authorized JavaScript origins に Logto コールバック URI のオリジンを入力します。これにより、Logto アプリケーションのみが Google OAuth サーバーにリクエストを送信できるようになります。
Create ボタンをクリックして OAuth 資格情報を作成します。

ステップ 4: クライアント資格情報で Logto コネクターを設定する

OAuth 資格情報の作成に成功すると、クライアント ID とクライアントシークレットが表示されたプロンプトモーダルが表示されます。

Google Workspace client credentials.webp

Client ID と Client secret をコピーして、Logto の SSO コネクターの Connection タブの対応するフィールドに入力します。

これで、Logto に Google Workspace SSO コネクターを正常に設定できました。

ステップ 5: 追加のスコープ (オプション)

Scope フィールドを使用して、OAuth リクエストに追加のスコープを追加します。これにより、Google OAuth サーバーからより多くの情報を要求できます。詳細については、 Google OAuth Scopes ドキュメントを参照してください。

カスタムスコープ設定に関係なく、Logto は常に openid、profile、および email スコープを IdP に送信します。これは、Logto がユーザーのアイデンティティ情報とメールアドレスを適切に取得できるようにするためです。

ステップ 6: メールドメインを設定し、SSO コネクターを有効にする

Logto のコネクターの SSO experience タブで、組織の email domains を提供してください。これにより、これらのユーザーに対する認証 (Authentication) 方法として SSO コネクターが有効になります。

指定されたドメインのメールアドレスを持つユーザーは、唯一の認証 (Authentication) 方法として SSO コネクターを使用するようにリダイレクトされます。

Google Workspace SSO コネクターの詳細については、 Google OpenID Connector をご確認ください。

Save your configuration

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

You don’t need to configure enterprise connectors individually, Logto simplifies SSO integration into your applications with just one click.

Navigate to: Console > Sign-in experience > Sign-up and sign-in.
Enable the "Enterprise SSO" toggle.
Save changes.

Once enabled, a "Single Sign-On" button will appear on your sign-in page. Enterprise users with SSO-enabled email domains can access your services using their enterprise identity providers (IdPs).

Auto detect SSO sign-in via email domain

To learn more about the SSO user experience, including SP-initiated SSO and IdP-initiated SSO, refer to User flows: Enterprise SSO.

Testing and Validation

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

Create an application in Logto​

Integrate Flutter SDK​

インストール​

依存関係と構成​

SDK バージョンの互換性​

flutter_secure_storage のセットアップ​

Android バージョンの設定​

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

flutter_web_auth_2 のセットアップ​

統合​

LogtoClient を初期化する​

サインインを実装する​

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

サインアウトを実装する​

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

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

Add Google Workspace enterprise SSO connector​

Set up Google Cloud Platform​

ステップ 1: Google Cloud Platform で新しいプロジェクトを作成する​

ステップ 2: アプリケーションの同意画面を設定する​

ステップ 3: 新しい OAuth 資格情報を作成する​

ステップ 4: クライアント資格情報で Logto コネクターを設定する​

ステップ 5: 追加のスコープ (オプション)​

ステップ 6: メールドメインを設定し、SSO コネクターを有効にする​

Save your configuration​

Enable Google Workspace enterprise SSO connector in Sign-in Experience​

Testing and Validation​

Further readings​