設定 React 單頁應用程式範例 - Amazon Cognito
建立應用程式建立 Lightsail 開發人員環境

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

設定 React 單頁應用程式範例

在本教學課程中，您將建立 React 單頁應用程式，您可以在其中測試使用者註冊、確認和登入。React 是以 JavaScript為基礎的 Web 和行動應用程式程式庫，著重於使用者介面 （UI）。此範例應用程式示範 Amazon Cognito 使用者集區的一些基本函數。如果您已使用 React 進行 Web 應用程式開發，請從 下載範例應用程式 GitHub。

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

以 React 為基礎的範例 Web 應用程式的註冊頁面螢幕擷取畫面。

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

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

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

  • 不需要多重要素驗證 （MFA）。MFA 強制執行 ：選用 MFA。

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

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

  • 使用者可以在使用者集區中註冊自己。自我註冊 ：選取啟用自我註冊。

  • 您的初始應用程式用戶端是允許使用使用者名稱和密碼登入的公有用戶端。應用程式類型：公有用戶端、身分驗證流程：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. 在驗證屬性變更 下，確認已選取預設選項：選取更新擱置時保留原始屬性值，以及將更新擱置時保留作用中屬性值設為電子郵件地址 。

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

      重要

      對於此範例應用程式，您的使用者集區不得將 phone_number 設定為必要的屬性。如果 phone_number 顯示為必要屬性，請檢閱並更新您先前的選項：

      • 選用 MFA，使用者帳戶復原訊息的交付方法僅限電子郵件

      • 傳送電子郵件訊息、驗證屬性的電子郵件地址以進行驗證

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

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

    1. 對於電子郵件提供者 ，選擇使用 Cognito 傳送電子郵件，並使用 Amazon Cognito 提供的預設電子郵件寄件者。此低電子郵件磁碟區設定足以進行應用程式測試。您可以在使用 Amazon Simple Email Service （Amazon SES） 驗證電子郵件地址後傳回 ，然後選擇使用 Amazon 傳送電子郵件SES。

    2. 針對 SMS，選取建立新IAM角色，然後輸入IAM角色名稱 。這會建立角色，將許可授予 Amazon Cognito 以傳送訊息SMS。

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

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

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

    2. 請勿選取使用 Cognito 託管 UI 。

    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. 環境可在 Web 瀏覽器中的TCP連接埠 5173 上存取。

建立 React Web 應用程式範例

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

    cd ~/path/to/project/folder/

  2. 建立新的 React 服務。

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

  3. 從 上的 AWS 程式碼範例儲存庫複製cognito-developer-guide-react-example專案資料夾 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.json和取代下列值：

    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 存取範例應用程式localhost，請編輯並將該行package.json變更為 "dev": "vite", "dev": "vite --host 0.0.0.0",。

  7. 安裝您的應用程式。

    npm install

  8. 啟動應用程式。

    npm run dev

  9. 在 Web 瀏覽器中的 http://localhost:5173或 存取應用程式http://[IP address]:5173。

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

  11. 從電子郵件訊息中擷取確認碼。在應用程式中輸入確認碼。

  12. 使用您的使用者名稱和密碼登入。

使用 Amazon Lightsail 建立 React 開發人員環境

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

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

為此範例應用程式建立 Lightsail 執行個體

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

  2. 選擇 建立執行個體。

  3. 針對選取平台 ，選擇 Linux/Unix 。

  4. 對於選取藍圖 ，選擇 Node.js 。

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

  6. 選擇 建立執行個體。

  7. Lightsail 建立執行個體後，請選擇執行個體，然後從 Connect 索引標籤中選擇使用 連線SSH。

  8. SSH 工作階段會在瀏覽器視窗中開啟。執行 node -v和 npm -v 以確認您的執行個體已佈建 Node.js 和 10.2.3 的最小 npm 版本。

  9. 繼續設定您的 React 應用程式 。