MS600认证自定义标签认证弹窗无法关闭 多显示器Teams JS SDK兼容问题

问题现象 #

部分环境下，使用MSAL/ADAL和React完成MS-600认证的「在自定义标签页中实现身份验证」练习时，身份验证弹窗始终无法关闭。
故障仅在Microsoft Teams桌面客户端中出现，网页版无异常，已切换客户端到开发者预览版调试。

临时解决方案 #

拔下或禁用计算机的一台显示器即可解决该问题。当前稳定复现故障的环境下，拔下DELL U2713HM显示器后重启Microsoft Teams即可恢复正常。

复现环境配置 #

Operating System
    Windows 10 Professionnel 64-bit
CPU
    Intel Core i7 @ 2.90GHz 70 °C
    Haswell 22nm Technology
RAM
    16,0 Go Dual-Channel DDR3 @ 798MHz (11-11-11-28)
Motherboard
    Dell Inc. 0V5GVY (SOCKET 0)
Graphics
    DELL U2713HM (2560x1440@59Hz)
    Generic PnP Monitor (1680x1050@60Hz)
    DELL E228WFP (1680x1050@60Hz)
    2047MB NVIDIA Quadro K2100M (Dell)  46 °C
Storage
    465GB Crucial CT500MX500SSD1 (SATA (SSD))
    931GB Western Digital WDC WD10JPVX-75JC3T0 (SATA )  36 °C
Optical Drives
    No optical disk drives detected
Audio
    Périphérique audio USB

调试信息 #

从控制台日志可以看到，microsoftTeams.initialize()执行成功，但microsoftTeams.getContext()的回调函数始终未被触发。
auth-start.html的完整代码如下：

<!DOCTYPE html>
<html>
<body>
  <script src="https://statics.teams.cdn.office.net/sdk/v1.9.0/js/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
  <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.17/js/adal.min.js" crossorigin="anonymous"></script>
  <script type="text/javascript">

    console.log("initializing");
    microsoftTeams.initialize();
    console.log("initialized");
    try
    {

      microsoftTeams.getContext(function (msTeamsContext) {

        try{
          console.log("auth-start");
          // ADAL.js configuration
          let config = {
            clientId: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
            redirectUri: window.location.origin + "/auth-end.html",
            cacheLocation: "localStorage",
            endpoints: {
              "https://graph.microsoft.com": "https://graph.microsoft.com"
            }
          };

        
          // add extra query parameters Azure AD login request
          //  include scope for OpenID connect and log-in hint by using the current Microsoft Teams logged-in user
          config.extraQueryParameters = "scope=open+profile";
          if (msTeamsContext.upn) {
            config.extraQueryParameters += "&login-hint=" + encodeURIComponent(msTeamsContext.userProfileName);
          }
          // check if consent required for new permission
          if (getUrlParameter('prompt') !== "") {
            config.extraQueryParameters += "&prompt=" + getUrlParameter('prompt');
          }

          // override URL to Azure AD auth endpoint to include extra query parameters
          config.displayCall = function (urlNavigate) {
            if (urlNavigate) {
              if (config.extraQueryParameters) {
                urlNavigate += "&" + config.extraQueryParameters;
              }
              window.location.replace(urlNavigate);
            }
          }

          console.log("auth-context");
          // login
          let authContext = new AuthenticationContext(config);
          console.log("clear-cache");
          authContext.clearCache();
          console.log("login");
          authContext.login();
        }
        catch(error2) {
          console.log("error2");
          console.log(error2);
        }
        
      });
    }
    catch(error) {
        console.log("error");
        console.log(error);
    }

    function getUrlParameter(name) {
      name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
      var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
      var results = regex.exec(location.search);
      return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    };
  </script>
</body>
</html>

开发者预览版控制台截图：

根因说明与永久解决方案 #

这个问题和显示器硬件本身无关，是Windows多显示器DPI缩放/刷新率不一致导致的Teams桌面客户端SDK交互异常。
Teams桌面端基于Electron框架开发，旧版本的Electron在多显示器使用不同缩放比例、或者不同刷新率的场景下，会出现弹出窗口的父窗口上下文绑定错误，导致SDK的回调通知无法正常传递到弹出的认证页面，也就出现了getContext回调不触发、认证完成后弹窗无法自动关闭的问题。
你可以尝试以下几个永久解决方案，不需要拔掉显示器：

• 先把所有显示器的DPI缩放比例调整为相同值，刷新率也尽量统一，重启Teams后测试是否恢复
• 升级Teams桌面客户端到最新正式版，微软已经在1.5以上版本修复了多显示器场景下的多个SDK回调异常问题
• 把auth-start.html引用的Teams SDK从1.9.0升级到最新的2.x版本，2.x版本对多窗口上下文通信做了兼容性优化
• 启动Teams的时候右键快捷方式，在兼容性设置里勾选「禁用高DPI缩放优化」，重启Teams即可

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