Microsoft TEAMS javascript SDK issue with MS600 certification exercise (authenticating user in a tab)

Viewed 303

On some environments, it sounds like the exercise 'Implement authentication in a custom tab' for MS-600 certification, using MSAL/ADAL and react doesn't work properly. (here). The authentication popup never closes.

In those environments, unplugging or disabling a monitor on the computer solves the issue. You will find below an environment description on which it fails always. Unplugging the monitor DELL U2713HM (in this case) and rebooting Microsoft TEAMS solves the issue.

Is someone experiencing the same behavior? Are there some monitors that aren't compatible with Microsoft teams and the javascript SDK?

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

EDIT

First of all, I strongly insist on the fact that the problem occurs only within microsoft teams desktop client, not within microsoft teams webapp. In order to debug within microsoft teams, I had to launch the client on 'developper preview'.

This is the code I'm running inside 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>

This is the weird result I get when opening developper preview. It sounds that the getContext callback is never reached.

developper preview console

0 Answers
Related