使用AWS Amplify和AWS Cognito完成自定义登录控制台页面，并在页面中添加单个联合身份验证按钮。示例代码如下：

// 连接到 AWS Cognito 用户池
import { Auth } from "aws-amplify";
Auth.configure({
  userPoolId: "USER_POOL_ID",
  userPoolWebClientId: "CLIENT_ID",
  region: "REGION",
});

// 自定义登录页面元素
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import FormHelperText from "@mui/material/FormHelperText";
import InputAdornment from "@mui/material/InputAdornment";
import IconButton from "@mui/material/IconButton";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";

// 使用 React Hooks 管理表单输入和状态
import { useState } from "react";

// 登录组件
function Login() {
  // 表单状态
  const [formState, setFormState] = useState({ username: "", password: "" });
  // 密码可见状态
  const [passwordVisible, setPasswordVisible] = useState(false);
  
  // 处理表单输入事件
  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormState({ ...formState, [name]: value });
  };
  
  // 处理密码可见切换事件
  const handlePasswordVisibility = () => {
    setPasswordVisible(!passwordVisible);
  };
  
  // 处理登录事件
  const handleLogin = async () => {
    try {
      await Auth.signIn(formState.username, formState.password);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    
      
      
              
                {passwordVisible ?  : }
              
            
          ),
        }}
      />
      
        登录
      
    
  );
}

在自定义控制台页面中，使用组件呈现登录表单和联合身份验证按钮。