如何在工具包中使用MSAL认证令牌并绕过二次登录？

我之前在集成MSAL和Microsoft Graph Toolkit（MGT）的时候也碰到过这个二次登录的问题，其实核心就是让MGT组件复用你已经通过MSAL建立好的认证会话，而不是自己重新发起登录流程。下面是具体的实现步骤：

1. 确保MSAL已完成登录并持有有效会话 #

首先你需要用MSAL.js v2完成用户登录，确保页面已经获取到有效的认证令牌和用户会话。这里是一个基础的MSAL初始化和登录示例：

// 初始化MSAL客户端实例
const msalConfig = {
  auth: {
    clientId: "你的应用客户端ID",
    authority: "https://login.microsoftonline.com/你的租户ID",
    redirectUri: "你的重定向URI"
  }
};
const msalInstance = new msal.PublicClientApplication(msalConfig);

// 检查已有会话，无会话则发起登录
async function initAuth() {
  const existingAccounts = msalInstance.getAllAccounts();
  if (existingAccounts.length === 0) {
    // 弹出登录窗口完成认证
    await msalInstance.loginPopup({
      scopes: ["user.read", "mail.read"] // 按需添加你需要的权限范围
    });
  }
}
initAuth();

2. 配置MGT的Msal2Provider复用MSAL实例 #

这是解决二次登录的关键步骤：不要让MGT自动创建新的认证上下文，而是直接传入你已经初始化好的MSAL实例，并禁用MGT自身的登录触发逻辑。

import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

// 初始化MGT Provider，复用已有的MSAL会话
const mgtProvider = new Msal2Provider({
  msalInstance: msalInstance, // 传入你已有的MSAL实例
  loginType: "none", // 禁止MGT发起自己的登录流程
  scopes: ["user.read", "mail.read"] // 要和MSAL登录时的权限范围保持一致
});

// 设置MGT全局Provider
mgtProvider.initialize();

关键注意事项 #

• 权限范围保持一致：MSAL登录时请求的scopes必须包含MGT组件需要的所有权限，否则MGT可能会触发权限补充请求（这不是二次登录，但如果权限已覆盖就不会出现）。
• 会话有效性维护：如果MSAL的令牌过期，MGT会自动通过传入的MSAL实例尝试刷新令牌，无需用户重新登录。
• 组件的行为：当你配置好上述Provider后，页面中的<mgt-login>组件会自动识别已有的会话，显示当前登录用户的信息，而不是登录按钮，不会触发二次登录。

如果是使用React版本的MGT组件，配置逻辑类似，只需在全局Provider中传入MSAL实例即可：

import { Providers } from "@microsoft/mgt-react";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  msalInstance: msalInstance,
  loginType: "none",
  scopes: ["user.read"]
});

这样配置后，MGT组件就会完全复用你通过MSAL获取的认证令牌和会话，不会再触发二次登录流程了。

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