• Home
• コーポレートブログ
• AWS Amplify のログイン認証機能を試してみた

こんにちは。

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

• 100キロマラソン完走
• RubyWorld Conference に登壇
• 健康診断で尿酸値と腎臓がひっかかった

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

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

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

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

以下、手順になります。

環境

• node:v8.x
• create-react-app
• aws-amplify
• aws-amplify-react
• docker
• docker-compose

環境構築

今回は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

実行

設定ファイルの準備が終わりましたら以下のコマンドを実行して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です。

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 で紹介する予定です！ご興味のある方はこちらへご参加ください。

---

---