我已经按照此处提到的相同方式实现了 SPA - https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa#configure-your-javascript-spa
我已按照 - https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp/issues/61#issuecomment-630953375 更改了代码
我的代码仍然无法在 IE 11 上运行。与上述代码唯一不同的是我使用的是 MSAL 2.13.1.js。
2.*.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/popp<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4326316d293003726d72756d73" rel="noreferrer noopener nofollow">[email protected]</a>/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>
最佳答案
简而言之:是的。 MSAL 2.0 支持 IE。然而，它确实需要一个 Promise polyfill 来执行此操作，但它不包含它。
What browsers are supported by MSAL.js?
MSAL.js has been tested and supports the last 2 stable and supported versions of the following browsers:
- Chrome
- Edge (Chromium)
- Firefox
- Safari
- Opera
MSAL.js has also been tested and supports the following browsers with Promise polyfills (not included):
- IE 11
- Edge (Legacy)
关于javascript - MSAL 2.*.js 是否适用于 IE 11？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68345376/