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

Question

如果我将一个cognito池设置为requireMFA(TOTP(，我在客户端使用@aws-amplify/ui-react中的AmplifyAuthenticator的实现会自动正常工作。

但是，如果我创建了一个cognito池，其中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 />;
};

Answer 1

尝试使用SelectMFATypeUI组件，该组件与aws-amplify-react包一起提供

有关MFA类型，请参阅本文档

https://docs.amplify.aws/lib/auth/mfa/q/platform/js#allow-用户选择mfa类型