Azure AD サインインを Flutter で構築する方法

新しい友達のために:

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

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

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

前提条件

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

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

Flutter SDK を統合する

ヒント:

SDK パッケージは pub.dev と Logto の GitHub リポジトリで利用可能です。
サンプルプロジェクトは Flutter material を使用して構築されています。pub.dev と私たちの GitHub リポジトリで見つけることができます。
SDK は Android と iOS プラットフォームのみと互換性があります。
SDK v1.x は Dart 2.x と互換性があります。SDK v2.x の場合、Dart のバージョンを 3.x 以上に更新する必要があります。

インストール

pub.dev
GitHub

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

flutter pub get logto_dart_sdk

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

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

モジュール

logto_dart_sdk には 2 つの主要なモジュールが含まれています：

logto_core.dart このコアモジュールは、Logto SDK の基本的な機能とインターフェースを提供します。
logto_client.dart このクライアントモジュールは、Logto サーバーと対話するための高レベルの Logto クライアントクラスを提供します。

依存関係と設定

この SDK には以下の依存関係があり、一部は追加の設定が必要です：

flutter_secure_storage

flutter_secure_storage を使用して、クロスプラットフォームの永続的な安全なトークンストレージを実装しています。

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

Android バージョンの設定

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

build.gradle
  android {
      ...

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

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

デフォルトでは、Android は Google Drive にデータを自動的にバックアップする場合があります。これにより、例外 java.security.InvalidKeyException:Failed to unwrap key が発生する可能性があります。

これを避けるために、アプリの自動バックアップを無効にするか、FlutterSecureStorage から sharedprefs を除外することができます。

自動バックアップを無効にするには、アプリのマニフェストファイルに移動し、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

flutter_web_auth は Logto の flutter SDK の背後で使用されています。ユーザーを認証 (Authentication) するために、その webview ベースのインターフェースに依存しています。

注記:

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

Android でのコールバック URL の登録

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

AndroidManifest.xml
<activity android:name="com.linusu.flutter_web_auth.CallbackActivity" android:exported="true">
    <intent-filter android:label="flutter_web_auth">
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="io.logto"/>
    </intent-filter>
</activity>

http.dart

SDK がネットワークリクエストを行う必要があるため、HTTP クライアントを SDK に渡す必要があります。デフォルトの http.Client を http.dart から使用するか、カスタム設定で独自の http.Client を作成できます。

  import 'package:http/http.dart' as http;

統合

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 スキームは実際には重要ではありません。
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,
          ],
        ),
      ),
    );
  }
}

サインアウトを実装する

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

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

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

    Widget signOutButton = TextButton(
      onPressed: () async {
        await logtoClient.signOut();
        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 のサインインページにリダイレクトされます。
サインインすると、アプリケーションに戻り、サインアウトボタンが表示されます。
サインアウトボタンをクリックして、トークンストレージをクリアし、サインアウトします。

Azure AD コネクターを追加する

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

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

Console > Connectors > Social Connectors に移動します。
「ソーシャルコネクターを追加」をクリックし、「Azure AD」を選択します。
README ガイドに従い、必要なフィールドを完了し、設定をカスタマイズします。

注記:

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

Azure AD を設定する

Azure Portal で Microsoft Azure AD を設定する

Azure Portal にアクセスし、Azure アカウントでサインインします。Microsoft Azure AD にアクセスするには、アクティブなサブスクリプションが必要です。
提供されているサービスから Azure Active Directory をクリックし、左側のメニューから App Registrations をクリックします。
上部の New Registration をクリックし、説明を入力し、アクセスタイプ を選択して、リダイレクト URI を追加します。これは、ログイン後にユーザーをアプリケーションにリダイレクトするためのものです。この場合、${your_logto_endpoint}/callback/${connector_id} になります。例：https://foo.logto.app/callback/${connector_id}。connector_id は Logto 管理コンソールのコネクター詳細ページの上部バーにも表示されます。設定セクションで Callback URI をコピーできます。
プラットフォームとして Web を選択します。

Logto に設定を入力する

Name	Type
clientId	string
clientSecret	string
tenantId	string
cloudInstance	string

クライアント ID

Azure Portal の新しく作成したアプリケーションの概要セクションで Application (client) ID を見つけることができます。

クライアントシークレット

新しく作成したアプリケーションで、Certificates & Secrets をクリックしてクライアントシークレットを取得し、上部の New client secret をクリックします。
説明と有効期限を入力します。
クライアントシークレットは一度だけ表示されます。Logto コネクター設定に value を入力し、安全な場所に保存してください。

クラウドインスタンス

通常、https://login.microsoftonline.com/ です。詳細については、Azure AD 認証エンドポイントを参照してください。

テナント ID

Logto はこのフィールドを使用して認可 (Authorization) エンドポイントを構築します。この値は、Azure Portal でアプリケーションを作成する際に選択した アクセスタイプ に依存します。

アクセスタイプとして この組織ディレクトリ内のアカウントのみ を選択した場合、{TenantID} を入力する必要があります。テナント ID は Azure Active Directory の概要セクションで見つけることができます。
アクセスタイプとして 任意の組織ディレクトリ内のアカウント を選択した場合、organizations を入力する必要があります。
アクセスタイプとして 任意の組織ディレクトリまたは個人の Microsoft アカウント内のアカウント を選択した場合、common を入力する必要があります。
アクセスタイプとして 個人の Microsoft アカウントのみ を選択した場合、consumers を入力する必要があります。

設定を保存する

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

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

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

サインイン体験タブ

テストと検証

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

さらなる読み物

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

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

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

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

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

Flutter SDK を統合する​

インストール​

モジュール​

依存関係と設定​

依存関係と設定​

flutter_secure_storage​

Android バージョンの設定​

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

flutter_web_auth​

Android でのコールバック URL の登録​

http.dart​

統合​

LogtoClient を初期化する​

サインインを実装する​

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

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

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

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

Azure AD コネクターを追加する​

Azure AD を設定する​

Azure Portal で Microsoft Azure AD を設定する​

Logto に設定を入力する​

クライアント ID​

クライアント シークレット​

クラウド インスタンス​

テナント ID​

設定を保存する​

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

テストと検証​

さらなる読み物​

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

Flutter SDK を統合する

インストール

モジュール

依存関係と設定

依存関係と設定

flutter_secure_storage

Android バージョンの設定

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

flutter_web_auth

Android でのコールバック URL の登録

http.dart

統合

LogtoClient を初期化する

サインインを実装する

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

サインアウトを実装する

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

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

Azure AD コネクターを追加する

Azure AD を設定する

Azure Portal で Microsoft Azure AD を設定する

Logto に設定を入力する

クライアント ID

クライアントシークレット

クラウドインスタンス

テナント ID

設定を保存する

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

テストと検証

さらなる読み物