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 アプリケーション向けのコンポーネントに焦点を当てています。

まず、@aws-amplify/ui-angular ライブラリをインストールします：

npm add @aws-amplify/ui-angular

次に app.module.ts を開いて、Amplify インポートと設定を追加します：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';

import { AppComponent } from './app.component';
import outputs from './amplify_outputs.json';

Amplify.configure(outputs);

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AmplifyAuthenticatorModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

次に、styles.css にデフォルトテーマをインポートします：

@import '~@aws-amplify/ui-angular/theme.css';

次に、app.component.html を開いて amplify-authenticator コンポーネントを追加します。

amplify-authenticator

Authenticator コンポーネントは、アプリに認証フローを追加するシンプルな方法を提供します。このコンポーネントは、選択したフレームワークで認証ワークフローをカプセル化し、バックエンド Auth リソースによって支えられています。Authenticator は user 情報と signOut 関数を内部テンプレートに渡します。

amplify-authenticator コンポーネントは、アプリに認証フローを追加するシンプルな方法を提供します。このコンポーネントは、選択したフレームワークで認証ワークフローをカプセル化し、バックエンド Auth リソースによって支えられています。amplify-authenticator は user 情報と signOut 関数を内部テンプレートに渡します。

<amplify-authenticator>
  <ng-template
    amplifySlot="authenticated"
    let-user="user"
    let-signOut="signOut"
  >
    <h1>Welcome {{ user.username }}!</h1>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>

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

次のステップ

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

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