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

# AWS Amplify を使用して React アプリケーションを作成し、Amazon Cognito による認証を追加する
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito"></a>

*Amazon Web Services、Rishi Singla*

## 概要
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-summary"></a>

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

## 前提条件と制限事項
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-prereqs"></a>

**前提条件**
+ アクティブな AWS アカウント
+ マシンにインストールされている「[Node.js](https://nodejs.org/en/download/)」と「[npm](https://www.npmjs.com/get-npm)」

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

## アーキテクチャ
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-architecture"></a>

**ターゲットテクノロジースタック**
+ 「AWS Amplify」
+ Amazon Cognito

## ツール
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-tools"></a>
+ 「[Amplify コマンドラインインターフェイス (CLI)](https://docs.amplify.aws/cli/)」
+ 「[Amplify ライブラリ](https://docs.amplify.aws/lib/q/platform/react-native/)」(オープンソースのクライアントライブラリ)
+ 「[Amplify Studio](https://docs.amplify.aws/console/)」(ビジュアルインターフェイス)

## エピック
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-epics"></a>

### AWS Amplify CLI をインストール
<a name="install-aws-amplify-cli"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| Amplify CLI をインストールします。 | Amplify CLI は、React アプリケーション用の AWS クラウドサービスを作成するための統合ツールチェーンです。Amplify CLI をインストールするには、実行<pre>npm install -g @aws-amplify/cli</pre>npm は、新しいメジャーバージョンが利用可能になると通知します。その場合は、次のコマンドを使用して npm のバージョンをアップグレードします。<pre>npm install -g npm@9.8.0</pre>9.8.0 はインストールしたいバージョンを指します。 | アプリ開発者 | 

### React アプリを作成
<a name="create-a-react-app"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| React アプリを作成します。 | 新しい React アプリを作成するには、コマンドを使用します。<pre>npx create-react-app amplify-react-application</pre>`ampify-react-application` はアプリの名前です。アプリが正常に作成されたら、次のメッセージが表示されます。<pre>Success! Created amplify-react-application</pre>React アプリ用にさまざまなサブフォルダーを含むディレクトリーが作成されます。 | アプリ開発者 | 
| ローカルマシンでアプリを起動します。 | 前のステップで作成したディレクトリ `amplify-react-application` に移動し、以下のコマンドを実行します。<pre>amplify-react-application% npm start</pre>ローカルマシンで React アプリが起動します。 | アプリ開発者 | 

### Amplify CLI の設定
<a name="configure-the-amplify-cli"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| AWS アカウントに接続するように Amplify を設定します。 | 次のコマンドを実行して Amplify を設定します。<pre>amplify-react-application % amplify configure</pre>Amplify CLI では、次の手順に従い、AWS アカウントへのアクセスを設定するように求められます。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html)このシナリオでは、プログラムによるアクセスと長期的な認証情報を持つ IAM ユーザーが必要ですが、これにはセキュリティ上のリスクがあります。このリスクを軽減するために、これらのユーザーにはタスクの実行に必要な権限のみを付与し、不要になったユーザーは削除することをお勧めします。アクセスキーは、必要に応じて更新できます。詳細については、「[IAM ユーザーガイド](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html#Using_RotateAccessKey)」の「*アクセスキーを更新する*」を参照してください。これらのステップは、ターミナルに次のように表示されます。<pre>Follow these steps to set up access to your AWS account:<br />Sign in to your AWS administrator account:<br />https://console.aws.amazon.com/<br />Press Enter to continue<br />Specify the AWS Region<br />? region:  us-east-1<br />Follow the instructions at<br />https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli<br />to complete the user creation in the AWS console<br />https://console.aws.amazon.com/iamv2/home#/users/create<br />Press Enter to continue<br />Enter the access key of the newly created user:<br />? accessKeyId:  ********************<br />? secretAccessKey:  ****************************************<br />This would update/create the AWS Profile in your local machine<br />? Profile Name:  new<br /><br />Successfully set up the new user.</pre>これらの手順の詳細については、Amplify Dev Center の「[ドキュメント](https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli)」を参照してください。 | AWS 全般、アプリ開発者 | 

### Amplify を初期化
<a name="initialize-amplify"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| Amplify を初期化します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | アプリ開発者、AWS 全般 | 

### フロントエンドに認証を追加します。
<a name="add-authentication-to-the-frontend"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| 認証を追加します。 | `amplify add <category>` コマンドで、ユーザーログインやバックエンド API などの機能を追加できます。このステップでは、コマンドで認証を追加します。Amplify は、Amazon Cognito、フロントエンドライブラリ、およびドロップイン認証システム UI コンポーネントを備えたバックエンド認証サービスを提供します。ユーザーサインアップ、ユーザーサインイン、多要素認証、ユーザーサインアウト、パスワードレスサインインなどの機能があります。Amazon、Google と Facebook などのフェデレーションアイデンティティプロバイダーと統合してユーザーアイデンティティを認証することもできます。Amplify 認証カテゴリは、API、分析、ストレージなどの他のAmplify カテゴリとシームレスに統合されるため、認証されたユーザーと認証されていないユーザーとの認可ルールを定義できます。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | アプリ開発者、AWS 全般 | 

### ［App.js］ファイルを変更してください。
<a name="change-the-app-js-file"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| App.js ファイルを変更してください。 | この `src` フォルダーで、`App.js` ファイルを開いて修正します。変更されたファイルは以下のようになります。<pre>{  App.Js File after modifications:<br />import React from 'react';<br />import logo from './logo.svg';<br />import './App.css';<br />import { Amplify } from 'aws-amplify';<br />import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';<br />import awsconfig from './aws-exports';<br />Amplify.configure(awsconfig);<br />function App({ signOut }) {<br />  return (<br />      <div><br />      <h1>Thankyou for doing verification</h1><br />      <h2>My Content</h2><br />       <button onClick={signOut}>Sign out</button><br />    </div><br />  );<br />}<br />export default withAuthenticator(App);</pre> | アプリ開発者 | 
| React パッケージをインポートします。 | この `App.js` ファイルは 2 つの React パッケージをインポートされます。次のコマンドを使用してパッケージをインストールします。<pre>amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react</pre> | アプリ開発者 | 

### React アプリを起動し、認証を確認します。
<a name="launch-the-react-app-and-check-authentication"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| アプリを起動します。 | ローカルマシンで React アプリを起動します。<pre>amplify-react-application1 % npm start</pre> | アプリ開発者、AWS 全般 | 
| 認証を確認します。 | アプリが認証パラメータの入力を求めるメッセージを表示するかを確認します。(この例では、サインイン方法として電子メールを設定しています)。フロントエンド UI では、ログイン認証情報の入力が求められ、アカウントを作成するオプションが表示されるはずです。Amplify ビルドプロセスを設定して、継続的デプロイメントワークフローの一部としてバックエンドを追加することもできます。ただし、このパターンではそのオプションは対象外です。 | アプリ開発者、AWS 全般 | 

## 関連リソース
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-resources"></a>
+ 「[開始方法](https://docs.npmjs.com/getting-started)」(npm ドキュメント)
+ 「[スタンドアロンの AWS アカウントを作成する](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html)」(AWS アカウント管理のドキュメント) 
+ 「[AWS Amplify のドキュメント](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)」
+ 「[Amazon Cognito のドキュメント](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html)」