More than 5 years have passed since last update.

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

Posted at 2018-04-11

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);