ReactJS应用中AWS Amplify集成Azure AD登录（跳过Cognito HostedUI）

1. 先确认Amplify Auth配置已添加Azure AD提供商 #

首先确保你的Amplify配置文件（如aws-exports.js或amplifyconfiguration.json）中，Auth模块的oauth部分已正确配置Azure AD信息：

// aws-exports.js 示例配置
const awsmobile = {
  "aws_project_region": "你的AWS区域",
  "aws_cognito_identity_pool_id": "你的身份池ID",
  "aws_cognito_region": "你的Cognito区域",
  "aws_user_pools_id": "你的用户池ID",
  "aws_user_pools_web_client_id": "你的用户池客户端ID",
  "oauth": {
    "domain": "你的Azure租户ID.b2clogin.com", // 若用Azure AD B2C需追加用户流，如`xxx.b2clogin.com/b2c_1_signup_signin`
    "scope": [
      "openid",
      "email",
      "profile"
    ],
    "redirectSignIn": "https://你的应用域名/login/callback", // 需与Azure应用注册的重定向URI完全一致
    "redirectSignOut": "https://你的应用域名/logout",
    "responseType": "code",
    "providers": {
      "microsoft": {
        "domain": "你的Azure租户ID.b2clogin.com",
        "clientId": "你的Azure应用注册客户端ID"
      }
    }
  }
};

export default awsmobile;

2. 编写Microsoft Azure登录函数 #

在你的自定义登录按钮点击事件对应的microsofAzureLogin函数中，直接调用Auth.federatedSignIn并指定provider为'Microsoft'即可触发跳转：

const microsofAzureLogin = async () => {
  try {
    // 指定provider为Microsoft，直接跳转至Azure登录页
    await Auth.federatedSignIn({ provider: 'Microsoft' });
  } catch (error) {
    console.error('Microsoft登录出错:', error);
  }
};

关键注意事项 #

• 重定向URI一致性：Azure应用注册中配置的重定向URI必须与Amplify的redirectSignIn完全匹配（包括http/https、域名、路径）
• Azure权限配置：确保Azure应用注册已启用OIDC授权流程，并授予openid、email、profile等必要权限
• Azure AD B2C特殊处理：若使用Azure AD B2C，domain字段需要包含对应的用户流路径，格式为{租户ID}.b2clogin.com/{用户流名称}

内容的提问来源于stack exchange，提问作者micronyks