AWS
react.js
cognito
CognitoUserPools
amplify

AWS Amplify + React.js のシンプルなサンプル

AWS AmplifyとReact.jsを使うと、AWS上のアプリの認証・認可が簡単に実現できたので、簡単なサンプルを作ってみました。

https://aws.github.io/aws-amplify/media/quick_start
こちらにQuickStartがあるのですが、こちらのサンプルはAWS上のリソース作成を必要最低限にしたい場合の参考になればと思います。

このサンプルを実行するのに、最低限必要なものは以下のとおりです。

  • node.js
  • AWSのアカウント

まずはReact.jsのアプリを作る

React.jsでは、create-react-appという、アプリを簡単に作り始められるツールがあるので、それを使います。

$ npm install create-react-app
$ ./node_modules/.bin/create-react-app amplify-sample
$ cd amplify-sample

これで、amplify-sampleというディレクトリでアプリを作る準備ができました。
試しに起動してみましょう。

$ npm run start

Webブラウザが起動して、このようなページが表示されたでしょうか?

これでReact.jsのアプリの準備が完了です。

AWS上にCognito UserPoolなどを作る

Cognito UserPool

UserPoolをデフォルトから作成していきます。

デフォルトの設定から、アプリクライアントを追加します。

「クライアントシークレットを作成」のチェックボックスは外します。

確認ページに戻り、UserPoolを作成します。

Cognito Federated Identity

次に、フェデレーティッドアイデンティティからIDプールを作成します。

「認証されていないIDに〜」のチェックをONにします。

まだプールの作成はしません。
「認証プロバイダー」から「Cognito」タブを選択して、UserPoolからの情報を設定して、IDプールを作成します。

「Your Cognito identities require access to your resources」のページで、認証済ユーザー用と未認証ユーザー用のRoleの作成の確認画面が表示されるので、デフォルトを受け入れて、2つのIAM Roleを作成します。

アプリにAmplifyを組み込む

Amplifyをアプリに組み込んで、認証されるまでページが表示されないようにします。

$ npm install --save aws-amplify
$ npm install --save aws-amplify-react

src/App.jsを以下のように修正します。

Amplify.configure()のパラメーターには、これまで作成したUserPoolなどの値を設定します。

App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Amplify from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react';

Amplify.configure({
    Auth: {
        identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', 
        region: 'XX-XXXX-X', 
        userPoolId: 'XX-XXXX-X_abcd1234',
        userPoolWebClientId: 'XX-XXXX-X_abcd1234', 
    }
});

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default withAuthenticator(App);

ブラウザで表示すると、先程までのページから変わって、Sign Inのページが表示されます。

何が起こったのかというと、withAuthenticator()の中で、「認証されていれば、Appを表示」「認証されていなければ Sign Inページを表示」という制御をしています。

ちなみに、このSign Inのページは、Amplify(amplify-react)が提供しているものです。

ユーザー登録2パターン

Cognito UserPoolでは、ユーザーの追加方法が2種類あります。

  • ユーザーが自分でサインアップする
  • 管理者がユーザーを登録する

ここでは、それぞれの追加方法を試してみます。

ユーザーが自分でサインアップする

Sign Inページの「Sign Up」からサインアップして、ユーザーを登録してみます。

Sign Upページでメールアドレスを入力すると、そのアドレス宛に確認コードが届きます。
ここでのUsernameは、ログイン時のIDになるので、日本語などは使わない方が良いと思います。
試していませんが。

確認コードを入力するとSignUpが完了します。

SignUpが完了すると再び最初のページが表示されるので、自分で入力したパスワードでログインします。

UserPoolを見ると、無事にユーザーが登録されていました。

ちなみに、ユーザーからの登録を受け付けたくない場合、UserPoolの設定で「ユーザーに自己サインアップを許可しますか?」の設定を変更することで実現できます。
ただし、amplify-reactで表示するSign Inページの「Sign Up」ボタンは消えないので、カスタマイズが必要になります。

管理者がユーザーを登録する

管理者がユーザーを登録することもできます。
この場合、

  1. 管理者が仮パスワードをつけてユーザー作成
  2. ユーザーが仮パスワードでログイン
  3. ユーザーがパスワード変更

という手順になります。
Eメールを利用した確認コードでの登録は不要です。

ManagementConsoleからUser1ユーザーを登録すると、ステータスがFORCE_CANGE_PASSWORDの状態になっています。

React.jsのSign Inページから、ユーザー名と、管理者が決めた仮パスワードを入力してSign Inします。

そうすると、パスワード変更ページが表示されるので、任意のパスワードを入力すると、パスワードが設定されて目的のページが表示されます。

UserPoolで確認すると、ステータスが「CONFIRMED」になっています。

まとめ

React.jsで作ったアプリにAWS Amplifyを組み込むことで、簡単に認証の仕組みが使えるようになりました。
今後は、カスタマイズやIAM Roleでの細かいアクセス制御についても記事を書いていきたいと思います。