React＋AWS Cognitoの手順メモ

AWS Cognitoを試したときの手順メモです。サクッと動かしてみたい方は参考にしてください。

Ishiguro Suguru

AWS Cognitoを試してみたので手順を紹介します。 フロントエンドはReactを使用しています。

手順概要

手順概要は以下のとおりです。

  1. ユーザープール作成
  2. IDプール作成
  3. React組み込み

1. ユーザープール作成

はじめに、AWSコンソールからCognitoを開きます。 “ユーザープールの管理"をクリックします

“ユーザープールを作成する"をクリックします。

ユーザープール名を入力して作成方法を選択します。 どちらでも問題ありませんが、今回は”ステップに従って設定する”をクリックします。

サインインオプションと属性オプションの設定をします。 以下のように設定しましたが、ユーザープール作成後は変更できないためご注意ください。

次にポリシーの設定になります。 試しに動かすだけなのでデフォルトのままにしています。

次に多要素認証（MFA）の設定をします。 ここも動かすだけであればデフォルトで大丈夫です。

次にメッセージのカスタマイズになります。 アカウント作成時に登録するメールアドレスにメールを送信して本人確認する機能です。 ここもデフォルトのままにしています。

タグは不要のため次のステップに進みます。 必要な方は適宜入力してください。

クライアントのデバイス記録の機能を使用するか選択します。 今回は”いいえ”を選択します。 機能を使用する場合はMFAの設定が必要になります。

次にアプリクライントを作成します。 ”アプリクライアントの追加”をクリックします。

任意のアプリクライアント名を入力して、”クライアントシークレットを生成”のチェックを外しておきます。 ”アプリクライアントの作成”をクリックして次のステップに進みます。

トリガーの設定になります。 トリガーは設定せずに次に進みます。

確認画面で”プールの作成”をクリックすると、ユーザープールが作成された旨が表示されます。

2. IDプール作成

次にIDプールを作成していきます。 画面上部の”フェデレーティッドアイデンティティ”をクリックしてIDプールの作成に進みます。

任意のIDプール名を入力して、”認証されていないIDに対してアクセスを有効にする”のチェックを入れておきます。 また、認証プロバイダーの設定で先ほど作成したユーザープールIDとアプリクライントIDを入力します。（先ほどのユーザープール管理画面から確認できます）

次にアクセス権限設定でIAMロールを作成します。 許可をクリックします。

3. React組み込み

以上でCognitoの設定は完了です。 次にReactに組み込んでみましょう。

create-react-appコマンドを実行して、Cognitoを簡単に使用するためのライブラリをインストールしましょう。 コマンドは以下のとおりです。

yarn add aws-amplify --save
yarn add aws-amplify-react --save

create-react-appで自動的に作成されるApp.jsファイルを以下のように編集すれば動作します。 ユーザープールとIDプールの管理画面から各種IDをコピーしてAmplify.configureに設定しましょう。

  • App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
/* ①amplify インポート */
import Amplify from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react';

/* ②Cognite 接続設定 */
Amplify.configure({
  Auth: {
      /* IDプールのID */
      identityPoolId: 'ap-northeast-1:XXXX',
      /* リージョン */
      region: 'ap-northeast-1', 
      /* ユーザープールID */
      userPoolId: 'ap-northeast-1_XXXX',
      /* アプリクライントID */
      userPoolWebClientId: 'XXXX', 
  }
});

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

/* ③withAuthenticator でラップ */
export default withAuthenticator(App);

これでyarn startを実行するとCognitoのログイン画面が表示されます。 Create accountをクリックするとアカウント作成画面に移ります。

必要事項を入力して"Create Account"をクリックするとアカウントが作成されます。

アカウントを作成するとユーザープールの管理画面で登録したユーザーの情報を確認できます。

  • 登録前
  • 登録後
comments powered by Disqus