如何使用 AWS Cognito AmplifyAuthenticator 设置可选 MFA？

问题描述

如果我将认知池设置为 require MFA (TOTP)，我在客户端使用 AmplifyAuthenticator 中的 @aws-amplify/ui-react 实现自动工作得很好。

但是，如果我创建一个 MFA 为 optional 的认知池，则没有自动选项供用户选择加入 MFA，工作流程是典型的使用用户名/通行证的入职。我也找不到任何关于此的好的文档。我还尝试明确地将 <AmplifySelectMfaType> 组件作为 <AmplifySignIn> 的子组件，但它没有做任何事情。

设置非常简单，如果找到 Cognito 用户，我们会在顶层显示应用程序，否则显示 AmplifyAuthenticator 以登录。我们不允许用户自行注册我们的应用，因此当他们首次登录时，Cognito 中存在用户定义。

app.component.tsx

import {
  AmplifyAuthenticator,AmplifySignIn,AmplifySelectMfaType,} from '@aws-amplify/ui-react';

const RoutedApp = () => {
  const { cognitoUser } = useSession();

  if (!cognitoUser) {
    return (
      <Router>
        <AmplifyAuthenticator>
          <AmplifySignIn
            headerText="Sign in"
            slot="sign-in"
            hideSignUp
            color={Colors.BRANDEIS_BLUE}
            usernameAlias="email"
            formFields={[
              {
                type: 'email',label: 'Email Address',placeholder: 'Enter your email address',required: true,disabled: true,value: cognito.email,},{
                type: 'password',label: 'Password',placeholder: 'Enter your password',]}
          >
            <AmplifySelectMfaType MFATypes={{ SMS: false,TOTP: true,Optional: true }} />
          </AmplifySignIn>
        </AmplifyAuthenticator>
      </Router>
    );
  }
  return <TopApplicationComponent />;
};

解决方法

尝试使用 SelectMFAType UI 组件，该组件随 aws-amplify-react 包提供

请参阅此文档以了解 MFA 类型

https://docs.amplify.aws/lib/auth/mfa/q/platform/js#allow-users-to-select-mfa-type