[第三回] Amplifyによる認証

はじめに

皆さん。こんにちは！

DreamHanksのエルムです。

今回はAmplifyによる認証について説明していきます。

前回の記事は[第二回] AWS Amplifyのセットアップです。

 

Amplifyによる認証

Amplify Frameworkでは、メインの認証プロバイダとしてAmazon Cognitoを使用しています。

Amazon Cognitoは、ユーザー登録、認証、アカウントリカバリーなどの操作を行う堅牢なユーザーディレクトリサービスです。

このチュートリアルでは、Amazon Cognitoとユーザー名/パスワードによるログインを使用して、アプリケーションに認証を追加する方法を学びます。

 

認証サービスの作成方法

最初から始めるには、プロジェクトのルートフォルダーで次のコマンドを実行します。

 

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

 

これで、認証サービスがデプロイされましたので、早速使ってみましょう。

プロジェクトにデプロイされたサービスをいつでも確認するには、以下のコマンドを実行してAmplify Consoleにアクセスします。

 

アプリケーションの設定方法

アプリにAmplifyを追加します

以下のコマンドを実行して、必要な依存パッケージをインストールします。

アプリのエントリーポイント（App.js、index.js、main.jsなど）で、設定ファイルをインポートして読み込みます。

 

サインアップ、サインイン、サインアウトの有効化

アプリケーションに認証機能を追加するには、2つの方法があります。

• Use pre-built UI components
• Call Authentication APIs manually

 

Use pre-built UI components

ログインフローの作成は、正しく行うことが非常に難しく、時間がかかります。

Amplify Frameworkには、認証UIコンポーネントが用意されており、aws-exports.jsファイルで指定した設定を使用して、認証フロー全体を提供してくれます。

Amplifyには、React、Vue、Angular、React Native用のUIコンポーネントがあらかじめ用意されています。

まず、@aws-amplify/ui-react ライブラリと、aws-amplifyをインストールしてください。

 

次に、src/App.jsを開き、withAuthenticatorコンポーネントを追加します。

withAuthenticator

withAuthenticatorは、AmplifyAuthenticatorをラップする高次コンポーネント（HoC）である。

また、AmplifySignOutコンポーネントにも注目してください。これはオプションのコンポーネントで、サインアウトボタンを表示させたい場合に使用します。

 

使用方法

 

Call Authentication APIs manually

次のチュートリアルでは、Auth APIを使って、認証フローをアプリケーションに統合する方法を学びます。

 

概要

Amplifyを使用して認証フローを実装するには、Amplify UIライブラリを使用するか、Authクラスで直接認証メソッドを呼び出すことができます。

Authには、signUp、signIn、forgotPassword、signOutなど30以上のメソッドがあり、ユーザー認証フローのすべての側面を完全にコントロールすることができます。

 

終わりに

今回の記事は以上になります。

次回はバックエンドの作成または既存のバックエンドの再利用を学びましょう。

ご覧いただきありがとうございます。