npm i @aws-amplify/ui-react aws-amplify| 應用程式開發人員 | | 設定使用者集區。 | 根據下列範例，建立 `aws-exports.js` 檔案並儲存在 `src` 資料夾中。檔案應包含下列資訊：[See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)
// replace the user pool region, id, and app client id details| 應用程式開發人員 | | 匯入並設定 Amplify 服務。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) | 應用程式開發人員 | | 新增驗證器 UI 元件。 | 若要顯示 `Authenticator` UI 元件，請將以下幾行程式碼新增至應用程式的進入點檔案 (`App.js`)：
const awsmobile = {
"aws_project_region": "put_your_region_here",
"aws_cognito_region": "put_your_region_here",
"aws_user_pools_id": "put_your_user_pool_id_here",
"aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"
}
export default awsmobile;
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';程式碼片段範例會匯入 `Authenticator` UI 元件和 Amplify UI styles.css 檔案，這是使用元件預先建置的主題時的必要項目。function App() {
return (
{({ signOut, user }) => (
Welcome {user.username}
)}
);
}如需範例`App.js`檔案，請參閱此模式[的其他資訊](#authenticate-react-app-users-cognito-amplify-ui-additional)區段。 | 應用程式開發人員 |
| （選用） 擷取工作階段資訊。 | 驗證使用者之後，您可以從 Amplify 用戶端擷取有關其工作階段的資料。例如，您可以從使用者的工作階段擷取 JSON Web 字符 (JWT)，以便驗證從其工作階段到後端 API 的請求。import { fetchAuthSession } from 'aws-amplify/auth';
(await fetchAuthSession()).tokens?.idToken?.toString(); | 應用程式開發人員 |
## 疑難排解
| 問題 | 解決方案 |
| --- | --- |
| 新使用者無法註冊應用程式。 | 如下所示，請確定您的 Amazon Cognito 使用者集區已設定為允許使用者註冊自己在使用者集區中：[See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) |
| 從 v5 升級到 v6 後，驗證元件停止運作。 | `Auth` 類別已移至 Amplify v6 中的功能方法和具名參數。您現在必須直接從 `aws-amplify/auth` 路徑匯入功能 APIs。如需詳細資訊，請參閱 Amplify 文件中的[從 v5 遷移至 v6](https://docs.amplify.aws/gen1/react/build-a-backend/auth/auth-migration-guide/)。 |
## 相關資源
+ [Amazon Cognito 入門](https://aws.amazon.com/cognito/getting-started/) (AWS 網站）
+ [建立新的 React 應用程式](https://reactjs.org/docs/create-a-new-react-app.html) (React 文件）
+ [什麼是 Amazon Cognito？](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) (Amazon Cognito 文件）
+ [Amplify UI 程式庫](https://ui.docs.amplify.aws/) (Amplify 文件）
## 其他資訊
`App.js` 檔案應包含下列程式碼：
```
import './App.css';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
import { fetchAuthSession } from 'aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
Amplify.configure({ ...awsExports });
let token = (await fetchAuthSession()).tokens?.idToken?.toString();
function App() {
return (
Welcome {user.username}
Your token is: {token}