Forum Discussion
Redirect Following Teams SSO Authentication
Meghana-MSFT For full disclosure, this is our current AuthStart page/script:
<script src="../Scripts/msteams-sdk-1.6.0.js"></script>
<script src="../Scripts/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
microsoftTeams.initialize();
microsoftTeams.getContext(function (context) {
let state = _guid();
localStorage.setItem("auth.state", state);
localStorage.removeItem("auth.error");
let queryParams = {
client_id: "@ViewBag.ClientId",
response_type: "id_token token",
response_mode: "fragment",
scope: "https://graph.microsoft.com/User.Read openid profile offline_access",
redirect_uri: window.location.origin + "/auth/msteamsSilentEnd",
nonce: _guid(),
state: state,
login_hint: context.loginHint,
};
let authorizeEndpoint = `https://login.microsoftonline.com/${context.tid}/oauth2/v2.0/authorize?${toQueryString(queryParams)}`;
window.location.assign(authorizeEndpoint);
});
function toQueryString(queryParams) {
let encodedQueryParams = [];
for (let key in queryParams) {
encodedQueryParams.push(key + "=" + encodeURIComponent(queryParams[key]));
}
return encodedQueryParams.join("&");
}
function _decimalToHex(number) {
var hex = number.toString(16);
while (hex.length < 2) {
hex = '0' + hex;
}
return hex;
}
function _guid() {
var cryptoObj = window.crypto || window.msCrypto;
if (cryptoObj && cryptoObj.getRandomValues) {
var buffer = new Uint8Array(16);
cryptoObj.getRandomValues(buffer);
buffer[6] |= 0x40;
buffer[6] &= 0x4f;
buffer[8] |= 0x80;
buffer[8] &= 0xbf;
return _decimalToHex(buffer[0]) + _decimalToHex(buffer[1]) + _decimalToHex(buffer[2]) + _decimalToHex(buffer[3]) + '-' + _decimalToHex(buffer[4]) + _decimalToHex(buffer[5]) + '-' + _decimalToHex(buffer[6]) + _decimalToHex(buffer[7]) + '-' +
_decimalToHex(buffer[8]) + _decimalToHex(buffer[9]) + '-' + _decimalToHex(buffer[10]) + _decimalToHex(buffer[11]) + _decimalToHex(buffer[12]) + _decimalToHex(buffer[13]) + _decimalToHex(buffer[14]) + _decimalToHex(buffer[15]);
}
else {
var guidHolder = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
var hex = '0123456789abcdef';
var r = 0;
var guidResponse = "";
for (var i = 0; i < 36; i++) {
if (guidHolder[i] !== '-' && guidHolder[i] !== '4') {
r = Math.random() * 16 | 0;
}
if (guidHolder[i] === 'x') {
guidResponse += hex[r];
} else if (guidHolder[i] === 'y') {
r &= 0x3;
r |= 0x8;
guidResponse += hex[r];
} else {
guidResponse += guidHolder[i];
}
}
return guidResponse;
}
}
</script>
And this is the AuthEnd:
<script src="../Scripts/msteams-sdk-1.6.0.js"></script>
<script src="../Scripts/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
microsoftTeams.initialize();
localStorage.removeItem("auth.error");
let hashParams = getHashParameters();
if (hashParams["error"]) {
localStorage.setItem("auth.error", JSON.stringify(hashParams));
microsoftTeams.authentication.notifyFailure(hashParams["error"]);
} else if (hashParams["access_token"]) {
let expectedState = localStorage.getItem("auth.state");
if (expectedState !== hashParams["state"]) {
localStorage.setItem("auth.error", JSON.stringify(hashParams));
microsoftTeams.authentication.notifyFailure("StateDoesNotMatch");
} else {
let key = "auth.result";
localStorage.setItem(key, JSON.stringify({
idToken: hashParams["id_token"],
accessToken: hashParams["access_token"],
tokenType: hashParams["token_type"],
expiresIn: hashParams["expires_in"]
}));
microsoftTeams.authentication.notifySuccess(key);
window.location.href = "/Home/Index";
}
} else {
localStorage.setItem("auth.error", JSON.stringify(hashParams));
microsoftTeams.authentication.notifyFailure("UnexpectedFailure");
}
function getHashParameters() {
let hashParams = {};
location.hash.substr(1).split("&").forEach(function (item) {
let s = item.split("="),
k = s[0],
v = s[1] && decodeURIComponent(s[1]);
hashParams[k] = v;
});
return hashParams;
}
</script>
Line #29 of the AuthEnd script is our culprit triggering the X-Frame issue on systems with multiple accounts.
- Meghana-MSFTApr 05, 2022Former Employee
Jeremy_Messer - You have placed the code for redirection in the Authend. Please note that after executing the authentication.notifySuccess, popup gets closed, and the control goes back to the place from where the authentication method was invoked. Could you please remove the window.location.href = "/Home/Index"; from Authend, place it in Authstart instead and check once again.
Thanks,
Meghana
----------------------------------------------------------------------------------------------------------
If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.
- Jeremy_MesserApr 08, 2022Copper ContributorWe have a public Github repo of a stripped sample of our most recent code available at https://github.com/vitNickW/TeamsAppMultiAuth if you want to test it on your end and see the problem we're encountering in a multi-user type of environment.
- Meghana-MSFTApr 08, 2022Former EmployeeThanks for providing additional information. We will check this and get back to you.
- Jeremy_MesserApr 05, 2022Copper ContributorI've attempted to do as you ask, but it doesn't seem to have made a difference to the behavior we're encountering? I placed the window.location.href = "/Home/Index"; command both before and after assigning the location to the authorizeEndpoint in the Authstart document to no effect.