Amazon Cognito と AWS Amplify を使用して React アプリケーションユーザーを認証する - AWS 規範的ガイダンス
まとめ前提条件と制限アーキテクチャToolsエピックストラブルシューティング関連リソース追加情報

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

Amazon Cognito と AWS Amplify を使用して React アプリケーションユーザーを認証する

作成者:ヤルノ・ボーレンズ (AWS)

環境:プロダクション

テクノロジー:ウェブサイトとウェブアプリ、セキュリティ、アイデンティティ、コンプライアンス、ソフトウェア開発とテスト

AWS サービス:Amazon Cognito、AWS Amplify

まとめ

このパターンは、Amazon Cognito と AWS Amplify を使用して React ウェブアプリケーションのユーザー認証を設定する方法を示しています。このパターンでは、Cognitoを使用してアプリケーションの認証、承認、およびユーザー管理を行います。このパターンでは、AWS Amplifyの機能をUI開発に拡張するオープンソースライブラリであるAmplify UIのコンポーネントも使用しています。Authenticator UI コンポーネントは、ログインセッションを管理し、Cognitoを介してユーザーを認証するクラウド接続ワークフローを実行します。

このパターンを実装すると、ユーザーは次のいずれかの認証情報を使用してサインインできます。

  • ユーザー名とパスワード

  • アップル、フェイスブック、グーグル、アマゾンなどのソーシャル ID プロバイダー

  • SAML 2.0 と互換性があるか OpenID コネクト (OIDC) と互換性のあるエンタープライズ ID プロバイダー

注:カスタム認証 UI コンポーネントを作成するには、Authenticator UI コンポーネントをヘッドレスモードで実行できます。

前提条件と制限

前提条件

  • アクティブな AWS アカウント

  • React ウェブアプリケーション

機能制限

  • このパターンは React ウェブアプリケーションにのみ適用されます。

  • このパターンは、事前に構築された Amplify UI コンポーネントを使用します。このソリューションには、カスタム UI コンポーネントの実装に必要な手順は含まれていません。

製品バージョン

  • React 18.2.0

  • アンプリファイ UI 3.2.1

  • Amplify 4.3.30

アーキテクチャ

ターゲットテクノロジースタック

  • Amazon Cognito

  • アンプリファイ UI

  • AWS Amplify

  • HTML

  • JavaScript

  • Node.js

  • npm

  • リアクト JSX

ターゲットアーキテクチャ

次の図は、Cognitoを使ってReactウェブアプリケーションのユーザー認証を設定するアーキテクチャを示しています。

Tools

AWS サービス

  • AWS Amplify は、フロントエンドのウェブ開発者やモバイル開発者が AWS でフルスタックアプリケーションをすばやく構築するのに役立つ専用ツールと機能のセットです。

  • Amazon Cognito は、ウェブアプリとモバイルアプリケーションの認証、承認、およびユーザー管理を行います。

その他のツール

  • Amplify UI は、easy-to-integrateカスタマイズ可能なコンポーネントやクラウドに接続できるコンポーネントを提供するオープンソースの UI ライブラリです。

  • js は、JavaScriptスケーラブルなネットワークアプリケーションを構築するために設計されたイベント駆動型のランタイム環境です。

  • npm は Node.js 環境で実行されるソフトウェアレジストリで、パッケージの共有や借用、プライベートパッケージのデプロイ管理に使用されます。

エピックス

タスク説明必要なスキル

ユーザープールを作成します。

Amazon Cognito ユーザープールを作成します。ユーザープールのサインインオプションとセキュリティ要件をユースケースに合わせて設定してください。

アプリケーションデベロッパー

アプリクライアントを追加します。

ユーザープールアプリクライアントを設定します。このクライアントは、アプリケーションが Cognitoユーザープールと通信するために必要です。

アプリケーションデベロッパー
タスク説明必要なスキル

依存関係をインストールします。

aws-amplify@aws-amplify/ui-reactおよびパッケージをインストールするには、アプリケーションのルートディレクトリから次のコマンドを実行します。

npm i @aws-amplify/ui-react aws-amplify
アプリケーションデベロッパー

Cognitoユーザープールを設定します。

次の例に基づいて、aws-exports.js次の情報を含むファイルを作成します。

  • Cognitoユーザープールが属する AWS リージョン

  • コグニートユーザープール ID

  • アプリクライアント ID

// replace the user pool region, id, and app client id details
export default {
    "REGION": "region",
    "USER_POOL_ID": "region_user_pool_id_here",
    "USER_POOL_APP_CLIENT_ID": "user_pool_app_client_id"
}
アプリケーションデベロッパー

Amplify サービスをインポートして設定します。

  1. アプリのエントリポイントファイル (たとえば、js) で、次のコード行を入力して Amplify aws-exports.js サービスのファイルをインポートしてロードします。

    import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';

  2. 次の例に基づいて、次の情報を含むように Amplify aws-exports.js クライアントをファイルに設定します。

  • Cognitoユーザープールが属する AWS リージョン

  • コグニートユーザープール ID

  • アプリクライアント ID

// Configure Amplify in index file or root file
Amplify.configure({
    Auth: {
        region: awsExports.REGION,
        userPoolId: awsExports.USER_POOL_ID,
        userPoolWebClientId: awsExports.USER_POOL_APP_CLIENT_ID
    }
})

詳細については、Amplify デベロッパーセンターのドキュメントの「Amplify カテゴリの設定」を参照してください。

アプリケーションデベロッパー

オーセンティケータ UI コンポーネントを追加します。

AuthenticatorUI コンポーネントを表示するには、アプリケーションのエントリポイントファイル (App.js) に次のコード行を追加します。

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

注:サンプルコードスニペットは Authenticator UI コンポーネントと Amplify UI styles.css ファイル (コンポーネントのビルド済みテーマを使用する場合に必要) をインポートします。

Authenticatorこのコンポーネントは次の 2 つの戻り値を提供します。

  • ユーザー詳細

  • ユーザーをサインアウトするために呼び出すことができる関数

次のコンポーネント例を参照してください。

function App() {
    return (
        <Authenticator>
            {({ signOut, user }) => (
                <div>
                    <p>Welcome {user.username}</p>
                    <button onClick={signOut}>Sign out</button>
                </div>
            )}
        </Authenticator>
    );
}

注:App.jsファイルの例については、このパターンの「追加情報」セクションを参照してください。

アプリケーションデベロッパー

（オプション）セッション情報を取得します。

ユーザーが認証されると、そのセッションに関するデータをAmplifyクライアントから取得できます。たとえば、ユーザーのセッションから JSON Web トークン (JWT) を取得して、そのセッションからバックエンド API へのリクエストを認証できます。

JWT を含むリクエストヘッダーの例を以下に示します。

import { Auth } from "aws-amplify";
(await Auth.currentSession()).getIdToken().getJwtToken()
アプリケーションデベロッパー

トラブルシューティング

問題解決策

新規ユーザーはアプリケーションにサインアップできません。

Cognitoユーザープールが、ユーザーが自分でサインアップしてユーザープールに参加できるように構成されていることを確認してください。

ユーザーがユーザープールにサインアップできるようにするには、以下を実行してください。

  1. AWS マネジメントコンソールにサインインし、Cognitoコンソールを開きます。

  2. 左側のナビゲーションペインで [ユーザープール] を選択します。

  3. リストからユーザープールを選択します。

  4. [一般設定] で [ポリシー] を選択します。

  5. 「ユーザー自身によるサインアップを許可」を選択します。

関連リソース

追加情報

App.js ファイルの例

App.js次のファイル例では、Cognitoユーザープールと Authenticator UI コンポーネントを使用して React ウェブアプリケーションのユーザーを認証しています。

import './App.css';

import {Amplify} from 'aws-amplify';
import awsExports from "./aws-exports";
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import { Auth } from "aws-amplify";

// Configure Amplify in index file or root file
Amplify.configure({
  Auth: {
    region: awsExports.REGION,
    userPoolId: awsExports.USER_POOL_ID,
    userPoolWebClientId: awsExports.USER_POOL_APP_CLIENT_ID
  }
})

function App() {
  return (
      <Authenticator>
        {({ signOut, user }) => (
            <div>
              <p>Welcome {user.username}</p>
              <button onClick={signOut}>Sign out</button>
            </div>
        )}
      </Authenticator>
  );
}

export default App;