第1回GatsbyにCognitoを導入してログイン画面をカスタマイズする
Gatsbyにaws amplifyを導入し、Cognitoを用いた認証機能を実装します。
この記事では、GatsbyプロジェクトにCognitoを導入し、アカウント作成ができるようになるところまで行います。
前提
- Gatsbyプロジェクトが導入済みである
- awsアカウントを持っている
パッケージの導入・セットアップ
@aws-amplify/cli導入します。
npm install -g @aws-amplify/cli
IAM設定
@aws-amplify/cliを導入することで、amplifyコマンドの利用が可能になります。
一度、ターミナル、エディタの再起動を実施してから以下をお試しください。
amplify configure
awsログイン画面を経由してIAM作成へと進みます。
今回はとりあえず全てデフォルトの設定のまま進みました。
Amplifyの設定
環境周りの設定を行います。
amplify init
認証情報の設定
こちらも今回は基本デフォルトのまま進みました。
認証方法など後ほど変更したい場合は、こちらのコマンドを再実行することで変更することができます。
amplify auth
認証情報をdeploy
実施した認証周りの設定内容をawsにデプロイします。
amplify push
モジュールへ繋ぎ込みを行う
必要パッケージの導入
ログインフォームの呼び出しに必要なパッケージの導入を行います。
npm i aws-amplify aws-amplify-react
ログイン画面作成
import { Amplify } from "aws-amplify"
import awsConfig from "./src/aws-exports"
Amplify.configure(awsConfig)
import * as React from "react"
import { withAuthenticator } from "aws-amplify-react"
const IndexPage = () => {
return (
<main>
<title>Home Page</title>
<h1>Amplify Cognito authorized</h1>
</main>
)
}
export default withAuthenticator(IndexPage)
モジュールのビルド
ビルドして、画面を確認します。
yarn develop
ログインフォームが表示されました！
認証設定エラー
一見画面はうまく行っていそうでしが、コンソールで以下のエラーを吐いていました。
Amplify has not been configured correctly.
The configuration object is missing required auth properties.
This error is typically caused by one of the following scenarios:
以下のコマンドを実行することで、エラーを解消することができました。（amplify pushデプロイ忘れずに）
amplify add auth
アカウント生成
エラーが解消されたので、「Create account」からアカウントを実際に作ってみます。
入力したEmail宛に認証コードが飛んでくるので、コードを入力します。
メールの本文
Your verification code is 123456
認証コードを入力して、「Confirm」をクリックすると、再度ログイン画面が表示されますので、先ほど設定したEmailとパスワードでログインを実行すると、index.jsページが表示されました！
アカウントの確認
実際にawsの管理画面からユーザープールの情報を参照すると、登録したユーザー情報が反映されていました！
Discussion