使用 AWS Amplify 建立 React 應用程式,並使用 Amazon Cognito 新增身分驗證 - AWS 方案指引

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

使用 AWS Amplify 建立 React 應用程式,並使用 Amazon Cognito 新增身分驗證

由 Rishi Singla (AWS) 建立

Summary

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

先決條件和限制

先決條件

  • 作用中的 AWS 帳戶

  • 安裝在機器上的 Node.jsnpm

產品版本

  • 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 應用程式。

應用程式開發人員
任務描述所需技能

設定 Amplify 以連線至您的 AWS 帳戶。

執行 命令來設定 Amplify:

amplify-react-application % amplify configure

Amplify CLI 會要求您遵循以下步驟來設定對 AWS 帳戶的存取:

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

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

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

  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 開發中心https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli的文件。

General 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 身分驗證類別可與其他 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 以使用 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

相關資源