2

如果我将一个认知池设置为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 />;
};
4

1 回答 1

0

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

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

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

于 2021-06-17T07:33:53.630 回答