如何在React+Vite+RTK的Azure AD B2C登录中通过msal-browser获取刷新令牌？

核心问题说明 #

使用@azure/msal-browser实现Azure AD B2C登录时，无法通过API直接获取刷新令牌，且acquireTokenSilent仅返回访问令牌，但API响应中实际存在刷新令牌。

为什么无法直接获取刷新令牌 #

msal-browser的设计核心之一是安全封装刷新令牌的生命周期管理：

• 刷新令牌属于敏感凭证，一旦在前端暴露，会极大增加被XSS攻击窃取的风险，导致账户被非法盗用。
• 官方刻意不提供直接获取刷新令牌的API，强制通过SDK内部自动处理刷新流程，避免开发者因误操作引入安全漏洞。

正确的令牌刷新实现方式 #

你不需要手动获取刷新令牌，acquireTokenSilent会自动完成令牌刷新逻辑：

1. 当调用acquireTokenSilent时，SDK会先检查本地缓存的访问令牌是否有效（未过期）。
2. 如果访问令牌已过期，SDK会自动使用缓存的刷新令牌向Azure AD B2C请求新的访问令牌。
3. 最终返回的response.accessToken就是最新的有效令牌，你只需将其存入应用状态（比如RTK Store）即可。

优化后的代码示例：

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

// 处理登录成功或令牌获取成功事件
if (event.eventType === EventType.LOGIN_SUCCESS || event.eventType === EventType.ACQUIRE_TOKEN_SUCCESS) {
  if (event?.payload?.idToken) {
    instance
      .acquireTokenSilent({
        // 注意：scopes应配置为你需要访问的资源权限范围，而非B2C Policy名称
        // 示例：scopes: ["https://your-tenant.onmicrosoft.com/api/access_as_user"]
        scopes: [AuthConfig.ApiScope], 
        account: currentAccount
      })
      .then(async (response) => {
        // 将最新的访问令牌存入RTK Store
        await store.dispatch(setAccessToken(response.accessToken));
      })
      .catch((error) => {
        // 静默刷新失败（如刷新令牌过期、用户会话失效），触发交互式登录
        if (error instanceof InteractionRequiredAuthError) {
          instance.acquireTokenPopup({
            scopes: [AuthConfig.ApiScope],
            account: currentAccount
          });
        }
      });
  }
}

注意事项 #

1. Scopes配置纠正：你当前代码中使用AuthConfig.Policy作为scopes是错误的，scopes必须对应你要访问的目标资源（如后端API）的权限范围，而非B2C的Policy名称。
2. 避免手动存储刷新令牌：即使通过自定义缓存插件等手段绕过SDK限制获取到刷新令牌，也会严重违反安全最佳实践，请勿尝试。

内容的提问来源于stack exchange，提问作者bhavik-civica