What's?

Home / GatsbyにAmplifyを使ってCognitoのログイン画面を実装する

GatsbyにAmplifyを使ってCognitoのログイン画面を実装する
April 03, 2020

DEVELOPMENT

web
aws
node
js
Gatsby

最近では、WEB サイトを作るのに、静的サイトジェネレータを使えば簡単に作成できるようになりました。

その際、ログイン認証が必要だったのですが、画面の作成と、面倒なサーバーサイドの処理が不要なCognitoを使用して実装してみようと思っていましたが、

AWSのAmplifyを使えば、画面までサクッと勝手に作ってくれそうだったので、

Amplifyを使ってCotnitoのログイン画面の表示を実装してみました。

そして、僕自身、簡単にReact開発環境をつくれる、「Gatsby JS」にハマっていましたので、

Gatsby JSに、AmplifyのAuth(Cognitoのログイン)の組み込んでみました。

その手順をご紹介したいと思います。

参考

Gatsby JS プロジェクト作成

インストール

$ npm i -g gatsby-cli

Gatsby JSのプロジェクト作成

$ gatsby new sample-proj(プロジェクトフォルダ名)

※コマンドが効かなかったら、souce コマンドでprofileを再読み込みしてみましょう

Localで実行してみます

$ cd sample-proj
$ gatsby develop

表示の確認

http://localhost:8000/

ここでちゃんと表示されれば一旦OKです


AWS Amplify

インストール

$ npm install -g @aws-amplify/cli
$ amplify --version

※コマンドが効かなかったら、souce コマンドでprofileを再読み込みしてみましょう

AWSへのアクセス用のIAMの設定

$ amplify configure

を叩けば、ブラウザにて、リージョン選択します。

AWSログイン画面から、その後、IAM作成画面に行くのですが、defaultで進めて行くと AWS consoleへのFull Access権限の付与となり、 なんとなく、Full Accessは嫌なので(セキュリティ上)、自分が必要とするroleのみ与えるようにしました。 僕が自分で追加したRoleは下記です

  • AmazonS3FullAccess
  • CloudWatchFullAccess
  • CloudFrontFullAccess
  • AmazonCognitoDeveloperAuthenticatedIdentities
  • AdministratorAccess
  • AmazonCognitoPowerUser
  • AWSCloudFormationFullAccess

気にしない方は、Full Accessでもいいと思います。

ここで設定したIAMのAccess Keyと Access secret keyを入力するように言われるので、入力し、設定完了です。


Amplify の設定

$ amplify init

すると色々と聞かれるので、自分の環境にあった内容で選択し、進めていく

jsのライブラリの選択では、GatsbyはReactベースですので、Reactを選択して下さい。


認証機能の追加

$ amplify auth

基本、そのままdefaultのままでOKです。 Cognitoを使ったことがある方は、ログインの方法等、カスタマイズが必要な場合、Customで設定していきます。


deploy

$ amplify push

Amplifyのバックエンドのリソース設定をデプロイします。


必要なパッケージをインストール

Amplifyで認証されたAWSのリソースの操作に必要なライブラリを入れます。

$ npm i aws-amplify aws-amplify-react
もしくは
$ yarn aws-amplify aws-amplify-react

僕の環境のとき、これらを一緒に入れたら、エラーになりました。 その場合は、aws-amplifyを先に入れてから、aws-amplify-reactを入れてみて下さい。


GatsbyにAmplifyを取り込む

  • gatsby-broswer.js
import Amplify from "aws-amplify"
import awsConfig from "./src/aws-exports"
Amplify.configure(awsConfig)

ログイン認証を実装する

  • src/pages/index.js
// パッケージの読み込みを追記
import { withAuthenticator } from 'aws-amplify-react'

.
.
.
// export文を以下に変更
export default withAuthenticator(IndexPage)

これだけで完了です


確認してみる

$ npm run develop

https://localhost:8000 で確認した際、ログイン画面が表示されればOKです。 で、サインアップから、アカウント作成し、ログイン後、indexページが表示されればOKです。


ログアウトや、パスワード変更を実装してみる

内容詳細は、AWS Amplify Authentication を見ると実装方法が乗っていますが、参考までに


Logout

import { Auth } from 'aws-amplify';

Auth.signOut()
    .then(data => console.log(data))
    .catch(err => console.log(err));

Change password

import { Auth } from 'aws-amplify';

Auth.currentAuthenticatedUser()
    .then(user => {
        return Auth.changePassword(user, 'oldPassword', 'newPassword');
    })
    .then(data => console.log(data))
    .catch(err => console.log(err));

など。


DB(ストレージ)を使う場合も楽ですね。

$ amplify storage

と入力し、S3(media, photo, movie) or No sql DBか選択します。

詳細は、AWS Amplify DataStore こちらに内容が記載されてますが、

Cognitoで認証した(ログインした)場合のみ、リソースにアクセス可能かどうかなどの選択もできます。 この辺は後日、別の記事で詳しく記載したいと思います。


まとめ

プロジェクトの作成〜ログイン認証やサインアップ等、ここまで数分にて、実装することができました。 サーバーサイド(ログインなどの)実装をやると考えると、時間と手間がかかりますが、GatsbyとAmplifyを使い簡単に実装することできました。 便利ですねー。

是非試してみて下さいー

うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

🙏よかったらシェアお願いします🙏
WRITTEN BY
うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

CONACT
入力して下さい
Slack からもどうぞ

※お気軽にどうぞ!(6月20日まで有効!お早めに)

COPYRIGHT © 2020 UKAI CO., LTD. ALL RIGHTS RESERVED.