AWS Amplify のログイン認証機能を試してみた


こんにちは。

今年の印象に残った出来事は。。

はい。年末年始、公然と暴飲暴食をできる季節がやってきました。今年も全力で体をいじめる予定の吉岡です。

さて、今回は「AWS Amplify」を利用して、ログイン画面の実装について試してみましたので、その手順を紹介したいと思います。Amplifyとはなんぞや??という方は以下のサイトをご確認ください。

AWS Amplify(アプリケーションの構築とデプロイ)| AWS

スケールするモバイルアプリおよびウェブアプリを最速で構築する方法 AWS Amplify は、AWS を使用したスケーラブルなモバイルアプリおよびウェブアプリの作成、設定、実装を容易にします。Amplify はモバイルバックエンドをシームレスにプロビジョニングして管理し、バックエンドを iOS、Android、ウェブ、React Native ...

以下、手順になります。

環境

環境構築

今回はAmplifyの実行環境はDockerで構築します。

Docker

Repository をクローンしてきて、ビルドします。

$ git clone https://github.com/yoshiokaCB/aws-amplify-docker.git aws-amplify
$ cd aws-amplify
$ docker build -t aws-amplify . --no-cache

AWS IAMユーザの作成

AWSのサービスの操作に必要なIAMユーザ情報をファイルにまとめておきます。

AWSのIAMユーザ作成は以下を参考にしてください。
AWS アカウントでの IAM ユーザーの作成 (AWS Identity and Access Management)

AWS IAMユーザのの設定

$ vi env.list
AWS_ACCESS_KEY=[YOUR_AWS_ACCESS_KEY]
AWS_SECRET_ACCESS_KEY=[YOUR-AWS_SECRET_ACCESS_KEY]
REGION=ap-northeast-1
OUTPUT=text
bash:env.list

実行

設定ファイルの準備が終わりましたら以下のコマンドを実行してDockerを起動してログインします。

$ docker run --rm -it --env-file ./env.list -p 3000:3000 -v `pwd`:/usr/src/ aws-amplify bash

上記コマンドで、3000番をポートバインドし、カレントディレクトリを/user/srcにマウントします。

Reactの実行

Dockerにログインした状態で以下のコマンドを実行していきます。ついでにamplify関連のライブラリーもインストールしておきます。

$ cd /usr/src/
$ npm install aws-amplify aws-amplify-react
$ npm install @aws-amplify/api @aws-amplify/pubsub
$ npx create-react-app myapp
$ cd myapp
$ npm start

localhost:3000 にアクセスしてReactの初期の画面が表示されれば、環境の準備はOKです。


React初期の画面

Amplifyの初期設定

続いてAmplifyの初期設定をしていきます。以下のコマンドを実行すると選択肢が出てきます。以下を参考に入力してください。

$ amplify init
# 以下選択の参考
? Enter a name for the project myapp
? Enter a name for the environment myapp
? Choose your default editor: Visual Studio Code
? Choose the type of app that you are building javascript
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use (Use arrow keys)
❯ default

amplify add auth を実行してログインの認証に必要な認証のモジュールをインストールします。

$ amplify add auth

# 以下選択の参考
 Do you want to use the default authentication and security configuration? Default configuration
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.

amplify publishを実行してAWSに必要なリソースをプロビジョニングします。(CloudFormationが実行されます。)

今回はCognitoのUserPoolとかそれに関連したロール、ポリシーなどを作成します。(必要なくなったらCloudFormationで一括で削除してください。)

$ amplify publish
✔ Successfully pulled backend environment myapp from the cloud.

Current Environment: myapp

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Auth     | myapp3847c5dc | Create    | awscloudformation |
? Are you sure you want to continue? Yes

これで準備OKです。

Reactの設定

Reactでログインの画面が表示されるようにコードに変更を加えます。
src/app.js を以下のように書き換えます。
(ボリュームをマウントしてますので、ローカルのファイルを変更すればOKです。)

import logo from './logo.svg';
import './App.css';

import { withAuthenticator } from 'aws-amplify-react'; // ログイン画面のモジュールの読み込み
import Amplify, { Auth } from 'aws-amplify';           // amplifyのモジュールの読み込み
import aws_exports from './aws-exports';               // 設定情報を読み込みます。
Amplify.configure(aws_exports);                        // 設定情報をAmplifyに反映させます。

function App() {
  // ログアウトボタンの準備
  function signOut() {
    Auth.signOut()
  }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit src/App.js and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <!-- ログアウトボタンの設置 -->
        <button onClick={ () => signOut() }>ログアウト</button>
      </header>
    </div>
  );
}
export default withAuthenticator(App);

書き換えが終わりましたら、サーバを立ち上げます。

$ npm start

localhost:3000 にアクセスすると、以下のようにログインの画面が表示されます。


ログイン画面

Create Accoutをクリックしてアカウント登録をします。


アカウント作成画面

登録が終わると認証画面に移動します。また、入力したメールアドレスに認証用のコードが送られてきますので、そちらを入力します。


認証コード

認証が終わりますと、ログイン画面に戻りますので、先ほど入力したアカウント情報を入力してログインします。


ログイン画面

Reactの初期の画面が表示されれば、無事にログインが完了です。


ログイン後の画面

ログアウトボタンもついていますので、そちらでログアウトしてみて、ログイン・ログアウトが実装されていることを確認してみてください。

以上、簡単ですがAWS Amplifyを利用したログイン画面の設定となります。AWSへのデプロイとS3へのファイルのアップロード機能の設定とAWSへのデプロイについては来週開催される フロントエンド勉強会 in 山陰 #05 で紹介する予定です!ご興味のある方はこちらへご参加ください。


My Redmine

こちらの記事もオススメです!
JAWS DAYS 2019 に登壇してきました!
JAWS DAYS 2019 に初登壇。EC2からECSへの移行して運用コストが激減した話です。
Dockerを使うとRedmineのテストが少しだけ楽になりました
RedmineのテストにDockerを使うことで、仮想マシンの構築作業が不要になり楽になりました。
クラウドベースの統合開発環境「AWS Cloud9」超便利ッス。
AWS Cloud9は、いつでもどこでも同じ環境が使えて、共同開発にも向いています。
Redmine互換課題管理システム「RedMica」 リリースの狙い
今日使える明日のRedmine「RedMica」!Redmineの次期バージョンで利用できる新機能をいち早く利用できるのが最大のメリットです。
OSC 2019 島根でのプレゼン発表へ向けての準備と工夫したところ
OSC 2019 島根でプレゼン。スライド作成で工夫したところを紹介します。
ファーエンドテクノロジーからのお知らせ(2020/06/03更新)
オープンソースのRedmine互換プロジェクト管理ソフトウェア「RedMica 1.1.0」リリース
Redmine互換のオープンソースのプロジェクト管理ソフトウェア「RedMica」のバージョン1.1.0をリリースしました。
オープンソースのRedmine互換プロジェクト管理ソフトウェア「RedMica」のロゴができました
Redmine互換のオープンソースのプロジェクト管理ソフトウェア「RedMica」(ファーエンドテクノロジー版Redmine)のロゴができました。
2020年度ブランドパートナーに島根県在住のモデル ユイさんを3年連続起用
ユイさん(モデルスタジオミューズ所属)をファーエンドテクノロジーのブランドパートナーとして継続して起用します。今年度で3年目となります。
My Redmine(Gen.2)ストレージ容量を倍増!スタンダードプランは200GBに
My Redmine Gen.2(ジェネレーション2)のストレージ容量が料金そのままにこれまでの2倍になりました。
Redmineの最新情報をメールでお知らせする「Redmine News」配信中
新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け