本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
# 其他應用程式選項
您可能擁有要與 Amazon Cognito 身分驗證整合的現有應用程式 UI。相較於 Amazon Cognito 使用者集區，您甚至可能擁有功能較低的現有身分驗證頁面。您可以使用適用於各種程式設計語言的 Amazon Cognito 整合 AWS SDKs將身分驗證元件新增至此類型的應用程式。一些範例如下。
如果您在 Amazon Cognito 主控台中為此目的建立使用者集區，則可能不需要擁有託管互動式登入頁面和 OpenID Connect (OIDC) 服務[的使用者集區網域](cognito-user-pools-assign-domain.md)。在主控台中建立使用者集區的程序會自動為您產生網域。您可以從使用者集區的網域索引標籤刪除此**網域**。其他選項包括使用 API 請求 AWS SDKs 和 CLI 中的自動設定選項，為您的應用程式以程式設計方式建立 AWS Amplify Amazon Cognito 資源。如需詳細資訊，請參閱[將 Amazon Cognito 身分驗證和授權與 Web 和行動應用程式整合](cognito-integrate-apps.md)。
**Topics**
+ [設定 React 單頁應用程式範例](#getting-started-test-application-react)
+ [使用 Flutter 設定範例 Android 應用程式](#getting-started-test-application-flutter)
## 設定 React 單頁應用程式範例
在本教學課程中，您將建立 React 單一頁面應用程式，您可以在其中測試使用者註冊、確認和登入。React 是適用於 Web 和行動應用程式的 JavaScript 型程式庫，著重於使用者介面 (UI)。此範例應用程式示範 Amazon Cognito 使用者集區的一些基本功能。如果您已經在使用 React 開發 Web 應用程式的經驗，[請從 GitHub 下載範例應用程式](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example)。
下列螢幕擷取畫面是您將建立之應用程式中的初始身分驗證頁面。
若要設定此應用程式，您的使用者集區必須符合下列要求：
+ 使用者可以使用其電子郵件地址登入。**Cognito 使用者集區登入選項**：**電子郵件**。
+ 使用者名稱不區分大小寫。**使用者名稱要求**：未選取**使用者名稱區分大小寫**。
+ 不需要多重要素驗證 (MFA)。**MFA 強制執行**：**選用 MFA**。
+ 您的使用者集區會使用電子郵件訊息驗證使用者設定檔確認的屬性。**要驗證的屬性**：**傳送電子郵件訊息、驗證電子郵件地址**。
+ 電子郵件是唯一必要的屬性。**必要屬性**：**電子郵件**。
+ 使用者可以在使用者集區中註冊自己。**自我註冊**：選取**啟用自我註冊**。
+ 您的初始應用程式用戶端是公有用戶端，允許使用使用者名稱和密碼登入。**應用程式類型**：**公有用戶端**、**身分驗證流程**：`ALLOW_USER_PASSWORD_AUTH`。
### 建立應用程式
若要建置此應用程式，您必須設定開發人員環境。開發人員環境需求如下：
1. Node.js 已安裝並更新。
1. 節點套件管理員 (npm) 已安裝並更新至至少 10.2.3 版。
1. 環境可在網頁瀏覽器的 TCP 連接埠 5173 上存取。
**建立 React Web 應用程式範例**
1. 登入您的開發人員環境，並導覽至應用程式的父目錄。
```
cd {{~/path/to/project/folder/}}
```
1. 建立新的 React 服務。
```
npm create vite@latest frontend-client -- --template react-ts
```
1. 從 GitHub 上的 AWS 程式碼範例儲存庫複製`cognito-developer-guide-react-example`[專案資料夾](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example)。
```
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/}}
```
1. 導覽至專案中的 `src` 目錄。
```
cd {{~/path/to/project/folder/}}frontend-client/src
```
1. 編輯`config.json`和取代下列值：
1. `YOUR_AWS_REGION` 將 取代為 AWS 區域 程式碼。例如：`us-east-1`。
1. `YOUR_COGNITO_USER_POOL_ID` 將 取代為您指定用於測試的使用者集區的 ID。例如：`us-east-1_EXAMPLE`。使用者集區必須位於您在上一個步驟中輸入 AWS 區域 的 中。
1. `YOUR_COGNITO_APP_CLIENT_ID` 將 取代為您指定用於測試的應用程式用戶端 ID。例如：`1example23456789`。應用程式用戶端必須位於上一個步驟的使用者集區中。
1. 如果您想要從 以外的 IP 存取範例應用程式`localhost`，請編輯`package.json`並將該行變更為 `"dev": "vite",` `"dev": "vite --host 0.0.0.0",`。
1. 安裝您的應用程式。
```
npm install
```
1. 啟動應用程式。
```
npm run dev
```
1. 在 `http://localhost:5173`或 的 Web 瀏覽器中存取應用程式`http://[IP address]:5173`。
1. 使用有效的電子郵件地址註冊新使用者。
1. 從電子郵件訊息擷取確認碼。在應用程式中輸入確認碼。
1. 使用您的使用者名稱和密碼登入。
### 使用 建立 React 開發人員環境 Amazon Lightsail
開始使用此應用程式的快速方法是使用 建立虛擬雲端伺服器Amazon Lightsail。
使用 Lightsail，您可以快速建立已預先設定此範例應用程式的先決條件的小型伺服器執行個體。您可以使用瀏覽器型用戶端將 SSH 連線到執行個體，並在公有或私有 IP 地址連線到 Web 伺服器。
**為此範例應用程式建立Lightsail執行個體**
1. 前往 [Lightsail 主控台](https://lightsail.aws.amazon.com/ls/webapp/)。如果出現提示，請輸入您的 AWS 登入資料。
1. 選擇 **建立執行個體**。
1. 針對**選取平台**，選擇 **Linux/Unix**。
1. 針對**選取藍圖**，選擇 **Node.js**。
1. 在**識別您的執行個體**下，為您的開發環境提供易記的名稱。
1. 選擇 **建立執行個體**。
1. Lightsail 建立執行個體之後，請從 **Connect** 索引標籤中選取執行個體，然後選擇**使用 SSH 連線**。
1. SSH 工作階段會在瀏覽器視窗中開啟。執行 `node -v`和 `npm -v` 以確認您的執行個體已佈建 Node.js 和 10.2.3 的最低 npm 版本。
1. 繼續[設定您的 React 應用程式](#getting-started-test-application-react)。
## 使用 Flutter 設定範例 Android 應用程式
在本教學課程中，您將在 Android Studio 中建立行動應用程式，您可以在其中模擬裝置並測試使用者註冊、確認和登入。此範例應用程式會在 Flutter 中為 Android 建立基本 Amazon Cognito 使用者集區行動用戶端。如果您已經有使用 Flutter 開發行動應用程式的經驗，[請從 GitHub 下載範例應用程式](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/kotlin/usecases/cognito_flutter_mobile_app)。
下列螢幕擷取畫面顯示虛擬 Android 裝置上執行的應用程式。
若要設定此應用程式，您的使用者集區必須符合下列要求：
+ 使用者可以使用其電子郵件地址登入。**Cognito 使用者集區登入選項**：**電子郵件**。
+ 使用者名稱不區分大小寫。**使用者名稱要求**：未選取**使用者名稱區分大小寫**。
+ 不需要多重要素驗證 (MFA)。**MFA 強制執行**：**選用 MFA**。
+ 您的使用者集區會使用電子郵件訊息驗證使用者設定檔確認的屬性。**要驗證的屬性**：**傳送電子郵件訊息、驗證電子郵件地址**。
+ 電子郵件是唯一必要的屬性。**必要屬性**：**電子郵件**。
+ 使用者可以在使用者集區中註冊自己。**自我註冊**：選取**啟用自我註冊**。
+ 您的初始應用程式用戶端是公有用戶端，允許使用使用者名稱和密碼登入。**應用程式類型**：**公有用戶端**、**身分驗證流程**：`ALLOW_USER_PASSWORD_AUTH`。
### 建立應用程式
**建立範例 Android 應用程式**
1. 安裝 [Android Studio](https://developer.android.com/studio) [和命令列工具](https://developer.android.com/tools)。
1. 在 Android Studio 中，安裝 [Flutter 外掛程式](https://docs.flutter.dev/get-started/editor?tab=androidstudio)。
1. [在此範例應用程式中](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/kotlin/usecases/cognito_flutter_mobile_app)，從 `cognito_flutter_mobile_app`目錄的內容建立新的 Android Studio 專案。
1. 編輯`assets/config.json`並使用使用者集區`<>`和應用程式用戶端的 `<< YOUR CLIENT ID>>` ID 取代 和 。 IDs
1. 安裝 [Flutter](https://docs.flutter.dev/get-started/install)。
1. 將 Flutter 新增至 PATH 變數。
1. 使用下列命令接受授權。
`flutter doctor --android-licenses`
1. 驗證您的 Flutter 環境並安裝任何缺少的元件。
`flutter doctor`
1. 如果有任何元件遺失，請執行 以`flutter doctor -v`了解如何修正問題。
1. 變更至新 Flutter 專案的目錄並安裝相依性。
1. 執行 `flutter pub add amazon_cognito_identity_dart_2`。
1. 執行 `flutter pub add flutter_secure_storage`。
1. 建立虛擬 Android 裝置。
1. 在 Android Studio GUI 中，使用裝置[管理員建立新裝置](https://developer.android.com/studio/run/managing-avds)。
1. 在 CLI 中，執行 `flutter emulators --create --name android-device`。
1. 啟動您的虛擬 Android 裝置。
1. 在 Android Studio GUI 中，選取虛擬裝置旁的開始圖示。
1. 在 CLI 中，執行 `flutter emulators --launch android-device`。
1. 在虛擬裝置上啟動應用程式。
1. 在 Android Studio GUI 中，選取部署圖示。
1. 在 CLI 中，執行 `flutter run`。
1. 導覽至您在 Android Studio 中執行的虛擬裝置。
1. 使用有效的電子郵件地址註冊新使用者。
1. 從電子郵件訊息擷取確認碼。在應用程式中輸入確認碼。
1. 使用您的使用者名稱和密碼登入。