React应用集成Azure AD B2C Microsoft SSO遇应用ID无效问题求助

问题核心原因 #

错误提示明确说明应用ID不符合B2C服务要求，核心问题通常出在应用创建位置错误或配置参数不匹配。

排查与修复步骤 #

• 确认应用创建渠道：必须在Azure AD B2C专属门户而非普通Azure AD门户创建应用。普通Azure AD注册的应用无法适配B2C身份验证流程，需重新在B2C门户创建应用并获取对应clientId。
• 核对clientId准确性：确保代码中的clientId完全匹配B2C应用的「应用程序（客户端）ID」，无多余空格、字符复制错误。
• 修正authority格式：检查authority字符串是否合规，正确格式示例：

  authority: `https://<tenantName>.b2clogin.com/<tenantId>.onmicrosoft.com/<policyName>/v2.0/`
  

  建议用租户ID替代租户名称部分，避免名称拼写错误导致的域名解析问题；同时确保<policyName>是B2C门户已创建并启用的用户流/自定义策略名称。
• 验证重定向URI配置：在B2C应用的「身份验证」设置中，添加http://localhost:5000作为重定向URI，且类型选择单页应用(SPA)，确保与代码中的redirectUri完全一致（包括协议、端口）。
• 调整loginRequest的scopes：移除User.Read权限，B2C身份验证仅需基础的openid、profile（如需获取邮箱可添加email），User.Read属于Microsoft Graph权限，与B2C流程不兼容，会触发验证失败。修正后的代码：

  export const loginRequest = {
      scopes: ['openid', 'profile'],
  };
  

• 清除浏览器缓存：删除浏览器中与<tenantName>.b2clogin.com相关的Cookie和缓存，避免旧会话数据干扰验证流程。

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