Chrome环境下@azure/msal-browser 2.16.1弹窗被拦截问题求助

1. 切换到Redirect认证模式 #

浏览器对非用户主动触发的弹窗拦截严格，Redirect模式通过当前页面跳转完成认证，完全规避弹窗拦截问题。修改代码如下：

// 替换loginPopup为loginRedirect
installerMsal.loginRedirect({
  scopes: [...],
  prompt: 'consent'
});

// 在应用初始化阶段注册回调处理认证结果
installerMsal.handleRedirectPromise().then(authResult => {
  if (authResult) {
    // 处理成功的认证结果
  }
}).catch(err => {
  // 处理认证错误
});

2. 预创建弹窗（在用户交互上下文内） #

若必须保留Popup模式，可在用户主动点击登录按钮时提前创建弹窗（此时处于浏览器允许的用户交互上下文），让MSAL复用这个已授权的窗口，避免后续MFA弹窗被拦截：

// 绑定登录按钮的点击事件
document.getElementById('loginBtn').addEventListener('click', async () => {
  // 提前创建弹窗，此时不会被浏览器拦截
  const popupWindow = window.open('', '_blank', 'width=600,height=600');
  
  try {
    const authResult = await installerMsal.loginPopup({
      scopes: [...],
      prompt: 'consent',
      popupWindow: popupWindow // 传入预创建的窗口实例
    });
    // 处理认证结果
  } catch (err) {
    // 处理错误并关闭弹窗
    popupWindow.close();
  }
});

3. 升级@azure/msal-browser版本 #

你当前使用的2.16.1是较旧版本，后续版本（如v2.30及以上）针对弹窗拦截问题做了多项优化，包括更精准地在用户交互上下文内触发弹窗、修复MFA流程中的弹窗逻辑。升级后可能无需额外修改代码即可解决问题。

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