認証を追加

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

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-vueパッケージには、アプリを構築するために使用するVue固有のUIコンポーネントが含まれています。次のコマンドでインストールします:

npm install @aws-amplify/ui-vue

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

src/App.vueを開いて、以下の変更を加えます。

App.vue内にauthenticatorコンポーネントを追加します:

<script setup>
  import { Authenticator } from '@aws-amplify/ui-vue';
  import '@aws-amplify/ui-vue/styles.css';
  // ... other code below
</script>
<template>
  <authenticator>
    <template v-slot="{ user, signOut }">
      <h1>Hello {{ user.username }}!</h1>
      <button @click="signOut">Sign Out</button>
      <!-- Other content from before-->
    </template>
  </authenticator>
</template>

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

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

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