使用MSAL/React结合Azure B2C无法获取access_token问题排查

1. 修正MSAL v3的请求参数格式 #

你的代码中acquireTokenSilent的参数结构错误，MSAL v3不需要嵌套accessTokenRequest对象，直接将scopes和account放在顶层参数中。修正后的代码：

export async function getAccessToken(){
    const account = msalInstance.getActiveAccount();
    if (!account) {
        throw new Error("未找到活跃账户，请先登录");
    }
    const response = await msalInstance.acquireTokenSilent({
        scopes: ["https://<my api uri>/api.full_access"],
        account: account
    });
    return response;
}

2. 确认Azure B2C权限配置 #

• 登录Azure门户，进入你的B2C应用注册，在API权限页面：
  • 确保已添加目标API的权限（api.full_access）
  • 点击授予租户管理员同意（必须完成这一步，否则无法获取访问令牌）
• 验证scopes格式是否正确：必须是https://<你的B2C租户名>.onmicrosoft.com/<API的客户端ID>/<权限名>，确保替换成你实际的API URI和权限名。

3. 处理令牌缺失的情况 #

如果静默获取失败（比如缓存中没有对应令牌或刷新令牌过期），会抛出InteractionRequiredAuthError，此时需要触发交互式令牌获取：

import { InteractionRequiredAuthError } from "@azure/msal-browser";

export async function getAccessToken(){
    const account = msalInstance.getActiveAccount();
    if (!account) {
        throw new Error("未找到活跃账户，请先登录");
    }
    try {
        return await msalInstance.acquireTokenSilent({
            scopes: ["https://<my api uri>/api.full_access"],
            account: account
        });
    } catch (error) {
        if (error instanceof InteractionRequiredAuthError) {
            // 弹出窗口交互式获取令牌
            return await msalInstance.acquireTokenPopup({
                scopes: ["https://<my api uri>/api.full_access"],
                account: account
            });
        }
        throw error;
    }
}

4. 检查令牌缓存 #

可以通过以下代码查看缓存中的令牌，确认是否存在目标scope的access_token：

const tokenCache = msalInstance.getTokenCache();
const allTokens = await tokenCache.getAllTokens();
console.log("缓存中的令牌:", allTokens);

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