Amplify + Vue +cognito でサーバーレス ログイン作成

AWS Amplifyでcognitoを使用したログイン画面がすぐにできるとよく見かけるので試してみようと思います。

 

「AWS Amplify」は、サインアップやサインイン、サーバーレスAPI統合などの実装が容易にできるJavaScriptライブラリです。

開発は「Cloud9」を使用します。

AWS Amplify Vue Starterをベースにアプリケーションを作成

まずはCloud9で、パッケージマネージャーyarnを使用できるように インストールします。

インストール後にgitから取得

UIのコンポーネントもインストール

Amplify Frameworkをインストール

AmplifyでAWSリソースを作成

以降名称やリージョンなど必要な箇所を入力します。

認証(Cognito)機能を追加

サインインはEmailを選択します。

ストレージ(S3)機能を追加します。

Cloud9でcredendialを設定可能にするために以下設定を行う

以下、AWS managed temporaryをONにする

リソースをデプロイします。これによりCognito、S3などのリソースがAWS上に作成されます。

ローカルでの動作確認

 

cloud9でローカルで動くようにするために記述を変更する

config配下のindex.js以下部分を「host: ‘0.0.0.0’」に変更します。

 

実行すると「ログイン画面」でてきました。すごい!もう表示ができました。

「Create account」クリックしてユーザー作成

メール確認すると認証コードがとどいている

認証コード入力

ログイン

ログイン成功、サンプルのログイン後画面が表示されています

cognitoは何も直接さわっていませんが、ユーザープールも自動でできている。これはほんとすごいです。

IDプールもできている。

ユーザーもできている

 

いくつかのコマンドで入力だけでサーバーレスのログインができてしまいました。

うわさ通りほんと衝撃の簡単さでログイン画面ができました。

“Amplify + Vue +cognito でサーバーレス ログイン作成” への 0 件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です