我可以在 AWS Amplify 注册表单上添加选择输入类型吗？

Posted 2023-03-27

【中文标题】我可以在 AWS Amplify 注册表单上添加选择输入类型吗？

【英文标题】：Can I add a select input type on AWS Amplify sign up form?

【发布时间】：2020-08-15 13:24:40

【问题描述】：

我有一个使用 AWS amplify 和用户认知池的反应项目，我有这样的身份验证设置：

export default withAuthenticator(App, 
  signUpConfig: 
    signUpFields: [
      
        label: 'Company', key: 'company', required: true, type: 'string',
      ,
    ],
  ,
);

公司的这个新自定义字段效果很好，但我想添加一个选择输入，文档对此没有太大帮助，所以我想知道这是否可能，如果可以，如何做到这一点。

Amplify docs

【问题讨论】：

想知道完全相同的改编。你找到方法了吗？

我没有找到任何解决方案。我想唯一的应该是自定义表单，他们自己调用登录功能。

【参考方案1】：

我知道目前这没有多大帮助，如果您已经构建了应用程序的组件、路由和导航，可能需要做很多工作，但我在某个地方（不记得在哪里）读到它们'正在切换到基于插槽的组件，该组件可以与状态处理功能合并，您可以找到 here。我建议尽早采用这种新方法，因为 Amplify 似乎正在远离 withAuthenticator HOC。

我正在使用 TypeScript 构建，但是有一个看起来几乎相同的 JS 实现，这里有一些 examples 两者（也可以在帖子底部看到）。注意<AmplifyAuthenticator> 组件，您可以在导出的App 中自定义您的登录/注册组件，该组件现在采用AuthStateApp 的命名约定，如下所示：

const AuthStateApp: React.FunctionComponent = () => 
  const [authState, setAuthState] = React.useState<AuthState>();
  const [user, setUser] = React.useState<object | undefined>();

  React.useEffect(() => 
      return onAuthUIStateChange((nextAuthState, authData) => 
          setAuthState(nextAuthState);
          setUser(authData)
      );
  , []);

  return authState === AuthState.SignedIn && user ? (
      <div className="App">
          <div>Hello, user.username</div>
          <AmplifySignOut />
      </div>
  ) : (
    <AmplifyAuthenticator>
    <AmplifySignUp
      slot="sign-up"
      formFields=[
         type: "email", label: 'Email', placeholder: 'Email', hint: 'Enter Your Email', required: true ,
         type: "password" ,
         type: "email" 
      ]
    />
  </AmplifyAuthenticator>
);

来自文档here

如果您想自定义身份验证器登录或注册组件中的表单字段，可以使用 formFields 属性来实现。

有关此自定义的更多详细信息，请参阅amplify-form-fieldprop documentation 和内部FormFieldType interface。

例如：

...
<AmplifyAuthenticator usernameAlias="email">
  <AmplifySignUp
    slot="sign-up"
    usernameAlias="email"
    formFields=[
      
        type: "email",
        label: "Custom Email Label",
        placeholder: "Custom email placeholder"
        inputProps:  required: true, autocomplete: "username" ,
      ,
      
        type: "password",
        label: "Custom Password Label",
        placeholder: "Custom password placeholder",
        inputProps:  required: true, autocomplete: "new-password" ,
      ,
      
        type: "phone_number",
        label: "Custom Phone Label",
        placeholder: "Custom phone placeholder",
      ,
    ] 
  />
  <AmplifySignIn slot="sign-in" usernameAlias="email" />
</AmplifyAuthenticator>
...

产量：

我希望这会有所帮助，我仍在尝试找出注册表单中的自定义 cognito 属性内容，我确信这类似于自定义 signUp 调用，例如：

await Auth.signUp(
  username: 'someuser', password: 'mycoolpassword',
  attributes: 
    email: '[e-mail]', 'custom:favorite_ice_cream': 'chocolate'
  
)

示例

JS：

import React from 'react';
import './App.css';
import Amplify from 'aws-amplify';
import  AmplifyAuthenticator, AmplifySignOut  from '@aws-amplify/ui-react';
import  AuthState, onAuthUIStateChange  from '@aws-amplify/ui-components';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

const AuthStateApp = () => 
    const [authState, setAuthState] = React.useState();
    const [user, setUser] = React.useState();

    React.useEffect(() => 
        return onAuthUIStateChange((nextAuthState, authData) => 
            setAuthState(nextAuthState);
            setUser(authData)
        );
    , []);

  return authState === AuthState.SignedIn && user ? (
      <div className="App">
          <div>Hello, user.username</div>
          <AmplifySignOut />
      </div>
    ) : (
      <AmplifyAuthenticator />
  );


export default AuthStateApp;

TS：

import React from 'react';
import './App.css';
import Amplify from 'aws-amplify';
import  AmplifyAuthenticator, AmplifySignOut  from '@aws-amplify/ui-react';
import  AuthState, onAuthUIStateChange  from '@aws-amplify/ui-components';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

const AuthStateApp: React.FunctionComponent = () => 
    const [authState, setAuthState] = React.useState<AuthState>();
    const [user, setUser] = React.useState<object | undefined>();

    React.useEffect(() => 
        return onAuthUIStateChange((nextAuthState, authData) => 
            setAuthState(nextAuthState);
            setUser(authData)
        );
    , []);

  return authState === AuthState.SignedIn && user ? (
      <div className="App">
          <div>Hello, user.username</div>
          <AmplifySignOut />
      </div>
  ) : (
      <AmplifyAuthenticator />
  );


export default AuthStateApp;

【讨论】：

@lucas-andrade 这对你有用吗？

【参考方案2】：

对于仍然想知道这是否可能的任何人，新版本的 Amplify UI 现在支持可以定制到您的身份验证器中的 Select Field 组件。

import  SelectField  from '@aws-amplify/ui-react';

export const DefaultSelectFieldExample = () => (
  <SelectField label="Fruit">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </SelectField>
);

有关更多信息，请参阅此处的文档https://ui.docs.amplify.aws/components/selectfield