Amplify 的 completeNewPassword 方法为用户数据抛出 TypeError答案

【问题标题】：Amplify's completeNewPassword method throwing TypeError for user dataAmplify 的 completeNewPassword 方法为用户数据抛出 TypeError
【发布时间】：2019-08-02 02:36:58
【问题描述】：

我正在尝试将自定义 UI 与 aws Amplify 一起使用，但遇到 Auth.completeNewPassword 问题。任何尝试使用此方法都会引发错误Error in v-on handler: "TypeError: Cannot read property 'username' of null。

在此之前使用过给定的 UI，我知道当管理员创建 Cognito 用户时，他们会在首次登录时发送到“新密码”表单。但是，Amplify 文档中的示例一旦发现用户需要新密码，就会立即调用 completeNewPassword 方法的 signIn 方法。

以下 sn-p 直接来自亚马逊的文档：

import { Auth } from 'aws-amplify';

Auth.signIn(username, password)
.then(user => {
    if (user.challengeName === 'NEW_PASSWORD_REQUIRED') {
        const { requiredAttributes } = user.challengeParam; // the array of required attributes, e.g ['email', 'phone_number']
        Auth.completeNewPassword(
            user,               // the Cognito User Object
            newPassword,       // the new password
            // OPTIONAL, the required attributes
            {
              email: 'xxxx@example.com',
              phone_number: '1234567890'
            }
        ).then(user => {
            // at this time the user is logged in if no MFA required
            console.log(user);
        }).catch(e => {
          console.log(e);
        });
    } else {
        // other situations
    }
}).catch(e => {
    console.log(e);
});

我尝试了几种不同的方法来实现相同的 TypeError 结果。如果我单独调用 completeNewPassword 方法，将用户存储为变量并将其传入，尝试重新登录并将该用户传递给 completeNewPassword 等，这并不重要。每次都是相同的 TypeError。

例如，以下方法将在第一次单击登录按钮时正确记录“用户”对象，但在尝试提交新密码时单击同一按钮时在该行之前失败。

signIn () {
    Auth.signIn(this.user_name, this.password)
    .then(user => {
        if (user.challengeName === 'NEW_PASSWORD_REQUIRED') {
        console.log(user)
        const { requiredAttributes } = user.challengeParam;
        this.$parent.$parent.pageStatus.passwordSetPanel = true;
        Auth.completeNewPassword(
            user,
            this.newPassword
        )
        }
    })
},

附加信息：

框架是 Vue
能够使用给定 UI 确认新用户的新密码
“用户名”类型错误不是来自我的 js，而是指用户承诺中的用户名参数（我已经检查过，并没有尝试将用户名传递到它想要用户名的地方）

编辑

设法使用以下代码找到了一个半有效的解决方案：

signIn () {
    this.$parent.$parent.pageStatus.loginPanel = false;
    this.$parent.$parent.loading = true;
    Auth.signIn(this.user_name, this.password)
    .then(async user => {
        if (user.challengeName === 'NEW_PASSWORD_REQUIRED') {
        const loggedUser = await Auth.completeNewPassword(
            user,
            this.password,
        )
        this.$parent.$parent.pageStatus.passwordSetPanel = true
        }
    })
}

这可以更新用户，但我必须将密码设置为 this.password （原始的，待更改的）才能使其正常工作。看起来问题是 Amplify 希望我使用相同的函数来登录和调用 completeNewPassword。但是这些的 UI 需要在两个不同的面板之间拆分。

【问题讨论】：

标签： amazon-web-services authentication vue.js amazon-cognito aws-amplify

【解决方案1】：

我设法使用 RxJS BehaviorSubject 解决了这个问题。

您可以查看 BehaviourSubject here 的典型行为示例。

声明 BehaviorSubject：BehaviorSubject 初始值为 null。

congitoUser = new BehaviorSubject(null);

订阅 Auth.SignIn（即认知用户）返回的值。

 login(user: { username: string; password: string }) {
    Auth.signIn(user)
      .then((data) => {
        this.congitoUser.next(data);
        if (user) {
          if (data.challengeName === 'NEW_PASSWORD_REQUIRED') {
            this.router.navigateByUrl('/change-password');
          } else {
            this.router.navigateByUrl('/home');
          }
        }
      });
  }

现在订阅将返回正确的 Cognito 用户值。

updatePassword(password: string) {
// subscribe to cognito user (behaviour subject) and use the value it returned.
    this.congitoUser.subscribe((value) => {
      Auth.completeNewPassword(value, password, [])
        .then((data) => {
         console.log(data);
        })
        .catch((err) => console.error('Error', err));
    });
}

【讨论】：

【解决方案2】：

这是一个非常糟糕的 hack，但我最终找到了一种解决方法，将用户承诺、名称和纯文本密码存储在一个临时 js 变量中，以便为 completeNewPassword 面板保留它们。如果有人知道更好的解决方案，请随时发布。

【讨论】：