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_cn/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_cn/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_cn/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) |
| 从 v5 升级到 v6 后，身份验证组件停止工作。 | 在 Amplify v6 中，`Auth` 类别已移至功能化方法，并支持命名参数。现在，必须 APIs 直接从`aws-amplify/auth`路径导入函数。有关更多信息，请参阅 Amplify 文档中的[从 v5 迁移到 v6](https://docs.amplify.aws/gen1/react/build-a-backend/auth/auth-migration-guide/)。 |
## 相关资源
+ [亚马逊 Cognito（AWS 网站）入门](https://aws.amazon.com/cognito/getting-started/)
+ [创建新 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}