React+Amazon Cognitoを使用してユーザ画面の作成

0

初めに

今回は初めての投稿(質問)ということもあり何かと間違いや失礼な点があるかもしれないです。ご理解ご了承頂けると幸いです.また、お気軽にご指摘頂けると幸いです.よろしくお願いします.

実現したこと

  • React+Amazon Congitoでユーザ画面を作成したいです.

    • ログイン、サインアップ、ログアウトを実現しようと思っています.

    • ドキュメントを参考にするとReactの@aws-amplify/ui-reactライブララリのwithAuthenticatorを用いて実現可能だと判断しました.

    • 以下に記載したコードを実行しました.

問題点

  • Create Accountタブで表示される入力フォームは、Username、Password、Confirm Passwordの3項目ですが、実際にサインアップを行うとエラーが発生します.エラー原因はemailを入力にとっていないからです.今回、UserPoolを作成する際にemailを必須設定としました(emailの必須設定は絶対です).

  • ここで、AWSコンソール上のCognito > アプリケーションクライアントのところにある『ホストされたUIを表示』ボタンを押したページのSign upボタン押した先は、Username、Email、Passwordを入力する欄があり、実際にサインアップを正常に行うことが可能です.

    • Reactを用いて簡単に『ホストされたUIを表示』で表示される画面と同等なものを作成することは可能でしょうか.

    • 不可能な場合は、どのように実装するのが良いのでしょうか.

該当ソースコード

import React from 'react';
import { Amplify } from 'aws-amplify';
import { withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

Amplify.configure({
  Auth: {
    region: "ap-northeast-1",
    userPoolId: "<秘密情報>",
    userPoolWebClientId: "<秘密情報>",
  }
})

function Test() {
  return (
    <div className="App">
      <h1>My App</h1>
    </div>
  );
}

export default withAuthenticator(Test, { includeGreetings: true });
質問済み 1年前673ビュー
1回答
0

お問い合わせありがとうございます。
React を使用して Amazon Cognito の ホストされた UI と同じような画面を実装したいという認識の上、ご案内させていただきます。
AWS Amplify と Amazon Cognito を使用し、あらかじめ構築された UI コンポーネントを用いることで、React で ホストされた UI と同等なものを作成することは可能だと考えられます。
参考:Pre-built UI components (あらかじめ構築された UI コンポーネント)
https://aws.amazon.com/jp/about-aws/whats-new/2021/12/aws-announces-aws-amplify-studio/

現在、ご共有いただいている情報からお客様側で発生しているエラーの原因を特定することは難しいのですが、下記のステップでセットアップが可能であることを確認いたしました。

解決策:
下記のステップを完了することで、Amazon Cognito の ホストされた UI と同じような画面を実装することが可能でございます。
お客様に言及いただいた通り、こちらには React の @aws-amplify/ui-react ライブラリーの withAuthenticator をご使用いただけます。

はじめに、AWS Amplify を用いた React プロジェクトのセットアップを行う必要がございます。
AWS Amplify の設定には、お客様の AWS アカウントより作成した IAM ユーザーのアクセスキーとシークレットキーが必要になります。
設定完了後、React アプリケーションの作成を行い、Amazon Cognito を用いた Authentication のセットアップへと進みます。
この際、アプリケーションに必要な AWS Amplify ライブラリーがインストール・インポートされていることを確認してください。
それぞれの詳細な手順に関しましては、下記の資料 [1, 2] をご覧ください。
参考:
[1] AWS アカウント での IAM ユーザーの作成
https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_users_create.html
[2] Amplify Dev Center Project Setup(英語のみ)
https://docs.amplify.aws/lib/project-setup/prereq/q/platform/js/


Amazon Cognito を用いた Authentication のセットアップ

  1. Authentication を追加する
    下記のコマンドで、プロジェクトに Authentication の機能を追加します。
    amplify add auth
    この際に、どのように Authentication を設定するか(サインイン、サインアップの方法等)について質問されますので、それらの回答に応じて設定が完了します。
  2. バックエンドのアップデート
    下記のコマンドで、設定した Authentication の情報を、AWS Amplify のバックエンドへアップデートします。
    amplify push
  3. あらかじめ構築された UI コンポーネントの使用
    下記のコマンドで、ログイン・サインアップ・ログアウト時に使用される UI コンポーネントをインストールします。
    npm install aws-amplify @aws-amplify/ui-react
  4. withAuthenticator の使用
    作成したプロジェクトより、src/App.js を開きます。下記のようにコードを編集し、あらかじめ構築された UI コンポーネントを使用します。
import { Amplify } from 'aws-amplify';

import { withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

function App({ signOut, user }) {
  return (
    <>
      <h1>Hello {user.username}</h1>
      <button onClick={signOut}>Sign out</button>
    </>
  );
}

export default withAuthenticator(App);

また、withAuthenticator は React の高階コンポーネント( higher-order component; HOC)でございますため、withAuthenticator でその他下層のコンポーネントを囲って使用する必要がございます。


より詳細な設定を確認したい場合、下記のコマンドで AWS マネジメントコンソールへアクセスすることが可能でございます。
AWS マネジメントコンソール上では、Amazon Cognito に関する設定を確認・編集することが可能です。

amplify console

詳細に関しましては、下記の資料をご覧ください。
参考:Amplify Dev Center Authentication(英語のみ)
https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/

より具体的なサポートを必要とされる場合、是非以下のリンクよりサポートケースをご起票ください。
参考:サポートケースの管理・作成
https://docs.aws.amazon.com/ja_jp/awssupport/latest/user/case-management.html

AWS
回答済み 9ヶ月前

ログインしていません。 ログイン 回答を投稿する。

優れた回答とは、質問に明確に答え、建設的なフィードバックを提供し、質問者の専門分野におけるスキルの向上を促すものです。

質問に答えるためのガイドライン