Azure AD B2C配置异常：API权限问题与React前端Token捕获故障

一、Azure AD B2C API权限配置问题（下拉列表为空、Published Scopes无内容） #

你提到添加App ID URI后有进展，这其实是关键——Azure AD B2C里要让一个应用作为API被其他应用调用，必须先设置App ID URI来标识它，否则系统无法识别可添加的API资源。具体步骤可以按这个来：

1. 配置API应用的App ID URI
   登录Azure Portal，找到你的Azure AD B2C租户，进入「应用注册」，选中作为API的那个应用：

   • 切换到「公开 API」标签页
   • 点击「设置」来配置App ID URI，一般格式是https://<你的租户名>.onmicrosoft.com/<API应用的Client ID>，设置后保存。

2. 添加Published Scopes（权限范围）
   还是在「公开 API」页面：

   • 点击「添加范围」，填写范围名称（比如api.read、api.write）、显示名称（给用户看的权限描述）、描述
   • 在「谁可以同意？」选项里，根据需求选择「管理员和用户」或者仅「管理员」
   • 完成后保存，这时候你就能看到Published Scopes里有你添加的权限了。

3. 在前端应用中添加API权限
   切换到前端应用的「API权限」标签页：

   • 点击「添加权限」，现在下拉列表里应该能找到你刚才配置的API了
   • 选中对应的权限范围，点击添加，最后别忘了点击「为<租户名>授予管理员同意」，确保权限生效。

二、React前端MSAL封装库的Token捕获异常问题 #

这个封装库我之前也试过，碰到过类似的跳转和token捕获问题，大概率是配置细节没对齐，给你几个排查方向：

1. 核心配置参数校验 #

先确认你的配置对象里的参数是否和Azure AD B2C应用注册完全一致：

• tenant：必须是你的租户全称（比如myb2ctenant.onmicrosoft.com），不能只写前缀
• clientId：前端应用的Client ID（不是API应用的）
• signInPolicy：要和你创建的用户流/自定义策略名称完全匹配（比如B2C_1_signup_signin_v2，注意大小写和后缀）
• redirectUri：必须和Azure AD B2C应用注册里「身份验证」标签下的「重定向 URI」完全一致，本地开发的话一般是http://localhost:3000（如果用了其他端口要对应改），线上环境要填正式域名。

2. 路由与回调路径检查 #

这个封装库默认会用/auth-callback作为登录回调路径，你需要确保：

• 你的React路由没有拦截这个路径，或者如果自定义了回调路径，要在配置里指定redirectUri为对应的路径
• 如果用了React Router v6，要确保AzureADB2CProvider包裹了整个路由组件，让回调路径能被正确处理。

3. Token验证与报错排查 #

第三次捕获到token却报错，大概率是token的内容不符合预期：

• 打开浏览器开发者工具，切换到「应用程序」→「本地存储」，找到msal相关的存储项，查看token的内容（可以用jwt.io解码），检查aud（受众）是否是你的API应用的Client ID，iss（发行者）是否包含你的租户和策略名称
• 如果是版本兼容问题，检查封装库依赖的MSAL.js版本，确保和官方推荐的版本一致，有时候版本不匹配会导致token解析异常。

4. 调试技巧 #

可以在代码里添加日志监听，比如用封装库提供的useAzureADB2C钩子，监听登录状态变化：

import { useAzureADB2C } from 'react-azure-adb2c';

function MyComponent() {
  const { isAuthenticated, user, error } = useAzureADB2C();
  
  console.log('登录状态:', isAuthenticated);
  console.log('用户信息:', user);
  console.log('错误信息:', error);
  
  // ...其他代码
}

这样能快速定位到是登录过程中哪一步出了问题。

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