Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp

The demo doesnt work on IE11

Closed this issue · 6 comments

suzannechang commented

Hi,

The demo doenst work on ie 11
The popup gives that the function Signin() is not set
How can i fix this?

Regards, Suzanne

derisen commented

The sample is using ES6 conventions and as such, it does not support IE11. If you really must use it on IE11, try transpiling the code, in particular the arrow functions. For this, you can use this tool.

suzannechang commented

Could you guide me a bit? I have transpiled and added bluebird. But nothing changes

derisen commented

@suzannechang were you able to solve your issue? You first need to convert every arrow function and template literals. For instance, signIn function should look like:

function signIn() {
  myMSALObj.loginPopup(loginRequest)
    .then(function (loginResponse) {
        console.log("id_token acquired at: " + new Date().toString());
        console.log(loginResponse);  
        
        if (myMSALObj.getAccount()) {
          updateUI();
        }
        
    }).catch(function (error) {
      console.log(error);

      // Error handling
      if (error.errorMessage) {
        // Check for forgot password error
        // Learn more about AAD error codes at https://docs.microsoft.com/en-us/azure/active-directory/develop/reference-aadsts-error-codes
        if (error.errorMessage.indexOf("AADB2C90118") > -1) {
          myMSALObj.loginPopup(b2cPolicies.authorities.forgotPassword)
            .then(function (loginResponse) {
              console.log(loginResponse);
              window.alert("Password has been reset successfully. \nPlease sign-in with your new password.");
            })
        }
      }
    });
}

And, you also need to import polyfills to your index.html, in the head section:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AAD B2C | MSAL.JS Vanilla JavaScript SPA</title>
  
  <!-- msal.min.js can be used in the place of msal.js; included msal.js to make debug easy -->
  <script type="text/javascript" src="https://alcdn.msauth.net/lib/1.3.0/js/msal.js" integrity="sha384-xeOjp8/l8VazdeNFRbrC9LWPR1InyrS8E1Na/0lv6V2r09iwX6vJC47FXlczokMi" crossorigin="anonymous"></script>
  <!-- msal.js with a fallback to backup CDN -->
  <script type="text/javascript">
    if(typeof Msal === 'undefined')document.write(unescape("%3Cscript src='https://alcdn.msftauth.net/lib/1.3.0/js/msal.js' type='text/javascript' integrity='sha384-xeOjp8/l8VazdeNFRbrC9LWPR1InyrS8E1Na/0lv6V2r09iwX6vJC47FXlczokMi' 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">
</head>

After that you're good to go. Let us know.

suzannechang commented

It has been fixed! Thank you so much!

  • 👍1
derisen commented

Cheers : ) Closing this.