0

我正在尝试使用 Angular cli 应用程序在 Amplify 中实现以下演练。 https://aws-amplify.github.io/docs/js/angular#using-authentication-components-without-the-authenticator

  • 我的应用程序是按照上述演练进行的全新 Angular cli 构建。

  • 我的目标是使用上面链接中提到的独立身份验证组件。

  • 我的问题是尝试添加时<amplify-auth-sign-up></amplify-auth-sign-up>

错误信息是： 控制台错误消息的屏幕截图

state我的组件详细说明了上述链接演练中所需的设置。

auth.component.ts

import { Component, OnInit } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent implements OnInit {

  constructor(private amplifyService: AmplifyService) {
    this.amplifyService.setAuthState({
      state: 'signUp',
      user: null
    });
  }
}

auth.component.html

<amplify-auth-sign-up></amplify-auth-sign-up>

非常感谢任何帮助。任何问题/额外信息，请告诉我。

4

1 回答 1

1

我能够让它与下面的代码一起工作。关键是放大单个组件需要设置一个状态——我可以使用下面的“authState”来做到这一点。除了打字稿之外，区别似乎是在 html 中明确指定状态。

设置 authState（用户：null，状态：'signUp'，如下所示）应该足以消除错误并显示注册表单。

在此处的代码中，我还添加了更多项目来演示更多关于如何使用 authState 的信息。

在下面，页面将加载注册表单。

用户输入详细信息并单击注册后，页面将显示“确认注册”表单，用户可以在其中输入 Cognito 发送给他/她的验证码（取决于您的 Cognito 设置）：

html:

    <amplify-auth-sign-up [authState]="authState" *ngIf="showSignUp"></amplify-auth-sign-up>
    <amplify-auth-confirm-sign-up [authState]="authState" *ngIf="showVerify"></amplify-auth-confirm-sign-up>

ts：

    import { AmplifyService } from 'aws-amplify-angular';
    import { AuthState } from 'aws-amplify-angular/dist/src/providers';

    Export class AuthComponent implements OnInit {

    public authState: AuthState
    public newUser: any
    public state: any
    public showSignUp = true
    public showVerify = false

    constructor(public amplifyService: AmplifyService) {
         this.authState ={ //setting this should be enough to show the sign-up form and remove the error
           user: null,
           state: 'signUp' 
         }

         this.amplifyService.setAuthState(this.authState)  //this might not be required

         this.amplifyService.authStateChange$ //listening for state changes. For example, if you want to take action after the user has submitted the sign up form
                .subscribe(authState => {   
                    this.state = authState.state
                    this.newUser = authState.user
                    if (this.newUser){ //just an example of getting data from the stateChange. Not required.
                      this.username = this.newUser.username
                    }

                    if (this.state === 'confirmSignUp'){//get change in state
                       this.authState ={
                          user: authState.user,
                         state: 'confirmSignUp'
                       }
                       this.showSignUp = false
                       this.showVerify = true
                    }
                }
     }
 }

我在这里添加了一些更多细节，比如自动登录。

另请注意，我发现 Amplify 组件可以向用户显示我不希望用户看到的错误消息——随机的技术内容。可能有一种方法可以自定义（这里有一些讨论），但一定要测试许多不同的场景以了解可能出现的错误消息。

于 2019-12-11T13:39:59.903 回答