Windows版Outlook事件型加载项：无需Node.js引入msal-browser实现SSO NAA

核心方案：全局脚本引入（无需打包） #

Outlook事件型加载项的运行环境不支持ES模块import，但可以通过动态加载全局脚本的方式引入msal-browser，完全不需要Node.js或打包工具。

方法1：CDN远程加载（最简便） #

直接从微软官方CDN加载msal-browser的压缩版脚本，加载完成后使用全局Msal对象实现SSO逻辑：

// 你的运行时JS文件开头添加这段代码
(function loadMsal() {
  const script = document.createElement('script');
  // 建议使用稳定版本，可替换为最新兼容版本
  script.src = 'https://alcdn.msauth.net/browser/2.38.0/js/msal-browser.min.js';
  script.onload = initMsalSSO;
  document.head.appendChild(script);
})();

function initMsalSSO() {
  // 初始化msal实例
  const msalConfig = {
    auth: {
      clientId: '你的应用客户端ID',
      authority: 'https://login.microsoftonline.com/你的租户ID',
      redirectUri: '你的重定向URI' // 需符合Outlook加载项要求，比如加载项域名页面或官方nativeclient地址
    }
  };
  const msalInstance = new Msal.PublicClientApplication(msalConfig);

  // 实现静默SSO
  msalInstance.acquireTokenSilent({
    scopes: ['User.Read'] // 按需调整权限范围
  }).then(tokenResponse => {
    // 成功获取令牌，后续业务逻辑
    console.log('令牌获取成功:', tokenResponse.accessToken);
  }).catch(error => {
    // 静默失败，触发交互式登录（弹窗）
    if (error instanceof Msal.InteractionRequiredAuthError) {
      msalInstance.acquireTokenPopup({ scopes: ['User.Read'] })
        .then(popupResponse => {
          console.log('弹窗登录成功:', popupResponse.accessToken);
        })
        .catch(popupError => {
          console.error('登录失败:', popupError);
        });
    } else {
      console.error('SSO错误:', error);
    }
  });
}

注意事项： #

• 确保Outlook加载项清单允许加载该CDN域名（一般微软官方CDN无需额外配置，若有CORS问题可在清单<AppDomains>中添加alcdn.msauth.net）。
• 重定向URI需提前在Azure AD应用注册中配置，且符合Outlook加载项的安全要求（如使用加载项自身域名下的页面，或https://login.microsoftonline.com/common/oauth2/nativeclient）。

方法2：本地静态文件加载（无外部依赖） #

若环境禁止加载外部CDN，可直接将msal-browser的压缩JS文件（从微软官网下载）复制到你的加载项项目目录中，作为静态资源加载：

(function loadLocalMsal() {
  const script = document.createElement('script');
  // 假设msal-browser.min.js与当前运行时JS同目录
  script.src = './msal-browser.min.js';
  script.onload = initMsalSSO;
  document.head.appendChild(script);
})();

// initMsalSSO函数与方法1完全一致，此处省略

操作步骤： #

1. 从微软msal-browser发布页面下载最新的msal-browser.min.js文件。
2. 将文件放入加载项项目的静态资源目录（与你的运行时JS同目录或指定路径）。
3. 调整上述代码中的script.src路径即可。

为什么不用fetch+eval？ #

虽然fetch加载脚本内容后用eval执行也能实现，但动态创建<script>标签是更标准、更安全的方式：

• 避免eval带来的代码注入风险。
• 脚本加载过程受浏览器安全策略管控，更符合Outlook加载项的安全要求。

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