使用 AWS Amplify 增建立反應應用程式，並使用 Amazon Cognito 新增身份驗證 - AWS 方案指引
Summary先決條件和限制架構工具史诗相關資源

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

使用 AWS Amplify 增建立反應應用程式，並使用 Amazon Cognito 新增身份驗證

創建者日施新格拉 (AWS)

環境：PoC 或試點

技術：Web 和行動應用程式；安全性、身分識別、合規性

工作負載：所有其他工作

AWS 服務：AWS Amplify；Amazon Cognito

Summary

此模式示範如何使用 AWS Amplify 建立反應型應用程式，以及如何使用 Amazon Cognito 將身份驗證新增至前端。AWS Amplify 包含一組工具 (開放原始碼架構、視覺開發環境、主控台) 和服務 (Web 應用程式和靜態網站託管)，可加速 AWS 上行動應用程式和 Web 應用程式的開發。

先決條件和限制

前提

產品版本

  • 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 應用程序，請使用以下命令：

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 帳戶的存取權限：

  1. 登入您的 AWS 管理員帳戶。

  2. 指定您要使用的 AWS 區域。

  3. 建立具有程式設計存取AdministratorAccess-Amplify權的 AWS Identity and Access Management (IAM) 使用者，並將許可政策附加到使用者。

  4. 建立並複製存取金鑰 ID 和秘密存取金鑰。

  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 開發人員中心中的文件。

一般 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，谷歌和 Facebook 等聯合身份提供商集成來對用戶進行身份驗證。Amplify 驗證類別可與其他 Amplify 類別 (例如 API、分析和儲存) 無縫整合，因此您可以為已驗證和未驗證的使用者定義授權規則。

  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 鍵可使用來配置auth資源 CloudFormation。

    這會設定下列資源：

    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);
應用程式開發人員

導入反應包。

該App.js文件導入兩個反應包。使用以下指令安裝這些套件：

amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react
應用程式開發人員
任務描述所需技能

啟動應用程序。

在您的本地機器上啟動 React 應用程序：

amplify-react-application1 % npm start
一般 AWS 應用程式開發人員

檢查驗證。

檢查應用程式是否提示輸入驗證參數。（在我們的示例中，我們將電子郵件配置為登錄方法。）

前端 UI 應提示您輸入登錄憑據，並提供創建帳戶的選項。

您也可以設定 Amplify 建置程序，將後端新增為持續部署工作流程的一部分。但是，此模式不涵蓋該選項。

一般 AWS 應用程式開發人員

相關資源