Angular AWS Amplify身份验证器外部字段 [英] Angular AWS Amplify authenticator extrra fields

问题描述

我正在尝试使用带有Angular的AWS Amplify进行Cognito身份验证，当我调用该组件时，我面临的问题是：

I'm trying to use the AWS Amplify with Angular for authentication with Cognito, the problem that I'm facing is, when I call the component:

<amplify-authenticator></amplify-authenticator>

它并没有包含注册的所有字段，我在Cognito中将其标记为必填字段，因此它总是返回错误，例如：缺少字段名称，例如

It does not come with all the fields for Sign up, that I marked as required in Cognito, so it always return a error like: Missing field Name, for example

所以我的问题是，如果他们不返回我标记为必填项的某些字段，如何我可以添加它，而不必更改组件本身的来源。

So my question is, if they don't return some of the fields that I marked as required, how can I add it, without having to change the source of the component itself.

PS：我使用Angular，aws-amplify-angular。

PS: Im using the Angular, aws-amplify-angular.

推荐答案

在撰写此评论时，Angular或React的完整版本（仅Vue）可能没有出现，但是试用版确实有一些选择。

It doesn't appear at the time of the writing of this comment that it's possible with the full release for Angular or React (only Vue), but the beta release does have some options.

您可以通过添加以下软件包来获得测试版：

You can get the beta by adding the following package:

npm install aws-amplify-angular@beta

并更新放大-authenticator组件看起来像这样：

And updating the amplify-authenticator component to look like this:

<amplify-authenticator [signUpConfig]="signUpConfig" ></amplify-authenticator>

在您的组件中设置signupConfig的位置，看起来像这样：

Where signupConfig will be set in your component and will look something like this:

const signUpConfig = {
  header: 'Welcome!',
  defaultCountryCode: '46',
  hideDefaults: true,
  signUpFields: [
    {
      label: 'Username',
      key: 'username',
      required: true,
      displayOrder: 1,
      type: 'string',
    },
    {
      label: 'Password',
      key: 'password',
      required: true,
      displayOrder: 2,
      type: 'password',
    },
    {
      label: 'Email',
      key: 'email',
      required: true,
      displayOrder: 3,
      type: 'email',
    },
    {
      label: 'Name',
      key: 'name',
      required: true,
      displayOrder: 4,
      type: 'string',
    },
    {
      label: 'Family name',
      key: 'family_name',
      required: true,
      displayOrder: 5,
      type: 'string',
    },
    {
      label: 'Phone number',
      key: 'phone_number',
      required: false,
      displayOrder: 6,
      type: 'string',
    }
  ]
};

有关详细信息，请参见以下两个链接：

See the following two links for details:

https://github.com/aws-amplify/ amplify-js / issues / 1911＃issuecomment-437090097
https://haverchuck.github.io/docs/js/ionic#signup-configuration

这篇关于Angular AWS Amplify身份验证器外部字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！