使用MSAL v2与launchWebAuthFlow开发Chrome扩展时无法获取Access Token

问题核心 #

使用MSAL.js v2和Chrome launchWebAuthFlow实现Azure AD B2C认证时，仅能获取ID Token，Access Token为空。这通常由范围配置错误、公共客户端配置不当或登录请求未明确指定资源范围导致。

具体修复步骤 #

1. 移除多余的clientSecret配置 #

SPA属于公共客户端，不需要配置clientSecret，该配置会干扰MSAL认证流程。修改msalConfig：

const msalConfig = {
    auth: {
        clientId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        authority: b2cPolicies.authorities.signUpSignIn.authority, 
        // 移除clientSecret字段
        knownAuthorities: [b2cPolicies.authorityDomain],
        // 替换为自定义API范围，而非Microsoft Graph的User.Read
        scopes: ['https://mytenant.onmicrosoft.com/api/access_as_user'],
        redirectUri: "https://wpalojomizsavttlmcdieipalmiiozlqs.chromiumapp.org/"
    },
    cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: false
    }
}

2. 使用正确的API范围 #

User.Read是Microsoft Graph的范围，Azure AD B2C默认不会为SPA返回针对Graph的Access Token。需使用自己注册的B2C API范围：

• 登录Azure门户，进入B2C租户的应用注册 -> 目标API应用 -> 公开API
• 复制已定义的API范围（例如https://mytenant.onmicrosoft.com/api/access_as_user），替换msalConfig中的scopes。

3. 在登录请求中明确指定scopes #

修改登录相关函数，确保请求携带正确的scopes：

async function signIn(msalInstance) {
    // 传入自定义API范围参数
    const url = await getLoginUrl(msalInstance, {
        scopes: ['https://mytenant.onmicrosoft.com/api/access_as_user']
    });
    const result = await launchWebAuthFlow(msalInstance, url);
    if (result) {
        // MSAL返回的是驼峰格式的accessToken，而非小写accesstoken
        chrome.storage.local.set({ accessToken: result.accessToken });
    }

    msalInstance["browserStorage"].clear();
}

async function getLoginUrl(msalInstance, request = {}, reject) {
    return new Promise((resolve) => {
        msalInstance.loginRedirect({
            ...request,
            onRedirectNavigate: (url) => {
                resolve(url);
                return false;
            }
        }).catch(reject);
    });
}

4. 确认Azure AD B2C应用配置 #

• 再次确认SPA应用的认证 -> 隐式授权和混合流已勾选Access tokens
• 确保重定向URIhttps://wpalojomizsavttlmcdieipalmiiozlqs.chromiumapp.org/已添加到应用的重定向URI列表中

5. 优化launchWebAuthFlow处理逻辑 #

简化重定向响应的处理，确保正确解析token：

async function launchWebAuthFlow(msalInstance, url) {
    return new Promise((resolve, reject) => {
        chrome.identity.launchWebAuthFlow({
            url,
            interactive: true
        }, async (responseUrl) => {
            try {
                const result = await msalInstance.handleRedirectPromise(responseUrl);
                resolve(result);
            } catch (err) {
                reject(err);
            }
        })
    })
}

关键注意事项 #

• Access Token的获取必须针对特定API资源，不能仅依赖通用范围
• MSAL.js v2返回的token字段为驼峰格式accessToken，注意大小写匹配
• Chrome扩展的launchWebAuthFlow会接管重定向流程，需确保handleRedirectPromise正确解析回调URL中的token参数

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