AWS Amplify を使用して React アプリケーションを作成し、Amazon Cognito による認証を追加する - AWS 規範ガイダンス
概要前提条件と制限アーキテクチャツールエピック関連リソース

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

AWS Amplify を使用して React アプリケーションを作成し、Amazon Cognito による認証を追加する

Rwest Singla、Amazon Web Services

概要

このパターンは、AWS Amplify を使用して React ベースのアプリケーションを作成する方法と、Amazon Cognito を使用してフロントエンドに認証を追加する方法を説明しています。AWS Amplify は、AWS でのモバイルアプリとウェブアプリケーションの開発を加速するための一連のツール (オープンソースフレームワーク、ビジュアル開発環境、コンソール) とサービス (ウェブアプリと静的ウェブサイトホスティング) から構成されています。

前提条件と制限

前提条件

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

  • マシンにインストールされている「Node.js」と「npm」

製品バージョン

  • Node.js バージョン 10.x 以降 (バージョンを確認するにはターミナルウィンドウで node -v を実行)

  • npm バージョン 6.x 以降 (バージョンを確認するにはターミナルウィンドウで npm -v を実行)

アーキテクチャ

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

  • 「AWS Amplify」

  • Amazon Cognito

ツール

エピック

タスク説明必要なスキル

Amplify CLI をインストールします。

Amplify CLI は、React アプリケーション用の AWS クラウドサービスを作成するための統合ツールチェーンです。Amplify CLI をインストールするには、実行

npm install -g @aws-amplify/cli

npm は、新しいメジャーバージョンが利用可能になると通知します。その場合は、次のコマンドを使用して npm のバージョンをアップグレードします。

npm install -g npm@9.8.0

9.8.0 はインストールしたいバージョンを指します。

アプリ開発者
タスク説明必要なスキル

React アプリを作成します。

新しい React アプリを作成するには、コマンドを使用します。

npx create-react-app amplify-react-application

ampify-react-application はアプリの名前です。

アプリが正常に作成されたら、次のメッセージが表示されます。

Success! Created amplify-react-application

React アプリ用にさまざまなサブフォルダーを含むディレクトリーが作成されます。

アプリ開発者

ローカルマシンでアプリを起動します。

前のステップで作成したディレクトリ amplify-react-application に移動し、以下のコマンドを実行します。

amplify-react-application% npm start

ローカルマシンで React アプリが起動します。

アプリ開発者
タスク説明必要なスキル

AWS アカウントに接続するように Amplify を設定します。

次のコマンドを実行して Amplify を設定します。

amplify-react-application % amplify configure

Amplify CLI では、次の手順に従い、AWS アカウントへのアクセスを設定するように求められます。

  1. AWS 管理者アカウントにサインインします。

  2. 使用しようとする AWS リージョンを指定します。

  3. プログラムによるアクセスを持つ AWS Identity and Access Management (IAM) ユーザーを作成し、ユーザーにアクセス権限 AdministratorAccess-Amplify ポリシーを添付します。

  4. [アクセスキー ID] と [シークレットアクセスキーS] を作成し、コピーします。

  5. これらの詳細をターミナルに入力します。

  6. プロファイル名を作成するか、デフォルトのプロファイルを使用します。

警告

このシナリオでは、プログラムによるアクセスと長期的な認証情報を持つ IAM ユーザーが必要です。これはセキュリティリスクをもたらします。このリスクを軽減するために、これらのユーザーにはタスクの実行に必要な権限のみを付与し、不要になったユーザーを削除することをお勧めします。アクセスキーは、必要に応じて更新できます。詳細については、「IAM ユーザーガイド」の「アクセスキーの更新」を参照してください。

これらのステップは、ターミナルに次のように表示されます。

Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
Specify the AWS Region
? region:  us-east-1
Follow the instructions at
https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli
to complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create
Press Enter to continue
Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  new

Successfully set up the new user.

これらの手順の詳細については、Amplify Dev Center の「ドキュメント」を参照してください。

AWS 全般、アプリ開発者
タスク説明必要なスキル

Amplify を初期化します。

  1. 新しいディレクトリで Amplify を初期化するには、以下を実行します。

    amplify init

    Amplify はプロジェクト名と設定パラメータの入力を求めます

  2. すべてのパラメーターを指定し、Y を押して、指定した構成でプロジェクトを初期化します。

    Project information
| Name: amplifyreactproject

| Environment: dev

| Default editor: Visual Studio Code

| App type: javascript

| Javascript framework: react

| Source Directory Path: src

| Distribution Directory Path: build

| Build Command: npm run-script build

| Start Command: npm run-script start

  3. 前のステップで作成した最初のプライベートサブネットを選択します。リソースは、作成したAmplify プロジェクトの dev 環境にデプロイされます。

  4. リソースが作成されたことを確認するには、「AWS Amplify コンソール」を開き、リソースの作成に使用された AWS CloudFormation テンプレートと詳細を表示します。

    Deploying root stack amplifyreactproject [ ====================-------------------- ] 2/4
amplify-amplifyreactproject-d… AWS::CloudFormation::Stack     CREATE_IN_PROGRESS            

UnauthRole                     AWS::IAM::Role                 CREATE_COMPLETE                 

DeploymentBucket               AWS::S3::Bucket                CREATE_IN_PROGRESS         

AuthRole                       AWS::IAM::Role                 CREATE_COMPLETE
アプリ開発者、AWS 全般
タスク説明必要なスキル

認証を追加します。

amplify add <category> コマンドで、ユーザーログインやバックエンド API などの機能を追加できます。このステップでは、コマンドで認証を追加します。

Amplify は、Amazon Cognito、フロントエンドライブラリ、およびドロップイン認証システム UI コンポーネントを備えたバックエンド認証サービスを提供します。ユーザーサインアップ、ユーザーサインイン、多要素認証、ユーザーサインアウト、パスワードレスサインインなどの機能があります。Amazon、Google と Facebook などのフェデレーションアイデンティティプロバイダーと統合してユーザーアイデンティティを認証することもできます。Amplify 認証カテゴリは、API、分析、ストレージなどの他のAmplify カテゴリとシームレスに統合されるため、認証されたユーザーと認証されていないユーザーとの認可ルールを定義できます。

  1. React アプリの認証を設定するには、以下のコマンドを実行します。

    amplify-react-application1 % amplify add auth

    これにより、次の情報とプロンプトが表示されます。ビジネス要件とセキュリティ要件に応じて適切な構成を選択できます。

    Using service: Cognito, provided by: awscloudformation
 The current configured provider is Amazon Cognito. 
Do you want to use the default authentication and security configuration? (Use arrow keys)

❯ Default configuration 

  Default configuration with Social Provider (Federation) 

  Manual configuration 

  I want to learn more.

  2. 簡単な例として、デフォルト設定を選択して、ユーザーのログインメカニズム (この場合は電子メール) を選択します。

    How do you want users to be able to sign in? 
 Username 

❯ Email 

  Phone Number 

  Email or Phone Number 

  I want to learn more.

  3. 詳細設定を省略して、認証リソースの追加を完了します。  

    Do you want to configure advanced settings? (Use arrow keys)
❯ No, I am done. 

  Yes, I want to make some additional changes.

  4. ローカルバックエンドリソースを構築してクラウドにプロビジョニングします。

    amplify-react-application1 % amplify push

    このコマンドは、お使いのアカウントで Congito ユーザープールに適切な変更を加えます。

  5. ［Y］を押して、CloudFormationを使用して auth リソースを設定します。

    これにより、以下のリソースを設定します。

    UserPool                       AWS::Cognito::UserPool         CREATE_COMPLETE  
UserPoolClientWeb              AWS::Cognito::UserPoolClient   CREATE_COMPLETE    
UserPoolClientWeb              AWS::Cognito::UserPoolClient   CREATE_COMPLETE            
UserPoolClientRole             AWS::IAM::Role                 CREATE_COMPLETE                
UserPoolClientLambda           AWS::Lambda::Function          CREATE_COMPLETE  
UserPoolClientLambdaPolicy     AWS::IAM::Policy               CREATE_COMPLETE                
UserPoolClientLogPolicy        AWS::IAM::Policy               CREATE_IN_PROGRESS

    「AWS Cognito コンソール」を使用してこれらのリソースを表示することもできます (Cognito ユーザープールと アイデンティティプールを探してください)。

    このステップでは、React アプリの src フォルダー内の aws-exports.js ファイルを Cognito ユーザープールとアイデンティティプールの設定で更新します。

アプリ開発者、AWS 全般
タスク説明必要なスキル

App.js ファイルを変更してください。

この src フォルダーで、App.js ファイルを開いて修正します。変更されたファイルは以下のようになります。

{  App.Js File after modifications:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Amplify } from 'aws-amplify';
import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
function App({ signOut }) {
  return (
      <div>
      <h1>Thankyou for doing verification</h1>
      <h2>My Content</h2>
       <button onClick={signOut}>Sign out</button>
    </div>
  );
}
export default withAuthenticator(App);
アプリ開発者

React パッケージをインポートします。

この App.js ファイルは 2 つの React パッケージをインポートされます。次のコマンドを使用してパッケージをインストールします。

amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react
アプリ開発者
タスク説明必要なスキル

アプリを起動します。

ローカルマシンで React アプリを起動します。

amplify-react-application1 % npm start
アプリ開発者、AWS 全般

認証を確認します。

アプリが認証パラメータの入力を求めるメッセージを表示するかを確認します。(この例では、サインイン方法として電子メールを設定しています)。

フロントエンド UI では、ログイン認証情報の入力が求められ、アカウントを作成するオプションが表示されるはずです。

Amplify ビルドプロセスを設定して、継続的デプロイメントワークフローの一部としてバックエンドを追加することもできます。ただし、このパターンではそのオプションは対象外です。

アプリ開発者、AWS 全般

関連リソース