設置一個示例 React 單頁應用程序 - Amazon Cognito
建立應用程式建立開 Lightsail 員環境

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

設置一個示例 React 單頁應用程序

在本教學中，您將建立 React 單頁應用程式，以測試使用者註冊、確認和登入。React 是一個 JavaScript基於 Web 和移動應用程序的庫，重點放在用戶界面（UI）。此範例應用程式示範 Amazon Cognito 使用者集區的一些基本功能。如果您已經在使用 React 進行 Web 應用程式開發方面有經驗，請從下載範例應用程式 GitHub。

下列螢幕擷取畫面是您要建立的應用程式中的初始驗證頁面。

反應型範例 Web 應用程式的註冊頁面螢幕擷取畫面。

[建立使用者集區] 程序會為您設定可搭配範例應用程式使用的使用者集區。如果您的使用者集區符合下列需求，則可略過此步驟：

  • 使用者可以使用其電子郵件地址登入。Cognito 使用者集區登入選項：電子郵件。

  • 使用者名稱不區分大小寫。使用者名稱需求：未選取使用者名稱區分大小寫。

  • 不需要多因素身份驗證（MFA）。MFA 執行：可選 M FA。

  • 您的使用者集區會透過電子郵件訊息驗證使用者設定檔確認的屬性。要驗證的屬性：傳送電子郵件訊息、驗證電子郵件地址。

  • 電子郵件是唯一必需的屬性。必要屬性：電子郵件。

  • 使用者可以在您的使用者集區中自行註冊。自助註冊：已選取「啟用自助註冊」。

  • 您的初始應用程序客戶端是一個公共客戶端，允許使用用戶名和密碼登錄。應用程序類型：公共客戶端，身份驗證流程：ALLOW_USER_PASSWORD_AUTH。

建立新的使用者集區

  1. 前往 Amazon Cognito 主控台。如果出現提示，請輸入您的 AWS 認證。

  2. 選擇 [建立使用者集區] 按鈕。您可能需要從左側導覽窗格中選取 [使用者集區]，以顯示此選項。

  3. 在頁面右上角，選擇 Create a user pool (建立使用者集區)，以開始建立使用者集區精靈。

  4. 在 [設定登入體驗] 中，您可以選擇要用於此使用者集區的身分識別提供者 (IdPs)。如需詳細資訊，請參閱 透過第三方新增使用者集區登入。

    1. 在驗證提供者下，對於提供者類型，請確保僅選取 Cognito 使用者集區。

    2. 在 Cognito 使用者集區登入選項中，選擇 [使用者名稱]。請勿選取任何其他使用者名稱要求。

    3. 保留所有其他選項為預設值，然後選擇「下一步」。

  5. 在 [設定安全性需求] 中，您可以選擇密碼原則、多重要素驗證 (MFA) 需求，以及使用者帳戶復原選項。如需詳細資訊，請參閱 使用 Amazon Cognito 使用者集區安全性功能。

    1. 對於密碼原則，請確認密碼原則模式設定為 Cognito 預設值。

    2. 在多因素驗證下，對於 MFA 強制，請選擇選擇性 MFA。

    3. 對於 MFA 方法，請選擇驗證器應用程式和 SMS 訊息。

    4. 對於使用者帳戶復原，請確認已選取 [啟用自助帳戶復原]，且使用者帳戶復原郵件傳遞方法設定為 [僅限電子郵件]。

    5. 保留所有其他選項為預設值，然後選擇「下一步」。

  6. 在 [設定註冊體驗] 中，您可以決定新使用者在以新使用者身分註冊時如何驗證其身分，以及在使用者註冊流程期間，哪些屬性應為必要或選用屬性。如需詳細資訊，請參閱 管理使用者集區中的使用者。

    1. 確認已選取 「啟用自助註冊」。此設定會開啟您的使用者集區，以便從網際網路上的任何人進行註冊。這是用於範例應用程式的目的，但在生產環境中請謹慎套用此設定。

    2. 在「Cognito 協助驗證與確認」下，確認已選取「允許 Cognito 自動傳送訊息以進行驗證並確認」核取方塊。

    3. 確認要驗證的屬性設定為傳送電子郵件訊息，驗證電子郵件地址。

    4. 在 [驗證屬性變更] 下，確認已選取預設選項：選取更新處於擱置狀態時保留原始屬性值，以及將更新擱置時的 Active 屬性值設定為 [電子郵件地址]。

    5. 在必要屬性下，確認根據先前選取的必要屬性顯示電子郵件。

      重要

      對於此示例應用程序，您的用戶池不得將 phone_number 設置為必需屬性。如果 phone_number 顯示為必要屬性，請檢閱並更新您先前的選擇：

      • 可選 MFA，僅用於用戶帳戶恢復消息的傳遞方法的電子郵件

      • 發送電子郵件，驗證要驗證屬性的電子郵件地址

    6. 保留所有其他選項為預設值，然後選擇「下一步」。

  7. 在設定訊息傳遞中，您可以設定與 Amazon 簡單電子郵件服務和 Amazon 簡單通知服務的整合，以傳送電子郵件和簡訊給使用者以進行註冊、帳戶確認、MFA 和帳戶復原。如需詳細資訊，請參閱 Amazon Cognito 使用者集區的電子郵件設定 及 Amazon Cognito 使用者集區的簡訊設定。

    1. 對於電子郵件提供者，請選擇「使用 Cognito 傳送電子郵件」，並使用 Amazon Cognito 提供的預設電子郵件寄件者。這個低電子郵件量的設定已足以進行應用程式測試。您可以在使用 Amazon 簡易電子郵件服務 (Amazon SES) 驗證電子郵件地址並選擇使用 Amazon SES 傳送電子郵件後退貨。

    2. 對於 SMS，請選取建立新的 IAM 角色，然後輸入 IAM 角色名稱。這會建立一個角色，授予 Amazon Cognito 許可以傳送簡訊的權限。

    3. 保留所有其他選項為預設值，然後選擇「下一步」。

  8. 在「整合您的應用程式」中，您可以為使用者集區命名、設定託管 UI，以及建立應用程式用戶端。如需詳細資訊，請參閱 使用託管 UI 添加應用程序客戶端。範例應用程式不使用託管 UI。

    1. 在 [使用者集區名稱] 下，輸入使用者集區名稱。

    2. 請勿選取 [使用 Cognito 託管的使用者介面]。

    3. 在初始應用程序客戶端下，確認應用程序類型設置為公共客戶端。

    4. 在 [用戶端密碼] 下，確認已選取 [不產生用戶端密碼]。

    5. 輸入 App client name (應用程式用戶端名稱)。

    6. 展開進階應用程式用戶端設定 新增ALLOW_USER_PASSWORD_AUTH至驗證流程清單。

    7. 保留所有其他選項為預設值，然後選擇「下一步」。

  9. 在「檢閱並建立」畫面中檢閱您的選擇，並視需要修改任何選取項目。如果您對使用者集區設定感到滿意，請選擇 [建立使用者集區] 以繼續。

  10. 在 [使用者集區] 頁面中，選擇新的使用者集區。

  11. 在使用者集區概觀下，記下您的使用者集區 ID。您將在建立範例應用程式時提供此字串。

  12. 選擇「應用程式整合」標籤，然後找到「應用程式用戶端和分析」 選取新的應用程式用戶端。記下您的客戶 ID。

建立應用程式

若要建置此應用程式，您必須設定開發人員環境。開發人員環境要求為：

  1. Node.js 已安裝並更新。

  2. 節點包管理器（npm）已安裝並更新至至少版本 10.2.3。

  3. 您可以在網頁瀏覽器中的 TCP 連接埠 5173 存取該環境。

要創建一個示例反應 Web 應用程序

  1. 登入您的開發人員環境，並導覽至應用程式的父目錄。

    cd ~/path/to/project/folder/

  2. 創建一個新的反應服務。

    npm create vite@latest frontend-client -- --template react-ts

  3. 從上的cognito-developer-guide-react-example程 AWS 式碼範例儲存庫複製專案資料夾 GitHub。

    cd ~/some/other/path
    git clone https://github.com/awsdocs/aws-doc-sdk-examples.git
    cp -r ./aws-doc-sdk-examples/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example/frontend-client ~/path/to/project/folder/frontend-client

  4. 導航到項src目中的目錄。

    cd ~/path/to/project/folder/frontend-client/src

  5. 編輯config.ts並取代下列值：

    1. YOUR_AWS_REGION以 AWS 區域 程式碼取代。例如：us-east-1。

    2. 取代YOUR_COGNITO_USER_POOL_ID為您指定用於測試的使用者集區 ID。例如：us-east-1_EXAMPLE。使用者集區必須 AWS 區域 是您在上一個步驟中輸入的。

    3. YOUR_COGNITO_APP_CLIENT_ID替換為您指定要測試的應用程序客戶端的 ID。例如：1example23456789。應用程式用戶端必須位於上一個步驟的使用者集區中。

  6. 如果您要從 IP 以外的 IP 存取範例應用程式localhost，請將該行編輯package.json並變更"dev": "vite",為"dev": "vite --host 0.0.0.0",。

  7. 安裝您的應用程序。

    npm install

  8. 啟動應用程序。

    npm run dev

  9. 在網頁瀏覽器中存取應用程式，位於http://localhost:5173或http://[IP address]:5173。

  10. 使用有效的電子郵件地址註冊新用戶。

  11. 從您的電子郵件中檢索確認代碼。在應用程序中輸入確認代碼。

  12. 使用您的用戶名和密碼登錄。

使用 Amazon Lightsail 創建反應開發人員環境

開始使用此應用程式的快速方法是使用 Amazon Lightsail 建立虛擬雲端伺服器。

使用 Lightsail，您可以快速建立小型伺服器執行個體，並預先設定了此範例應用程式的先決條件。您可以透過以瀏覽器為基礎的用戶端透過 SSH 連線至執行個體，並透過公用或私有 IP 位址連線至 Web 伺服器。

若要為此範例應用程式建立 Lightsail 實體

  1. 前往 Li ghtsail 台。如果出現提示，請輸入您的 AWS 認證。

  2. 選擇 建立執行個體。

  3. 針對 [選取平台]，選擇 [Linu x/Unix]。

  4. 針對 [選取藍圖]，選擇 Node.js。

  5. 在 [識別您的執行個體] 底下，為您的開發環境提供易記的名

  6. 選擇 建立執行個體。

  7. Lightsail 建立您的執行個體之後，選取它，然後從 [Connect] 索引標籤中選擇 [使用 SSH Connect]。

  8. SSH 工作階段會在瀏覽器視窗中開啟。執行node -v並npm -v確認您的執行個體是使用 Node.js 佈建的，以及 10.2.3 的最低 npm 版本。

  9. 繼續配置您的 React 應用程序。