AWS Amplifyとは

AWS AmplifyはAmazonにより提供されているオープンソースのフレームワークであり、一緒にまたは単独で使用できるツールおよびサービスを含めています。 それらの ツールの一つとしての Amplify Authは使用すると、安全な認証をすばやく設定し、アプリケーションへのユーザーのアクセスを制御することができます。

Amplifyフレームワークは、主な認証プロバイダーとしてAmazon Cognitoを使用します。Amazon Cognitoは、ユーザー登録、認証、アカウント回復、およびその他の動作を処理する強いユーザーディレクトリサービスです。

AWSアカウントの作成

AWS Amplifyを使用するには、AWSアカウントを開設する必要があります。AWSアカウントを持っていない場合はここを見てアカウントを作成してください。

プロジェクトの作成

Vue CLIを使用してプロジェクトを作成しましょう。 まずは、システムにVueCLIをインストールする必要があります。 インストールしていない場合は、以下のコマンドでインストールできます。

npm install -g @vue/cli

インストール後、Vue CLIを利用してプロジェクトが作成できるようになりました。以下のコマンドを実行して新規プロジェクトを作成しましょう。

vue create vue-amplify-auth-tutorial

設定値の選択を求められるので、“Manually select features”→“babel”→“Router”→“Linter / Formatter”の順番で選択してください。

Vue CLIが完了した後、作成したディレクトリへ移動するためのコマンド、サーバーを起動するためのコマンドが表示されるので、それに従って行ってください。サーバーが起動されたら、localhost:8080でブラウザを開くことができます。

Amplify CLIのインストールと設定

Amplify CLIは、アプリケーション用の各種AWSのクラウドサービスを構築するツールの一連です。まず、以下のコマンドを実行することでインストールできます。

npm install -g @aws-amplify/cli

つぎ、以下のコマンドを実行することでAmplifyを設定します。

amplify configure

上記のコマンドを実行したら、新しいブラウザウィンドウが開いて、AWSマネジメントコンソールへのログインを求められます。ログインした後、ターミナルへ戻って、Enterキーを押しましょう。

続いて、AWSリージョンの選択が求められるので、リージョンを選択してください。

あと、新しいIAMユーザー名を指定する必要があります。デフォルトの名前をそのままにしてEnterキーを押下できます。または、独自の名前を指定することもできます。今回は、auth-demoという名前を指定します。

Enterキーを押下しブラウザーに戻った後、以下の順序を行います。

Permissionsボタンを押下してください。

Tagsボタンを押下してください。

Reviewボタンを押下してください。

Create Userボタンを押下してください。

そのあと、ターミナルに戻って、Enterキーを押下してください。

作成したユーザーのaccessKeyIdを入力してEnterキーを押下してください。

作成したユーザーのsecretAcessKeyを入力してEnterキーを押下してください。

プロファイル名の入力を求められるので、デフォルト値をそのままにしてEnterキーを押下してください。

すべてが完了したら、新しいユーザーが設定できたことを示すメッセージがターミナルに表示されます。

認証サービスの作成

Vueアプリケーションのルートディレクトリから、以下のコマンドを実行してください。

amplify init

Vueアプリケーションに認証を追加する必要があるので、Vueアプリケーションのルートディレクトリで、以下のコマンドを実行してください。

amplify add auth

Amplifyの初期化時、アプリケーションの情報の入力を求められるので、それに従ってください。

プロジェクト名を入力してください。

バックエンド環境の名前を設定してください。

好きなエディターを選択してください。

Vueを利用するので、JavaScriptフレームワークを選択してください。

これがデフォルトとして設定しているので、Enterキーを押下することで次に進みます。

新しいAmplifyプロジェクトを初期化する時、以下のものが生成されます。

• バックエンドの定義を格納する、amplifyというトップレベルディレクトリが生成されます。
• Amplifyを使って作成したサービスの設定の全てを格納するsrcディレクトリに、aws-exports.jsというファイルが生成されます。これによってAmplify Clientはバックエンドのサービスに関する必要な情報を取得できます。

サービスをデプロイするにはamplifypushコマンドを実行してください。

Amplifyライブラリのインストール

VueアプリケーションにAmplifyをインストールする必要があります。以下のコマンドを実行してインストールできます。

npm install aws-amplify

アプリケーションの設定

VueアプリケーションにAmplifyを追加する必要があります。main.jsファイルを開き、最後のimportの下に以下のコードを追加します。

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports'; 
Amplify.configure(awsconfig);

登録ページの作成

ユーザーが登録ボタンを押下すると登録メソッドを呼び出します。以下に、その登録メソッドの実装を示します。

async register() {
try {
await Auth.signUp({
username: this.email,
password: this.password,
});
alert('User successfully registered. Please login');
} catch (error) {
alert(error.message);
}
},

このメソッドはインストールしておいたAWS AmplifyパッケージのAuthを利用します。以下のステートメントをスクリプトセクションの上部に追加します。

import { Auth } from 'aws-amplify';

では、アプリケーションを開いて、ユーザーを新規登録してみましょう。成功した場合はユーザーが登録できたという通知が届きます。

ログインページの作成

ログインメソッドを以下のように実装します。

async login() {
try {
await Auth.signIn(this.email, this.password);
alert('Successfully logged in');
} catch (error) {
alert(error.message);
}
},

これまで、アプリケーションを開いて、既に登録されているユーザーでログインできます。

ログアウトメソッドの追加

スクリプトセクションで、ログアウトメソッドを含まれるメソッドのオブジェクトを以下のように追加します。

methods: {
async logout() {
try {
await Auth.signOut();
} catch (error) {
alert(error.message);
}
},
},

これまで、AWS Amplifyを使ったVueアプリケーションへの認証追加の完了です。

Gitlabのソースコード

参照元

https://aws.amazon.com/amplify/

https://blog.thundra.io/how-to-build-an-application-in-minutes-with-aws-amplify