React应用通过Azure B2C与Easy Auth获取外部API访问令牌的正确流程

我明白你现在的困惑——明明看到登录回调里有access token，但就是在.auth/me或者默认请求头里找不到能用来调用外部API的那个。核心问题其实是Easy Auth默认只请求了针对App Service自身的权限范围，没有包含你外部API的scope，所以返回的token并不是给外部API用的。下面是一步步的正确流程：

1. 先搞定Azure B2C侧的API权限配置 #

首先得确保外部Web API已经在Azure B2C中注册为API资源，并且你已经定义了要暴露的权限范围（scope）：

• 登录Azure门户，找到你的B2C租户，进入应用注册，找到外部Web API的注册项
• 在公开API标签下，添加一个scope（比如api://<你的API应用ID>/access_as_user），设置用户可同意的权限
• 然后找到React应用对应的B2C应用注册（也就是Easy Auth使用的那个客户端应用），进入API权限标签，点击添加权限，选择刚才注册的外部API，添加你定义的scope，最后别忘了点击授予管理员同意（如果是租户内用户，这一步必须完成）

2. 配置App Service的Easy Auth，添加API Scope参数 #

接下来要告诉Easy Auth，登录时要请求外部API的scope：

• 进入你的Azure App Service，打开Authentication面板，找到已配置的Azure AD B2C身份提供者，点击编辑
• 在额外登录参数里，添加一个键值对：
  • 键：scope
  • 值：openid offline_access api://<你的API应用ID>/access_as_user
    （注意：openid和offline_access是必须的——前者用于获取ID token，后者用于刷新token；后面跟上你外部API的scope）
• 保存配置，重新启动App Service生效

3. 在React应用中获取并使用正确的Access Token #

现在用户登录后，Easy Auth会获取到包含外部API权限的access token，你可以通过两种方式获取：

方式一：解析.auth/me的返回结果 #

直接向/.auth/me发起GET请求（浏览器访问或者React中用fetch调用），返回的JSON里会包含access_token字段（当请求了多个scope时，可能是一个数组）。你需要：

• 遍历每个token，解析它的aud（受众）字段，找到匹配外部API应用ID的那个token
• 或者检查scp字段，确认包含你需要的scope名称
• 这个token就是Bearer格式的，直接放到请求头Authorization: Bearer <token>里调用外部API即可

方式二：调用/.auth/token端点获取特定token #

如果需要主动获取刷新后的token，或者指定scope获取，可以向/.auth/token发起POST请求：

• 请求头：Content-Type: application/x-www-form-urlencoded
• 请求体参数：

  grant_type=refresh_token
  refresh_token=<从/.auth/me获取的refresh_token>
  scope=api://<你的API应用ID>/access_as_user
  

• 这个请求会返回针对该scope的access token，直接使用即可

4. 调试和验证技巧 #

• 登录后直接在浏览器访问https://<你的App Service域名>/.auth/me，查看返回的token内容，确认aud和scp是否符合预期
• 如果还是看不到目标token，检查Easy Auth的scope参数是否拼写正确（尤其是API应用ID和scope名称），以及外部API的权限是否已经授予管理员同意
• 另外，可以在登录回调的URL哈希中查看access_token字段，确认它的受众是否是外部API的应用ID

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