AWS Amplify ハンズオン 認証機能を実装

最終更新日:2020年11月15日 未分類

amplifyの認証機能を実装するために、まずは準備としてアプリの雛形を作成する。

基本的にはハンズオン通りに進めていくが、自分が失敗したところを記録に残しておく。

まず、以下のハンズオンに従って進めたところ、amplify serveしたところでエラーが発生。

https://feature-ai-service.dma9ecr5ksxts.amplifyapp.com/amplify/amplify-router/

必要なパッケージはインストールした気になっていた。

npm install element-ui vue-router

でUI構築とルーティングのライブラリをインストール。

改めて、amplify serveして開発サーバーで表示を確認。

リンクをクリックすると、表示がリアクティブに正しく切り替わるので正しく実装できている。

 

ここからは、アプリに認証機能を追加していく。

 

Amplify Vue モジュールをインストールする。

npm i aws-amplify aws-amplify-vue

Auth モジュールをセットアップする。

amplify add auth

“amplify push” will build all your local backend resources and provision it in the cloud
“amplify publish” will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

「amplifypush」は、すべてのローカルバックエンドリソースを
構築し、クラウドでプロビジョニングします
「amplifypublish」は、すべてのローカルバックエンドおよび
フロントエンドリソース(ホスティングカテゴリが追加されている
場合)を構築し、クラウドでプロビジョニングします

 

amplify statusを実行し、Auth Categoryのリソースが追加されていることを確認

amplify pushを実行し、クラウドへ変更を反映します。

 

続いて、ハンズオンに従って、認証機能を実装していく。

https://feature-ai-service.dma9ecr5ksxts.amplifyapp.com/amplify/amplify-auth/

App.vueとmain.jsを修正する。

そして、amplify serveを実行して、開発サーバーで表示を確認する。

この画面の前に、Create accountリンクをクリックして、ユーザ登録を行っている。

ユーザ登録において電話番号は適当に設定しておけばいいが、メールアドレスには後でverification codeが届くので正しく設定しておく。

そして、verification codeを入力したらユーザ登録完了となり、ログインできる。

ログイン後の画面がこちら。

 

sign outボタンで正しくログアウトもできたので問題なし。

 

 

 

参考サイト

https://aws.amazon.com/jp/blogs/mobile/amplify-cli-enables-creating-amazon-cognito-user-pool-groups-configuring-fine-grained-permissions-on-groups-and-adding-user-management-capabilities-to-applications/

https://amplify-sns.workshop.aws/30_mock/10_auth.html

https://devtab.jp/entry/internal/122

https://docs.amplify.aws/lib/auth/getting-started/q/platform/js#summary

 

 

 

 

 

コメントを残す

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