Amplify的completeNewPassword方法为用户数据引发TypeError

问题描述

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

I am attempting to use a custom UI with aws Amplify, but am running into problems with Auth.completeNewPassword. Any attempt at using this method throws the error Error in v-on handler: "TypeError: Cannot read property 'username' of null.

在此之前使用给定的UI，我知道当管理员创建Cognito用户时，他们在首次登录时将以新密码"形式发送.但是，Amplify文档中的示例具有signIn方法，一旦发现用户需要新密码，便会立即调用completeNewPassword方法.

Having used the given UI before this, I know that when a Cognito user is created by an admin, they are sent to a 'new password' form upon first login. However, the example from the Amplify docs has the signIn method immediately calling the completeNewPassword method once it discovers the user needs a new password.

以下代码片段直接来自亚马逊的文档:

The following snippet comes straight from amazon's docs:

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: '[email protected]',
              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.

I've attempted to do this a few different ways with the same TypeError result. It doesn't matter if I call the completeNewPassword method separately, store user as a variable and pass that in, try to re-signIn and pass that user to completeNewPassword, etc etc. Same TypeError every time.

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

The following method, for example, will log the 'user' object correctly when clicking the signIn button the first time, but fails before that line when clicking the same button while attempting to submit a new password.

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
        )
        }
    })
},

其他信息:

1. 框架是Vue
2. 能够使用给定的用户界面为新用户确认新密码
3. 用户名" TypeError不是来自我的js，而是指用户承诺中的username参数(我已经检查过，并且没有尝试在需要用户名的地方传递user_name)

编辑

通过以下代码设法找到了一个可行的解决方案:

Managed to find a half-working solution with this following code:

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.但是，这些用户界面需要在两个不同的面板之间划分.

This manages to update the user, but I had to set the password to this.password (the original, to-be-changed one) to get it working. Looks like the problem is that Amplify wants me to use the same function to both signIn, and call completeNewPassword. But the UI for these needs to be split between two different panels.

推荐答案

这是一个骇人听闻的技巧，但最终我找到了一种解决方法，将用户的Promise，用户名和纯文本密码存储在一个临时js变量中，以便保留它们用于completeNewPassword面板.如果有人知道更好的解决方案，请随时发布.

This is a terribly hack, but I ended up finding a workaround by storing the user promise, name, and plaintext password in a temporary js variable in order to preserve them for the completeNewPassword panel. If anyone knows a better solution, feel free to post it.

这篇关于Amplify的completeNewPassword方法为用户数据引发TypeError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！