MSAL 2.*.js 是否适用于 IE 11？

Question

我已经按照此处提到的相同方式实施了 SPA - https://docs.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/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>

Answer 1

简而言之：是的。 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)

信息取自FAQ: What browsers are supported by MSAL.js?

Answer 2

问题是 msalConfig 应该在 myMSALObj 之上。

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
        
                    }
                };
var myMSALObj = new msal.PublicClientApplication(msalConfig);
                var username = "";

更新：如果有人正在寻找完整的示例，您可以参考此 link - https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-browser-samples/VanillaJSTestApp2.0/app/ie11-sample

MSAL 2.*.js 是否适用于 IE 11？

Does MSAL 2.*.js works with IE 11?

javascript

active-directory

azure

azure-active-directory

msal.js