我以与此处所述相同的方式实施spa-https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa#configure-你的javascript spa
我已根据以下内容更改代码：https://github.com/azure-samples/active-directory-b2c-javascript-msal-singlepageapp/issues/61#issuecomment-630953375
但我的代码仍然无法使用ie 11。与上述代码不同的是，我使用的是msal 2.13.1.js。
js与ie11一起工作吗？
我使用的代码如下。它不会在ie 11中重定向到microsoft登录页面。它在chrome和edge中运行良好。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="SHORTCUT ICON" href="./favicon.svg" type="image/x-icon">
<!-- msal.min.js can be used in the place of msal.js; included msal.js to make debug easy -->
<script src="https://alcdn.msauth.net/browser/2.13.1/js/msal-browser.js"
integrity="sha384-7hwr87O1w6buPsX92CwuRaz/wQzachgOEq+iLHv0ESavynv6rbYwKImSl7wUW3wV"
crossorigin="anonymous"></script>
<!-- To help ensure reliability, Microsoft provides a second CDN -->
<script type="text/javascript">
if (typeof Msal === 'undefined') document.write(unescape("%3Cscript src='https://alcdn.msftauth.net/browser/2.13.1/js/msal-browser.js' type='text/ javascript' crossorigin='anonymous' %3E%3C/script%3E"));
</script>
<!-- adding pollyfil for promises on IE11 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.min.js"></script>
<!-- adding Bootstrap 4 for UI components -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/">Microsoft identity platform</a>
<div class="btn-group ml-auto dropleft">
<button type="button" id="SignIn" class="btn btn-secondary" onclick="signIn()">
Sign In
</button>
</div>
</nav>
<br>
<h5 class="card-header text-center">Vanilla JavaScript SPA calling MS Graph API with MSAL.js</h5>
<br>
<div style="">
<button type="button" class="btn btn-primary" onclick="signOut()">Signout</button>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- importing app scripts (load order is important) -->
<!--<script type="text/javascript" src="Scripts/authConfig.js"></script>-->
<script type="text/javascript" src="Scripts/graphConfig.js"></script>
<script type="text/javascript" src="Scripts/ui.js"></script>
<!--<script type="text/javascript" src="Scripts/authredirect.js"></script>-->
<script type="text/javascript">
// configuration parameters are located at authConfig.js
var myMSALObj = new msal.PublicClientApplication(msalConfig);
var username = "";
var msalConfig = {
auth: {
clientId: "XXXXXXXXXXXXXXXXXXXXXXXXX",
authority: "https://login.microsoftonline.com/XXXXXXXXXXXXXX",
redirectUri: "https://localhost:44342/Ie11.html"
},
cache: {
cacheLocation: "sessionStorage",
// This configures where your cache will be stored
storeAuthStateInCookie: true // Set this to "true" if you are having issues on IE11 or Edge
}
};
/**
* A promise handler needs to be registered for handling the
* response returned from redirect flow. For more information, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/acquire-token.md
*/
myMSALObj.handleRedirectPromise().then(handleResponse).catch(function (error) {
console.error(error);
});
function selectAccount() {
/**
* See here for more info on account retrieval:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
*/
var currentAccounts = myMSALObj.getAllAccounts();
if (currentAccounts.length === 0) {
return;
} else if (currentAccounts.length > 1) {
// Add your account choosing logic here
console.warn("Multiple accounts detected.");
} else if (currentAccounts.length === 1) {
username = currentAccounts[0].username;
showWelcomeMessage(username);
}
}
function handleResponse(response) {
if (response !== null) {
username = response.account.username;
showWelcomeMessage(username);
} else {
selectAccount();
}
}
function signIn() {
/**
* You can pass a custom request object below. This will override the initial configuration. For more information, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
*/
myMSALObj.loginRedirect(loginRequest);
}
function signOut() {
/**
* You can pass a custom request object below. This will override the initial configuration. For more information, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
*/
var logoutRequest = {
account: myMSALObj.getAccountByUsername(username),
postLogoutRedirectUri: msalConfig.auth.redirectUri
};
myMSALObj.logoutRedirect(logoutRequest);
}
function getTokenRedirect(request) {
/**
* See here for more info on account retrieval:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
*/
request.account = myMSALObj.getAccountByUsername(username);
return myMSALObj.acquireTokenSilent(request).catch(function (error) {
console.warn("silent token acquisition fails. acquiring token using redirect");
if (error instanceof msal.InteractionRequiredAuthError) {
// fallback to interaction when silent call fails
return myMSALObj.acquireTokenRedirect(request);
} else {
console.warn(error);
}
});
}
function seeProfile() {
getTokenRedirect(loginRequest).then(function (response) {
callMSGraph(graphConfig.graphMeEndpoint, response.accessToken, updateUI);
}).catch(function (error) {
console.error(error);
});
}
function readMail() {
getTokenRedirect(tokenRequest).then(function (response) {
callMSGraph(graphConfig.graphMailEndpoint, response.accessToken, updateUI);
}).catch(function (error) {
console.error(error);
});
}
</script>
<!-- uncomment the above line and comment the line below if you would like to use the redirect flow -->
<!--<script type="text/javascript" src="Scripts/authPopup.js"></script>-->
<script type="text/javascript" src="Scripts/graph.js"></script>
</body>
</html>
1条答案
按热度按时间zvokhttg1#
简言之：是的。MSAL2.0支持ie。然而，它确实需要一个承诺polyfill来实现这一点，但它不包括。
msal.js支持哪些浏览器？
msal.js已经过测试，支持以下浏览器的最后2个稳定和受支持的版本：
铬
边缘（铬）
火狐
游猎
歌剧
msal.js也经过测试，支持以下带有promise polyfills（不包括）的浏览器：
ie 11
边缘（遗留）
来自faq的信息：msal.js支持哪些浏览器？