認証を追加

次に追加する機能は認証です。

Amplifyを使用した認証

Amplifyは認証プロバイダーとしてAmazon Cognitoを使用します。Amazon Cognitoは堅牢なユーザーディレクトリサービスで、ユーザー登録、認証、アカウント復旧などの操作を処理します。このチュートリアルでは、Amazon Cognitoとユーザー名/パスワードログインを使用してアプリケーションに認証を追加する方法を学習します。

認証サービスを作成

アプリに認証を追加するには、以下のコマンドを実行します:

amplify add auth

次のプロンプトのデフォルトを選択します:

? Do you want to use the default authentication and security configuration? Default configuration

Warning: you will not be able to edit these selections.
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings? No, I am done.

サービスをデプロイするには、pushコマンドを実行します:

amplify push

✔ Are you sure you want to continue? (Y/n) · yes

これで認証サービスがデプロイされ、使用を開始できます。いつでもプロジェクトにデプロイされたサービスを表示するには、以下のコマンドを実行してAmplify Consoleにアクセスします:

amplify console

ログインUIを作成

AWS に認証サービスがデプロイされたので、アプリに認証を追加する時間です。ログインフローの作成は非常に難しく、時間がかかる場合があります。幸い、Amplify UIにはAuthenticatorコンポーネントがあり、amplifyconfiguration.jsonで指定した設定を使用して、認証フロー全体を提供します。

Amplify UIをインストール

@aws-amplify/ui-angularパッケージには、アプリを構築するために使用するAngular固有のUIコンポーネントが含まれています。次のコマンドでインストールします:

npm install @aws-amplify/ui-angular

Amplify UI Authenticatorコンポーネントを追加

Amplify Authenticator UIモジュールをsrc/app/app.component.tsに追加します:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { TodosComponent } from './todos/todos.component';
import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet,
    TodosComponent,
    AmplifyAuthenticatorModule
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'amplifyapp';
}

angular.jsonファイルを開いて、node_modules/@aws-amplify/ui-angular/theme.cssをangular.jsonのスタイル配列に追加します。この配列はprojects.<project-name>.architect.build.optionsにあります。

"styles": [
  "node_modules/@aws-amplify/ui-angular/theme.css",
  "src/styles.css"
],

src/app/app.component.htmlに移動して、app-todosを<amplify-authenticator>でラップして認証を有効にします:

<amplify-authenticator>
  <ng-template
    amplifySlot="authenticated"
    let-user="user"
    let-signOut="signOut"
  >
    <app-todos></app-todos>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>

最後に、スタイルが有効になるようにアプリを実行するか、再起動します:

npm start

Amplify UIの接続されたコンポーネントを使用すると、アプリ全体のスタイルを管理しやすくなります。

この例では、Amplify UIライブラリとwithAuthenticator高次コンポーネントを使用して、実世界の認証フローすぐに開始しました。このコンポーネントをカスタマイズして、フィールドを追加または削除したり、スタイルを更新したり、その他の設定を行ったりすることもできます。必要に応じて関数呼び出しをオーバーライドすることもできます。詳細については、Amplify UIドキュメントウェブサイトにアクセスしてください。

withAuthenticatorに加えて、Amplify Library for JSでカスタム認証フローを構築することもできます。AmplifyのAuthパッケージにはsignUp、signIn、forgotPassword、signOutなど、ユーザー認証フローのすべての側面を完全に制御できる複数のメソッドがあります。