Need to configure your backend?See Build a Backend →

Web UIでサインインを有効にする

前提条件

スタートガイドに従ってセットアップされたアプリ

ソーシャルサインインを設定する場合、属性を「必須」として指定する際は注意が必要です。異なるソーシャルアイデンティティプロバイダーは、Cognitoに返す情報の範囲が異なります。最初に「必須」として設定されたユーザープール属性は後で変更できず、ユーザーの移行または新しいユーザープールの作成が必要になる可能性があります。

Auth カテゴリを設定

このライブラリのCognitoプラグインは現在、Authorization Code Grant OAuthフローをサポートしています。

以下のように auth/resource.ts ファイルを更新して、web UIでのサインインとサインアウト機能を有効にします。

export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: {
      callbackUrls: ["myapp://callback/"],
      logoutUrls: ["myapp://signout/"],

動作の仕組み

Web UIでのサインインは、webview内にサインイン UIを表示します。サインインプロセスが完了すると、サインイン UIはアプリにリダイレクトされます。

プラットフォームセットアップ

Web

Flutter webアプリケーションでHosted UIをローカルで使用するには、--web-port=3000 引数でアプリを実行する必要があります（リダイレクトURIを設定する際にlocalhostホストに割り当てたポート番号）。

Android

アプリの android/app/src/main ディレクトリの AndroidManifest.xml ファイルに以下の queries 要素を、同じファイルの MainActivity に以下の intent-filter を追加します。

必要に応じて myapp をリダイレクトURI スキームに置き換えます：

    <intent>
        <action android:name=
            "android.support.customtabs.action.CustomTabsService" />
    </intent>
<application>
  <activity
        android:name=".MainActivity" android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="myapp" />
        </intent-filter>
  </activity>
</application>

macOS

XCodeを開き、App Sandbox機能を有効にし、「ネットワーク」の下で「受信接続（サーバー）」を選択します。

ランナーの署名と機能タブのApp Sandboxセクションで選択された受信接続設定。

Web UI サインインを起動

Web UIでサインインを起動する準備ができました。

Future<void> signInWithWebUI() async {
    final result = await Amplify.Auth.signInWithWebUI();
    safePrint('Sign in result: $result');
  } on AuthException catch (e) {
    safePrint('Error signing in: ${e.message}');

provider 属性を使用してプロバイダーを指定することもできます：

Future<void> signInWithWebUIProvider() async {
    final result = await Amplify.Auth.signInWithWebUI(
      provider: AuthProvider.google,
    safePrint('Result: $result');
  } on AuthException catch (e) {
    safePrint('Error signing in: ${e.message}');

Amplify Flutterは現在、以下のソーシャルサインインプロバイダーをサポートしています：

Google
Facebook
Login With Amazon
Apple

Amplify.Auth.signInWithWebUI は内部でiOS用 ASWebAuthenticationSession を使用します。ASWebAuthenticationSessionには prefersEphemeralWebBrowserSession プロパティがあります。このプロパティは、セッションがプライベート認証セッションをブラウザに要求すべきかどうかを示すために使用できます。このフラグを true に設定するには、CognitoSignInWithWebUIPluginOptions を使用して preferPrivateSession を true に設定します。

これにより、サインイン中およびサインアウト中にエンドユーザーに表示される権限ダイアログがバイパスされます。ただし、ユーザーのブラウザから既存のセッションの再利用も防ぎます。例えば、ユーザーがブラウザでGoogleにログインしており、アプリでGoogleを使用してサインインしようとする場合、再度認証情報を入力する必要があります。

Future<void> signInWithWebUIAndPrivateSession() async {
  await Amplify.Auth.signInWithWebUI(
    options: const SignInWithWebUIOptions(
      pluginOptions: CognitoSignInWithWebUIPluginOptions(
        isPreferPrivateSession: true,

サインイン中の追加オプション

Amplify.Auth.signInWithWebUI に追加のパラメータを渡すことができます。これらは Cognitoの認可エンドポイントへのリクエストでクエリパラメータとして追加されます。

Future<void> signInWithWebUIAndOptions() async {
    final result = await Amplify.Auth.Amplify.Auth.signInWithWebUI(
        options: SignInWithWebUIOptions(pluginOptions: CognitoSignInWithWebUIPluginOptions(
          nonce: 'randomUUID',
          language: 'en',
          loginHint: 'username',
          prompt: List.from([CognitoSignInWithWebUIPrompt.login, CognitoSignInWithWebUIPrompt.consent]),
          resource: 'http://localhost'
    safePrint('Sign in result: $result');
  } on AuthException catch (e) {
    safePrint('Error signing in: ${e.message}');