最近では、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を使い簡単に実装することできました。 便利ですねー。

是非試してみて下さいー