あるSEのつぶやき・改

IT・システム開発に関することをつぶやいています。

React+Amplify+Cognitoでユーザー認証を実装する


はじめに

React + AWS Amplify + Cognito でユーザー認証を行うアプリを作ってみたいと思います。

Amplify は AWS のサービスを便利に使用できる JavaScript ライブラリで、Cognito は AWS でユーザー認証を行えるサービスになります。

この記事では、TypeScprit な React プロジェクトで、Amplify + Cognito を使用するサンプルをご紹介します。

Cognito の設定

Cognito の管理画面で、まずはユーザープールを作成します。

ユーザープールの追加画面で、プール名を入力して「デフォルトを確認する」から作成まで行ってします。

f:id:fnyablog:20190324165139p:plain:w480

ユーザープールが作成されると「プールID」が発行されるので控えておきます。

ここでユーザーも追加しておきましょう。

ユーザーとグループのユーザーの作成から、以下の画面でユーザーを登録します。

f:id:fnyablog:20190324170608p:plain:w480

以下のようなパスワード通知がメールアドレスに届けば成功です。なお、このパスワードは初回ログイン時に変更が必要になります。

Your temporary password

Your username is Test and temporary password is HL2yuUG|.

アプリクライアントの設定を行います。

アプリクライアント名を入力し、「クライアントシークレットの作成」のチェックを外し、アプリクライアントの作成を行います。

f:id:fnyablog:20190324165754p:plain:w480

作成が終わると、「アプリクライアントID」が発行されるので控えておきます。

フェデレーティッドアイデンティティで、新しいIDプールの作成を行います。

IDプール名、ユーザープールIDとアプリクライアントIDを入力して「プールの作成」を行います。

f:id:fnyablog:20190324171800p:plain:w480

f:id:fnyablog:20190324171818p:plain:w480

途中でロールの許可を求められるので「許可」します。

最後の画面で、プラットフォームを「JavaScript」にすると表示される「IdentityPoolId」を控えておきます。

f:id:fnyablog:20190324172549p:plain:w480

これで Cognito の設定は完了です。

React プロジェクトの作成

React は TypeScript を使いたいので、以下のコマンドでプロジェクトを作成します。

> npx create-react-app プロジェクト名 --scripts-version=react-scripts-ts

次に、プロジェクトのカレントで Amplify のパッケージを追加します。

> yarn add aws-amplify aws-amplify-react

ただこのままではうまくいかなく、TypeScript で Amplify を使用するにあたっていろいろなエラーが出たので、別記事にまとめておいたので必要時にご参照ください。

www.aruse.net

App.tsx は以下のようになります。

import Amplify from 'aws-amplify';
import { Authenticator } from 'aws-amplify-react';
import * as React from 'react';

Amplify.configure({
  Auth: {
    identityPoolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxxxxxxx', // FederatedID連携後に追加する
    region: 'ap-northeast-1', // REQUIRED - Amazon Cognito Region
    userPoolId: 'ap-northeast-1_xxxxxxxxx', // OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx', // OPTIONAL - Amazon Cognito Web Client ID
  }
});

class App extends React.Component {
  public render() {
    return (
      <Authenticator />
    );
  }
}

export default App;

実行してみる

下記コマンドでプロジェクトをビルド&実行します。

> yarn start

ログイン画面が表示されるので、ユーザー名と通知されたパスワードを入力してログインします。

f:id:fnyablog:20190324173806p:plain:w480

パスワードの変更画面が表示されるので、新しいパスワードを設定します。

f:id:fnyablog:20190324174249p:plain:w480

ログイン後の画面が無事に表示されました。

f:id:fnyablog:20190324175346p:plain:w480

おわりに

まだ React のプロジェクトにどのように Cognito を組み込むかといった課題はあるものの、とりあえずは動作させることができたのはよかったです。

Cognito でユーザー管理ができれば、モバイルアプリとWebアプリケーションで同じユーザーを扱うことも簡単にできそうです。

可能性は広がりますね。

参考サイト

yamano3201.hatenablog.jp

dev.classmethod.jp

qiita.com