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

Posted 2023-03-27

【中文标题】如何使用 AWS Cognito AmplifyAuthenticator 设置可选 MFA？

【英文标题】：How to set up Optional MFA with AWS Cognito AmplifyAuthenticator?

【发布时间】：2021-08-29 19:26:47

【问题描述】：

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

但是，如果我创建一个 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',
                required: true,
              ,
            ]
          >
            <AmplifySelectMfaType MFATypes= SMS: false, TOTP: true, Optional: true  />
          </AmplifySignIn>
        </AmplifyAuthenticator>
      </Router>
    );
  
  return <TopApplicationComponent />;
;

【参考方案1】：

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

请参阅此文档了解 MFA 类型

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