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.
