@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.
