reactjs - AWS Amplify：带有自定义 UI 的忘记密码功能

Question

我正在尝试实现一个包含“忘记密码？”的登录页面。按钮打开一个表单，然后允许用户提交电子邮件，同时也是用户名，如果该条目存在于 Cognito 中，则应启动重置密码过程。

到目前为止，我遇到的一个问题是我不确定如何从 Cognito 实际获取相应的用户名，因为所有电子邮件登录似乎都被分配了唯一的哈希值，并且没有以纯文本形式存储在 Cognito 中。

我在文档中查看了第 1000 行下面的代码，但这似乎也假设您具有相应的用户名和其他属性。

（注册应该只能由管理员进行，目前只需通过 AWS 控制台）。

关于如何实施的任何想法？谢谢！

标签： reactjsamazon-web-servicesaws-cognitoaws-amplify

Answer 1

好的 - 如果您需要更多信息，请告诉我。它与大多数忘记密码的过程略有不同，因为它们需要您提到的代码。我认为可能让您感到困惑的是用户名只是用户的电子邮件（或您指定为 Cognito 用户池的用户名的任何内容）。这不是 Cognito 用户 ID 或其他任何东西。

我使用 4 个输入来获取所需的所有信息，以及两种形式。您可以轻松地只使用一种形式。

第一个输入收集电子邮件；我把这个输入放在它自己的表格上，并附有说明。然后运行下面的 Auth.forgotPassword 方法（请提供电子邮件输入值作为用户名变量）。

AWS 将向您的用户发送一个验证码（如果您在 Cognito 控制台中更改消息的格式；该代码将使用“验证码”格式，至少对于 SMS 消息）。

我认为默认情况下，如果您在注册期间收集了一个电话号码并将其提供给 Cognito，则该代码应该通过 SMS 发送到用户的电话号码。如果不是，我会想象代码会发送到用户的电子邮件，尽管我不确定（我在 Cognito 中有用户的电话号码，但我从未通过电子邮件获得此代码）。

您的其他三个输入应该是：代码，密码，验证密码。我有这三个在第二种形式。用户向代码输入表单提供代码，提供新密码，并验证新密码。

您获取电子邮件（来自其他表单）、代码和密码，并使用 Auth.forgotPasswordSubmit 方法（再次提供电子邮件输入值作为用户名，代码输入值作为代码，密码输入值作为密码）。

您实际上并不需要从任何一种方法返回的“数据”消息（如果我没记错的话，我认为这只是一个表示“成功”的字符串）。

如果用户不在系统中，则 Auth.forgotPassword 方法将返回错误（类似于“未找到用户”的结果）。

请在下面找到相关方法（从文档复制）：

import { Auth } from 'aws-amplify';

Auth.forgotPassword(username)
    .then(data => console.log(data))
    .catch(err => console.log(err));

// Collect confirmation code and new password, then
Auth.forgotPasswordSubmit(username, code, new_password)
    .then(data => console.log(data))
    .catch(err => console.log(err));