本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
使用 AWS Amplify 建立 React 應用程式，並使用 Amazon Cognito 新增身分驗證
由 Rishi Singla (AWS) 建立
Summary
此模式示範如何使用 AWS Amplify 建立以 React 為基礎的應用程式，以及如何使用 Amazon Cognito 將身分驗證新增至前端。AWS Amplify 由一組工具 （開放原始碼架構、視覺化開發環境、主控台） 和服務 (Web 應用程式和靜態網站託管） 組成，以加速 AWS 上行動和 Web 應用程式的開發。
先決條件和限制
先決條件
產品版本
架構
目標技術堆疊
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 應用程式。 | 應用程式開發人員 |
| 任務 | 描述 | 所需技能 |
|---|
設定 Amplify 以連線至您的 AWS 帳戶。 | 執行 命令來設定 Amplify： amplify-react-application % amplify configure
Amplify CLI 會要求您遵循以下步驟來設定對 AWS 帳戶的存取： 登入您的 AWS 管理員帳戶。 指定您要使用的 AWS 區域。 建立具有程式設計存取權的 AWS Identity and Access Management (IAM) 使用者，並將AdministratorAccess-Amplify許可政策連接至使用者。 建立並複製存取金鑰 ID 和私密存取金鑰。 在終端機中輸入這些詳細資訊。 建立設定檔名稱或使用預設設定檔。
此案例需要具有程式設計存取和長期登入資料的 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 開發中心https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli的文件。 | General AWS，應用程式開發人員 |
| 任務 | 描述 | 所需技能 |
|---|
初始化 Amplify。 | 若要在新目錄中初始化 Amplify，請執行： amplify init
Amplify 會提示您輸入專案名稱和組態參數 指定所有參數，然後按 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
選取您在上一個步驟中建立的設定檔。資源將部署到您建立的 Amplify 專案中的dev環境中。 若要確認資源已建立，您可以開啟 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 身分驗證類別可與其他 Amplify 類別無縫整合，例如 API、分析和儲存，因此您可以為已驗證和未驗證的使用者定義授權規則。 若要設定 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.
如需簡單範例，請選擇預設組態，然後選取使用者的登入機制 （在此情況下為電子郵件）： How do you want users to be able to sign in?
Username
❯ Email
Phone Number
Email or Phone Number
I want to learn more.
略過進階設定以完成新增身分驗證資源： Do you want to configure advanced settings? (Use arrow keys)
❯ No, I am done.
Yes, I want to make some additional changes.
建置您的本機後端資源，並在雲端中佈建它們： amplify-react-application1 % amplify push
此命令會對您帳戶中的 Congito 使用者集區進行適當的變更。 按 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 使用者集區和身分集區）。 此步驟會使用 Cognito 使用者集區和身分集區組態，更新 React 應用程式src資料夾中aws-exports.js的檔案。
| 應用程式開發人員，一般 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 檔案會匯入兩個 React 套件。使用 命令安裝這些套件：
amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react
| 應用程式開發人員 |
| 任務 | 描述 | 所需技能 |
|---|
啟動應用程式。 | 在本機電腦上啟動 React 應用程式： amplify-react-application1 % npm start
| 應用程式開發人員，一般 AWS |
檢查身分驗證。 | 檢查應用程式是否提示驗證參數。（在我們的範例中，我們已將電子郵件設定為登入方法。) 前端 UI 應該會提示您輸入登入憑證，並提供建立 帳戶的選項。 您也可以設定 Amplify 建置程序，將後端新增為連續部署工作流程的一部分。不過，此模式不會涵蓋該選項。 | 應用程式開發人員，一般 AWS |
相關資源
