OfficeJS+Angular集成MSAL与Azure AD后Excel面板认证失败求助

问题背景 #

已完成Office JS与Angular的集成部署，运行状态良好。现需扩展功能调用现有API，通过MSAL与Azure AD建立连接，配置信息如下：

OAuthSettings: {
  redirectUri: 'https://localhost:4200',
  clientId: 'clientId',
  tenentId: 'tenantID',
  scopes: ['api://api']
}
};

页面端可正常完成登录操作，但Excel面板内无法完成认证流程，怀疑与重定向等因素相关。

排查思路与解决方案 #

1. 修正重定向URI配置 #

• Office Add-in的认证重定向不能仅使用根地址https://localhost:4200，需配置为完整入口页面地址https://localhost:4200/index.html，同时在Azure AD应用注册的重定向URI列表中添加该地址，并勾选"SPA"类型。
• 由于Excel面板是嵌入环境，跳转式重定向会被拦截，必须采用弹出式认证，避免全页面跳转。

2. 适配MSAL配置以兼容Office环境 #

• 修改MSAL初始化逻辑，优先使用loginPopup方法而非loginRedirect，并在配置中启用弹出模式：

  MsalModule.forRoot({
    auth: {
      clientId: 'your-client-id',
      authority: 'https://login.microsoftonline.com/your-tenant-id',
      redirectUri: 'https://localhost:4200/index.html',
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: false,
    },
    system: {
      loggerOptions: {
        loggerCallback: (level, message, containsPii) => {
          console.log(message);
        },
      },
    }
  }, {
    popUp: true, // 启用弹出式认证
    consentScopes: ['api://your-api-client-id/access_as_user'],
    unprotectedResources: [],
    protectedResourceMap: new Map([
      ['https://your-api-endpoint', ['api://your-api-client-id/access_as_user']]
    ])
  })
  

• 注意配置中的租户ID拼写（原配置中tenentId为错误拼写，正确应为tenantId）。

3. 结合Office JS上下文初始化认证流程 #

• 在Angular应用初始化前，确保已完成Office环境的初始化：

  Office.initialize = () => {
    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.error(err));
  };
  

• 避免在Office面板中触发页面跳转，所有认证操作通过弹出窗口执行，防止被Office沙箱拦截。

4. 验证API权限与范围配置 #

• 确认Azure AD应用注册中，已为Add-in应用授予目标API的Delegated权限，并已完成管理员同意（若需）。
• 修正scopes配置，需指定API的具体权限，例如['api://{your-api-client-id}/access_as_user']，而非模糊的['api://api']。

5. 调试定位问题 #

• 开启MSAL调试日志，查看Excel面板控制台输出的认证流程细节，定位错误节点。
• 使用Edge DevTools附加到Excel的Add-in面板，检查网络请求与控制台错误，排查重定向拦截、权限不足等问题。

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