Amplify Auth のセットアップ

Amplify Auth は Amazon Cognito により提供されています。Cognito は、ユーザー登録、認証、アカウント復旧、その他の操作を処理する堅牢なユーザーディレクトリサービスです。概念を確認してさらに学ぶ。

認証リソースの定義を開始するには、認証リソースファイルを開くか作成します：

import { defineAuth } from "@aws-amplify/backend"

/**
 * Define and configure your auth resource
 * @see https://docs.amplify.aws/gen2/build-a-backend/auth
 */
export const auth = defineAuth({
  loginWith: {
    email: true,
  },
})

デフォルトでは、認証リソースは email をデフォルトのログインメカニズムとしてスキャフォルドされます。認証リソースを設定して以下でのサインインを許可することもできます：

• 電話番号
• 外部プロバイダー（Google、Facebook、Amazon、または Sign in with Apple）

• パスワードレス認証（メール OTP、SMS OTP、または WebAuthn パスキー）

パスワードレス認証を有効化

パスワードレス認証方法を有効にして、より安全でユーザーフレンドリーなエクスペリエンスを提供できます：

import { defineAuth } from '@aws-amplify/backend';

export const auth = defineAuth({
  loginWith: {
    email: {
      otpLogin: true // Enable email-based one-time passwords
    }
  }
});

パスワードレス認証オプションについてさらに学ぶ。

認証リソースをデプロイ

認証リソースを選択して定義した後、以下のコマンドを実行して、個人用クラウドサンドボックスにリソースを作成します。

npx ampx sandbox

デプロイが成功した後、このコマンドは出力ファイル（amplify_outputs.json）も生成します。これにより、フロントエンドアプリがバックエンドリソースに接続できるようになります。バックエンド認証リソースで設定する値は、生成された出力ファイルに設定され、フロントエンドの Authenticator 接続コンポーネント が自動的に設定されます。

アプリケーションコードを認証リソースに接続

サインインフローを作成して正しく実装することは、複雑で時間がかかることがあります。Amplify の Authenticator UI コンポーネントはこれを簡素化し、アプリ全体の認証フローを迅速に構築できるようにします。コンポーネントは amplify/auth/resource.ts の設定とシームレスに連携して、バックエンドリソースに自動的に接続します。

Amplify には React、Vue、Angular、React Native、Swift、Android、Flutter 向けの事前構築 UI コンポーネントがあります。このガイドでは、Web アプリケーション向けのコンポーネントに焦点を当てています。

前提条件

Amplify ライブラリが統合されたアプリケーションと、以下のいずれかの最小ターゲット：

• iOS 13.0（Xcode 14.1 以上を使用）
• macOS 10.15（Xcode 14.1 以上を使用）
• tvOS 13.0（Xcode 14.3 以上を使用）
• watchOS 9.0（Xcode 14.3 以上を使用）
• visionOS 1.0（Xcode 15 以上を使用）（プレビューサポート - 詳細は以下を参照）

生成されたファイルをプロジェクトに移動します。ファイルをプロジェクトにドラッグ＆ドロップして行うことができます。

Xcode でプロジェクトを開き、ファイル > パッケージを追加 を選択して、以下の依存関係を追加します：

• Amplify Library for Swift：GitHub URL（https://github.com/aws-amplify/amplify-swift）を入力して、**Up to Next Major Version** を選択して Add Package をクリック

  • 以下のライブラリを選択します：
    • Amplify
    • AWSCognitoAuthPlugin

• Amplify UI Swift - Authenticator：GitHub URL（https://github.com/aws-amplify/amplify-ui-swift-authenticator）を入力して、**Up to Next Major Version** を選択して Add Package をクリック

  • 以下のライブラリを選択します：
    • Authenticator

次に、MyAmplifyAppApp.swift ファイルの init 部分を以下のコードで更新します：

import Amplify
import Authenticator
import AWSCognitoAuthPlugin
import SwiftUI

@main
struct MyApp: App {
    init() {
        do {
            try Amplify.add(plugin: AWSCognitoAuthPlugin())
            try Amplify.configure(with: .amplifyOutputs)
        } catch {
            print("Unable to configure Amplify \(error)")
        }
    }

    var body: some Scene {
        WindowGroup {
            Authenticator { state in
                VStack {
                    Text("Hello, \(state.user.username)")
                    Button("Sign out") {
                        Task {
                            await state.signOut()
                        }
                    }
                }
            }
        }
    }
}

Authenticator コンポーネントをアプリに追加したら、サインアップ、サインイン、サインアウト機能をテストできます。また Authenticator 接続コンポーネントをカスタマイズ して、必要に応じて色とスタイルを調整することもできます。

次のステップ

Amplify アプリでメールとパスワードを使用した認証のセットアップが完了しました。さらに機能を追加したい場合は、以下について学ぶことをお勧めします：

• 認証概念についてさらに学ぶ
• 本番環境への移行