如果我将一个认知池设置为requireMFA (TOTP)，我在客户端的实现使用AmplifyAuthenticatorfrom@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',
required: true,
},
]}
>
<AmplifySelectMfaType MFATypes={{ SMS: false, TOTP: true, Optional: true }} />
</AmplifySignIn>
</AmplifyAuthenticator>
</Router>
);
}
return <TopApplicationComponent />;
};