在 React 应用程序中为基于 JavaScript AWS Amplify SDK / AWS Cognito 的身份验证分离用户池

Posted 2023-03-27

【中文标题】在 React 应用程序中为基于 JavaScript AWS Amplify SDK / AWS Cognito 的身份验证分离用户池

【英文标题】：Separating user pools for JavaScript AWS Amplify SDK / AWS Cognito based authentication in React app

【发布时间】：2021-11-24 10:00:44

【问题描述】：

我有一个完全基于 AWS Cognito 管理的用户池的 React-native Web 应用程序使用身份验证。所有与身份验证相关的屏幕（登录、注册、更改密码）均由 AWS Amplify javascript SDK 管理。几乎没有自定义客户端代码。

我们面临以下要求：我们需要在开发和生产之间分离用户池：同一应用程序的两种风格（相同的代码）需要使用在 AWS Cognito 中管理的不同池。

实现这样的配置需要什么？

具体来说，我们有一个（很久以前）自动生成的 aws-exports.js 文件，如下所示：

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.
const awsmobile = 
    "aws_project_region": "us-east-1",
    "aws_cognito_identity_pool_id": "us-east-1:[id]",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_[id]",
    "aws_user_pools_web_client_id": "[id]",
    "oauth": 
;

export default awsmobile;

为“aws_user_pools_id”设置的 ID 确实是我们在 Cognito 中管理的池的 ID。

加载此数据的源代码如下所示：

import Amplify,  Auth  from 'aws-amplify';
import awsconfig from '../aws-exports';

Amplify.configure(awsconfig);
Auth.configure(awsconfig);

需要做什么？似乎覆盖自动生成的文件不是一个好主意。 我们是否应该在调用 .configure() 之前修复“aws_user_pools_id”值？ 我们是否需要有多个“aws_cognito_identity_pool_id”和/或“aws_user_pools_web_client_id”（在这种情况下），或者我们可以在配置之间共享值？

如果有关于“如何”的好文档，我将不胜感激。

提前致谢。

最大。

【参考方案1】：

假设您使用的是 amplify cli，您应该使用here 所示的环境。 aws-exports.js 文件不应提交到 git。相反，它应该使用amplify pull 生成并保持最新