amazon-cognito - 自定义 Cognito 托管 UI

Question

我们使用 Cognito 托管 UI 和本地帐户登录以及少数 SAML 提供商。有一个选项可以自定义一些样式，但我正在寻找一些额外的东西。

1. 添加自定义文本和指向外部网站的链接 - 例如条款和条件
2. SAML 提供商名称不带空格。我无法显示“使用 X 登录”之类的内容。

有没有办法自定义托管 UI 来执行这些操作？谢谢。

Answer 1

最好不要使用 Cognito 提供的 UI，而只使用 Cognito 进行身份验证和授权。

我的 React Web 应用程序与 Cognito 交互，而不使用其提供的任何 UI 组件。只有这样，您才能对您的前端拥有绝对的控制权。

您可以引用下面的示例代码，并将其用于您的网络应用程序。

示例代码

示例代码向您展示了如何使用 amazon-cognito-identity-js 调用 Cognito 进行登录。或其他引用资料:Implementing AWS-Cognito in Angular 2和 Using AWS Cognito in a Lambda function with npm

import {
  CognitoUserPool,
  CognitoUser,
  CognitoUserSession,
  CognitoUserAttribute,
  AuthenticationDetails,
} from "amazon-cognito-identity-js";


export function signIn(email: string, password: string) {
  var authenticationData = {
    Username: email,
    Password: password,
  };
  const cognitoUser = new CognitoUser({
    Username: email,
    Pool: getPool(
      process.env.REACT_APP_BUSINESS_ACCOUNT_USER_POOL_ID!,
      process.env.REACT_APP_BUSINESS_ACCOUNT_USER_POOL_CLIENT_ID!
    ),
  });
  var authenticationDetails = new AuthenticationDetails(authenticationData);
  return new Promise((resolve, reject) => {
    cognitoUser.authenticateUser(authenticationDetails, {
      onSuccess: (result) => resolve(result),
      onFailure: (error) => reject(error),
      newPasswordRequired: (userAttributes, requiredAttributes) => {
        resolve({ needResetPassword: true, cognitoUser, userAttributes });
      },
    });
  });
}