Office Word插件Mac端（Safari WebKit 1.0）MSAL登录重定向失效问题

基于Angular 14.1.2开发的Office Word插件，采用Azure B2C结合MSAL库实现用户认证，该方案在Windows端运行完全正常，但在Mac端出现异常：插件对话框内调用登录重定向后流程卡住，仅写入Cookie和本地存储，无法跳转到Azure B2C登录页面。

特殊现象：

• 在loginRedirect()执行前设置断点，调试继续后流程可正常运行
• 提前设置代码延时无法解决问题
• 关闭Safari的ITP（智能跟踪预防）机制后仍无改善

环境版本 #

• Angular: 14.1.2
• @azure/msal-angular: 2.5.1
• @azure/msal-browser: 2.32.1

调用代码 #

this.msalService.loginRedirect().subscribe();

MSAL配置代码 #

export function msalInstanceFactory(appConfigService: AppConfigService): IPublicClientApplication {
  const appConfig = appConfigService.config;
  return new PublicClientApplication({
    auth: {
      clientId: appConfig.aadB2CClientId,
      authority: `https://${appConfig.aadB2CDomain}/${appConfig.aadB2CTenant}/${appConfig.aadB2CSIPolicy}`,
      redirectUri: appConfig.aadB2CRedirectUri,
      postLogoutRedirectUri: getLocationOriginWithPath('logout'),
      knownAuthorities: [appConfig.aadB2CDomain],
      navigateToLoginRequestUrl: false,
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE,
    },
    system: {
      loggerOptions: {
        loggerCallback: msalLoggerCallback,
        logLevel: LogLevel.Verbose,
        piiLoggingEnabled: true,
      },
    },
  });
}

export function msalGuardConfigFactory(appConfigService: AppConfigService): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: appConfigService.config.aadB2CConsentScopes,
      loginHint: getLoginHint(),
    },
  };
}

1. 确保DOM完全就绪后执行重定向 #

Mac端Office插件的WebView环境存在事件循环或DOM渲染延迟，断点能正常运行说明逻辑本身无问题，但即时执行时可能被异步操作阻塞。可将重定向调用放在Angular的AfterViewInit钩子中，通过微任务队列延迟执行：

import { AfterViewInit, Component } from '@angular/core';

@Component({...})
export class AuthComponent implements AfterViewInit {
  constructor(private msalService: MsalService) {}

  ngAfterViewInit(): void {
    queueMicrotask(() => {
      this.msalService.loginRedirect().subscribe();
    });
  }
}

2. 强制启用Cookie存储认证状态 #

Mac端Office WebView对LocalStorage的访问可能存在隐性限制，尝试强制开启Cookie存储：

cache: {
  cacheLocation: BrowserCacheLocation.LocalStorage,
  storeAuthStateInCookie: true, // 覆盖原isIE判断，强制启用Cookie存储
  secureCookies: true, // 若redirectUri为HTTPS，开启此项增强安全性
},

3. 手动触发重定向跳转 #

绕开MSAL的自动导航逻辑，手动获取认证URL并跳转：

// 先构建认证请求，再获取重定向URL并手动跳转
this.msalService.getAuthRequest({
  scopes: appConfigService.config.aadB2CConsentScopes,
  loginHint: getLoginHint(),
}).then((authRequest) => {
  this.msalService.getLoginRedirectUrl(authRequest).then((url) => {
    window.location.href = url;
  });
});

4. 检查Office插件Manifest权限配置 #

确保插件manifest.xml中添加了Azure B2C域名的授权，允许WebView导航到该域名：

<Permissions>ReadWriteDocument</Permissions>
<AppDomains>
  <AppDomain>https://your-b2c-domain.com</AppDomain>
</AppDomains>

5. 升级MSAL库版本 #

当前使用的msal-browser版本较旧，升级到兼容Angular 14的最新2.x版本，可能修复了Mac WebView下的重定向兼容问题：

npm install @azure/msal-angular@^2.8.0 @azure/msal-browser@^2.38.0

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