Angular AWS Amplify身份验证器外部字段

时间:2018-10-12 13:10:31

标签: angular amazon-cognito aws-amplify

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

<amplify-authenticator></amplify-authenticator>

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

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

PS:我使用Angular,aws-amplify-angular。

1 个答案:

答案 0 :(得分:3)

在撰写此评论时,似乎没有Angular或React的完整版本(仅Vue)有可能,但是beta版确实有一些选择。

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

npm install aws-amplify-angular@beta

并更新amplify-authenticator组件,使其看起来像这样:

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

将在您的组件中设置signupConfig的位置,看起来像这样:

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',
    }
  ]
};

有关详细信息,请参见以下两个链接:

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