要使用自定义UI,需要在Cognito User Pool客户端设置中指定自定义UI的URL,并在Web应用的代码中调用该URL,而不是调用默认的托管UI。例如,在React应用程序中,可以在登录组件中使用以下代码来调用自定义UI:
import React, { useState } from 'react';
import { CognitoUser } from 'amazon-cognito-identity-js';
import { AuthenticationDetails, CognitoUserPool } from 'amazon-cognito-identity-js';
import { Redirect } from 'react-router-dom';
const SignInForm = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [redirectToReferrer, setRedirectToReferrer] = useState(false);
const onSubmit = (event) => {
event.preventDefault();
const authenticationData = {
Username: username,
Password: password,
};
const authenticationDetails = new AuthenticationDetails(authenticationData);
const userPool = new CognitoUserPool({
UserPoolId: process.env.REACT_APP_COGNITO_USER_POOL_ID,
ClientId: process.env.REACT_APP_COGNITO_CLIENT_ID,
RedirectUriSignIn: process.env.REACT_APP_CALLBACK_URL,
responseType: 'code',
scope: 'email openid profile',
CustomDomain: process.env.REACT_APP_COGNITO_CUSTOM_DOMAIN,
UserPoolDomain: process.env.REACT_APP_COGNITO_USER_POOL_DOMAIN,
AdvancedSecurityDataCollectionFlag: false,
});
const cognitoUser = new CognitoUser({
Username: username,
Pool: userPool,
});
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: () => {
setRedirectToReferrer(true);
},
onFailure: (error) => {
console.error(error);
},
});
};
if (redirectToReferrer) {
return ;
}
return (