How to build Microsoft Entra ID OIDC enterprise SSO with Flutter

新しい友達のために:

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

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

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

前提条件

稼働中の Logto インスタンス。紹介ページをチェックして始めてください。
Flutter の基本的な知識。
使用可能な Microsoft Entra ID OIDC 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 Microsoft Entra ID OIDC enterprise SSO connector

アクセス管理を簡素化し、大規模なクライアント向けにエンタープライズレベルの保護を得るために、Flutter をフェデレーテッドアイデンティティプロバイダーとして接続します。Logto エンタープライズシングルサインオン (SSO) コネクターは、いくつかのパラメーター入力を許可することで、この接続を数分で確立するのに役立ちます。

エンタープライズ SSO コネクターを追加するには、次の手順に従ってください：

Logto コンソール > エンタープライズ SSO に移動します。

「エンタープライズコネクターを追加」ボタンをクリックし、SSO プロバイダーのタイプを選択します。Microsoft Entra ID (Azure AD)、Google Workspace、Okta の事前構築されたコネクターから選択するか、標準の OpenID Connect (OIDC) または SAML プロトコルを使用してカスタム SSO 接続を作成します。
一意の名前を指定します（例：Acme Company の SSO サインイン）。

「接続」タブで IdP と接続を構成します。各コネクタータイプのガイドを上記で確認してください。

「体験 (Experience)」タブで SSO 体験と企業の メールドメイン をカスタマイズします。SSO 対応のメールドメインでサインインするユーザーは、SSO 認証にリダイレクトされます。

変更を保存します。

Set up Azure AD SSO application

ステップ 1: Microsoft EntraID OIDC アプリケーションを作成する

Microsoft Entra 管理センターにアクセスし、管理者としてサインインします。
Identity > Applications > App registrations に移動します。

New registration を選択します。
アプリケーション名を入力し、アプリケーションに適したアカウントタイプを選択します。
アプリケーションプラットフォームとして Web を選択します。
Logto の SSO 設定ページから redirect URI をコピーして貼り付けます。redirect URI は、ユーザーが Microsoft Entra ID で認証された後にリダイレクトされる URL です。

Register をクリックしてアプリケーションを作成します。

ステップ 2: Logto で Microsoft Entra ID OIDC SSO を設定する

Microsoft Entra OIDC アプリケーションの作成が完了したら、IdP 設定情報を Logto に提供する必要があります。Logto コンソールの Connection タブに移動し、以下の設定を入力してください：

クライアント ID：Microsoft Entra によって OIDC アプリケーションに割り当てられた一意の識別子です。この識別子は、OIDC フロー中に Logto がアプリケーションを識別し認証するために使用します。アプリケーションの概要ページで Application (client) ID として確認できます。

クライアントシークレット：新しいクライアントシークレットを作成し、その値を Logto にコピーしてください。このシークレットは、OIDC アプリケーションの認証および Logto と IdP 間の通信のセキュリティ確保に使用されます。

発行者 (Issuer)：発行者 URL は、IdP の一意の識別子であり、OIDC アイデンティティプロバイダーの場所を指定します。これは OIDC 設定の重要な部分であり、Logto が必要なエンドポイントを発見するのに役立ちます。

これらの OIDC エンドポイントを手動で入力する代わりに、Logto は発行者 URL を利用して IdP のディスカバーエンドポイントにアクセスし、必要な設定や IdP エンドポイントを自動的に取得します。

発行者 URL を取得するには、アプリケーション概要ページの Endpoints セクションで確認できます。

OpenID Connect metadata document エンドポイントを見つけ、その URL から 末尾の .well-known/openid-configuration を除いた部分 をコピーしてください。Logto は OIDC 設定取得時に自動的に .well-known/openid-configuration を発行者 URL に付加します。

スコープ (Scope)（任意）：Logto はすべてのリクエストに必要なスコープ（openid、profile、email）を自動的に含めます。アプリケーションが IdP から追加の権限やアクセスレベルを必要とする場合は、スペース区切りで追加のスコープを指定できます。

保存 をクリックして設定プロセスを完了してください。

ステップ 3: 追加スコープ（オプション）

スコープ (Scopes) は、アプリがユーザーから要求する権限 (Permissions) を定義し、アプリが Microsoft Entra ID アカウントからアクセスできるデータを制御します。Microsoft Graph の権限 (Permissions) を要求するには、両方の側で設定が必要です：

Microsoft Entra 管理センターで：

Microsoft Entra ID > アプリ登録 に移動し、アプリケーションを選択します。
API 権限 > 権限の追加 > Microsoft Graph > 委任された権限 に進みます。
アプリに必要な権限 (Permissions) のみを選択します：
- OpenID 権限 (Permissions)：
  - openid（必須）- ユーザーのサインイン
  - profile（必須）- ユーザーの基本プロフィールの表示
  - email（必須）- ユーザーのメールアドレスの表示
  - offline_access（オプション）- Logto コネクターで Microsoft API への永続的なアクセス用のトークン保存を有効にし、Microsoft Graph API への長期間アクセスのためにリフレッシュトークン (Refresh token) を取得する必要がある場合のみ必要です。
- API アクセス（オプション）：アプリに必要な追加の権限 (Permissions) を追加します。一般的な Microsoft Graph 権限 (Permissions) には Mail.Read、Calendars.Read、Files.Read などがあります。利用可能な権限 (Permissions) については Microsoft Graph permissions reference を参照してください。
権限の追加 をクリックして選択を確定します。
アプリが特定の権限 (Permissions) に管理者の同意が必要な場合は、[組織名] のために管理者の同意を付与 をクリックします。

Logto Microsoft Entra ID コネクターで：

Logto は、基本的なユーザーアイデンティティ情報を取得するために openid、profile、email スコープ (Scopes) を自動的に含めます。基本的なユーザー情報のみが必要な場合は、Scopes フィールドを空白のままにできます。
Microsoft API への永続的なアクセス用にトークンを保存する場合は、Scopes フィールドに offline_access を追加します。このスコープ (Scope) により、長期間の API アクセス用のリフレッシュトークン (Refresh token) が有効になります。
Microsoft Graph からさらに多くのデータを要求する場合は、Scopes フィールドに追加のスコープ (Scopes)（スペース区切り）を追加します。標準のスコープ名を使用してください。例：User.Read Mail.Read Calendars.Read

ヒント:

アプリがこれらのスコープ (Scopes) を要求して Microsoft Graph API へアクセスし操作を行う場合は、Logto Microsoft Entra ID コネクターで Microsoft API への永続的なアクセス用のトークン保存 を有効にしてください。詳細は次のセクションを参照してください。

ステップ 4: Microsoft API へアクセスするためのトークンを保存する（オプション）

Microsoft Graph APIs へアクセスし、ユーザーの認可 (Authorization) で操作を実行したい場合、Logto は特定の API スコープとトークンを取得・保存する必要があります。

Microsoft Entra 管理センターの API 権限設定および Logto Microsoft Entra ID コネクターで必要なスコープを追加します。
Logto Microsoft Entra ID コネクターで 永続的な API アクセスのためにトークンを保存 を有効にします。Logto は Microsoft のアクセストークンおよびリフレッシュトークンを Secret Vault に安全に保存します。
リフレッシュトークンが返されるようにするには、Microsoft Entra ID アプリケーションの権限に offline_access スコープを追加し、Logto Microsoft Entra ID コネクターのスコープにも含めてください。このスコープにより、アプリケーションは長期間リソースへのアクセスを維持できます。

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

コネクターの体験 (Experience) タブで、組織のメール domains を入力してください。これにより、これらのユーザーに対して SSO コネクターが認証 (Authentication) 方法として有効になります。

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

Save your configuration

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

エンタープライズコネクターを個別に設定する必要はありません。Logto は、ワンクリックでアプリケーションに SSO 統合を簡素化します。

移動先： Console > サインイン体験 > サインアップとサインイン。
「エンタープライズシングルサインオン (SSO)」トグルを有効にします。
変更を保存します。

有効にすると、サインインページに「シングルサインオン (SSO)」ボタンが表示されます。SSO が有効なメールドメインを持つエンタープライズユーザーは、エンタープライズアイデンティティプロバイダー (IdP) を使用してサービスにアクセスできます。

SP 主導の SSO や IdP 主導の SSO を含む SSO ユーザー体験について詳しくは、ユーザーフロー：エンタープライズ SSO を参照してください。

Testing and Validation

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

Create an application in Logto​

Integrate Flutter SDK​

インストール​

依存関係と構成​

SDK バージョンの互換性​

flutter_secure_storage のセットアップ​

Android バージョンの設定​

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

flutter_web_auth_2 のセットアップ​

統合​

LogtoClient を初期化する​

サインインを実装する​

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

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

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

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

Add Microsoft Entra ID OIDC enterprise SSO connector​

Set up Azure AD SSO application​

ステップ 1: Microsoft EntraID OIDC アプリケーションを作成する​

ステップ 2: Logto で Microsoft Entra ID OIDC SSO を設定する​

ステップ 3: 追加スコープ（オプション）​

ステップ 4: Microsoft API へアクセスするためのトークンを保存する（オプション）​

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

Save your configuration​

Enable Microsoft Entra ID OIDC enterprise SSO connector in Sign-in Experience​

Testing and Validation​

Further readings​