如何用adal.js实现同AAD租户下嵌入iframe的SPA身份认证？

嘿，听起来你正在搭建一个可扩展的Angular主应用外壳，通过iframe嵌入同AAD租户下的其他Angular扩展应用，而且已经在用ADAL处理身份验证了——这场景我之前帮人排查过不少，给你几个关键的解决思路和配置要点：

这是一切的基础，同租户下的应用必须配置正确才能实现SSO和跨域嵌入：

• 确保主应用和所有扩展应用的AAD注册都归属同一租户，为每个扩展应用添加主应用的完整URL（比如http://localhost:4200）到「允许的重定向URI」和「允许的跨域来源」列表里（在AAD门户的应用注册→身份验证页面设置）。
• 每个应用注册都要开启ID令牌和访问令牌的颁发（在身份验证页面的「高级设置」→「令牌颁发」里勾选），iframe场景下需要这些令牌来完成身份验证传递。
• 主应用和扩展应用的ADAL配置里，tenantId必须完全一致，各自用自己的clientId。

浏览器的弹窗拦截机制会导致iframe里的弹出式登录直接失败，所以必须用静默登录模式：

• 在扩展应用的ADAL初始化配置里设置popUp: false，强制使用静默方式获取令牌。
• 扩展应用启动时，先检查用户是否已通过SSO认证，如果没有，调用acquireTokenSilent尝试静默获取令牌，而不是直接触发登录弹窗。示例代码如下：

import { AdalService } from 'adal-angular4';

export function adalInitializer(adalService: AdalService) {
  return () => {
    adalService.init({
      tenant: '你的租户ID',
      clientId: '扩展应用的Client ID',
      redirectUri: window.location.origin,
      popUp: false, // 关键：禁用弹窗登录
      cacheLocation: 'sessionStorage' // 推荐用sessionStorage，避免跨应用缓存冲突
    });
    adalService.handleWindowCallback();

    // 尝试静默登录/获取令牌
    if (!adalService.userInfo.authenticated) {
      adalService.acquireTokenSilent('扩展应用的Client ID')
        .then(token => {
          console.log('静默获取令牌成功:', token);
        })
        .catch(err => {
          // 静默失败时，建议引导用户到主应用完成登录（因为主应用已经是信任环境）
          console.error('静默登录失败:', err);
          // 比如可以通过postMessage通知主应用，或者直接跳转到主应用登录页
        });
    }
  };
}

• 本地调试注意：Chrome等浏览器默认会拦截第三方Cookie，导致AAD的SSO Cookie无法在iframe里生效。你可以临时在浏览器设置里禁用「SameSite by default cookies」（Chrome地址栏输入chrome://flags/#same-site-by-default-cookies，设置为Disabled），或者用Edge的InPrivate模式调试，这样静默登录才能正常工作。
• 生产环境：确保主应用和扩展应用都使用HTTPS（AAD要求生产环境必须用HTTPS），AAD会自动把认证Cookie设置为SameSite=None; Secure，满足跨域iframe的Cookie要求。

如果需要主应用和iframe里的扩展应用交互，用postMessage API，但一定要验证消息来源：

• 主应用监听消息时，检查event.origin是否在信任的扩展应用域名列表里：

window.addEventListener('message', (event) => {
  // 只处理信任来源的消息
  if (['http://localhost:4201', 'https://your-extension-domain.com'].includes(event.origin)) {
    console.log('收到扩展应用消息:', event.data);
    // 处理消息逻辑
  }
});

• 扩展应用发送消息时指定目标origin，避免消息泄露：

window.parent.postMessage({ action: 'updateData', data: {} }, 'http://localhost:4200');

ADAL已经是旧版库了，微软现在推荐使用MSAL.js v2（@azure/msal-angular），它对iframe场景的支持更好，API更简洁，还支持更多现代身份验证特性。如果你的项目还在初期，建议迁移到MSAL v2，减少后续维护成本。

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