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

新しい友達のために:

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

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

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

前提条件

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

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 で見つけることができます。
この 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 のサインインページにリダイレクトされます。
サインインすると、アプリケーションに戻り、サインアウトボタンが表示されます。
サインアウトボタンをクリックして、トークンストレージをクリアし、サインアウトします。

DingTalk コネクターを追加する

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

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

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

注記:

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

DingTalk OAuth app を設定する

DingTalk Open Platform で Web アプリを作成する

ヒント：すでに完了しているセクションはスキップできます。

DingTalk 開発者アカウントを登録する

DingTalk 開発者アカウントをお持ちでない場合は、 DingTalk Open Platform で登録してください。

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

DingTalk Open Platform の「アプリケーション開発」>「社内アプリケーション」>「DingTalk アプリケーション」で「アプリケーション作成」をクリック
アプリケーション名 と説明を入力し、「保存」をクリック
左側のナビゲーションバーで「開発設定」>「セキュリティ設定」を選択し、「リダイレクト URL」 ${your_logto_origin}/callback/${connector_id} を設定します。connector_id は管理コンソールで該当コネクターを追加後、コネクター詳細ページで確認できます
左側のナビゲーションバーで「基本情報」>「資格情報と基本情報」を選択し、Client ID と Client Secret を取得します

権限を設定する

「開発設定」>「権限管理」で Contact.User.Read および Contact.User.mobile 権限を選択し、認可します

アプリケーションをリリースする

左側のナビゲーションバーで「アプリケーションリリース」>「バージョン管理とリリース」を選択し、最初のバージョンを作成してリリースし、Client ID と Client Secret を有効化します

注記:

アプリケーションがバージョンをリリースしない場合、取得した「Client ID」と「Client Secret」は使用できず、リクエストも失敗します。

コネクターを設定する

前セクションで取得した OAuth アプリ詳細ページの Client ID（旧 AppKey および SuiteKey） と Client Secret（旧 AppKey および SuiteKey） を clientId および clientSecret フィールドに入力します。

scope は現在 2 つの値をサポートしています：openid および openid corpid。openid は認可後にユーザーの userid を取得でき、openid corpid はログイン時に選択したユーザーの id と組織の id の両方を取得できます。値はスペース区切りで指定してください。注意：URL エンコードが必要です。

設定タイプ

名前	型
clientId	string
clientSecret	string
scope	string

DingTalk コネクターをテストする

これで完了です。DingTalk コネクターが利用可能になっているはずです。サインイン体験でコネクターを有効化するのを忘れずに。

DingTalk Web コネクターを有効化したら、アプリに再度サインインして動作を確認できます。

注記:

開発中は DingTalk Open Platform の利用規約および開発ガイドラインを厳守してください。

サポート

ご質問やさらなるサポートが必要な場合は、 DingTalk 開発者ドキュメントをご覧いただくか、DingTalk テクニカルサポートまでお問い合わせください。

設定を保存する

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

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

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

テストと検証

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

さらなる読み物

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

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

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

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

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

Flutter SDK を統合する​

インストール​

依存関係と構成​

SDK バージョンの互換性​

flutter_secure_storage のセットアップ​

Android バージョンの設定​

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

flutter_web_auth_2 のセットアップ​

統合​

LogtoClient を初期化する​

サインインを実装する​

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

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

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

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

DingTalk コネクターを追加する​

DingTalk OAuth app を設定する​

DingTalk Open Platform で Web アプリを作成する​

DingTalk 開発者アカウントを登録する​

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

権限を設定する​

アプリケーションをリリースする​

コネクターを設定する​

設定タイプ​

DingTalk コネクターをテストする​

サポート​

設定を保存する​

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

テストと検証​

さらなる読み物​