Merge pull request #60 from Azure-Samples/derisen-refactoring

Password reset policy

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 4/28/2020
+
+* Updated to ## MSAL.js 1.3.0.
+* Added multiple policy support.
+* Added error handling for password reset policy.
+
 ## 2/21/2020
 
 * Source code refactored.

JavaScriptSPA/authConfig.js

@@ -7,7 +7,7 @@
 const msalConfig = {
   auth: {
     clientId: "e760cab2-b9a1-4c0d-86fb-ff7084abd902",
-    authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_susi",
+    authority: b2cPolicies.authorities.signUpSignIn.authority,
     validateAuthority: false
   },
   cache: {

JavaScriptSPA/authPopup.js

@@ -14,10 +14,23 @@ function signIn() {
 
     }).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(loginResponse => {
+              console.log(loginResponse);
+              window.alert("Password has been reset successfully. \nPlease sign-in with your new password.");
+            })
+        }
+      }
     });
 }
 
-// sign-out the user
+// Sign-out the user
 function logout() {
   // Removes all sessions, need to call AAD endpoint to do full logout
   myMSALObj.logout();

JavaScriptSPA/authRedirect.js

@@ -8,13 +8,33 @@ let accessToken;
 myMSALObj.handleRedirectCallback(authRedirectCallBack);
 
 function authRedirectCallBack(error, response) {
+  // Error handling
   if (error) {
     console.log(error);
+
+    // 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) {
+      try {
+        // Password reset policy/authority
+        myMSALObj.loginRedirect(b2cPolicies.authorities.forgotPassword);
+      } catch(err) {
+        console.log(err);
+      }
+    }
   } else {
-    if (response.tokenType === "id_token") {
+    // We need to reject id tokens that were not issued with the default sign-in policy.
+    // To learn more about b2c tokens, visit https://docs.microsoft.com/en-us/azure/active-directory-b2c/tokens-overview
+    if (response.tokenType === "id_token" && response.idToken.claims['acr'] !== b2cPolicies.names.signUpSignIn) {
+      myMSALObj.logout();
+      window.alert("Password has been reset successfully. \nPlease sign-in with your new password.");
+    } else if (response.tokenType === "id_token" && response.idToken.claims['acr'] === b2cPolicies.names.signUpSignIn) {
       console.log("id_token acquired at: " + new Date().toString());
-      myMSALObj.getAccount();
-      getTokenRedirect(tokenRequest);
+
+      if (myMSALObj.getAccount()) {
+        updateUI();
+      }
+
     } else if (response.tokenType === "access_token") {
         console.log("access_token acquired at: " + new Date().toString());
         accessToken = response.accessToken;
@@ -32,44 +52,38 @@ function authRedirectCallBack(error, response) {
   }
 }
 
-// Redirect: once login is successful and redirects with tokens, update UI
-if (myMSALObj.getAccount()) {
-  updateUI();
-}
-
 function signIn() {
-  myMSALObj.loginRedirect(loginRequest)
+  myMSALObj.loginRedirect(loginRequest);
 }  
 
-
 // sign-out the user
 function logout() {
   // Removes all sessions, need to call AAD endpoint to do full logout
   myMSALObj.logout();
 }
 
-// This function can be removed if you do not need to support IE
+// main method to get token with redirect flow
 function getTokenRedirect(request) {
-  return myMSALObj.acquireTokenSilent(request)
-    .then((response) => {
-      if (response.accessToken) {
-        accessToken = response.accessToken;
-        logMessage("Request made to Web API:");
+return myMSALObj.acquireTokenSilent(request)
+  .then((response) => {
+    if (response.accessToken) {
+      accessToken = response.accessToken;
+      logMessage("Request made to Web API:");
 
-        if (accessToken) {
-          try {
-            callApiWithAccessToken(apiConfig.webApi, accessToken);
-          } catch (err) {
-            console.log(err);
-          }
+      if (accessToken) {
+        try {
+          callApiWithAccessToken(apiConfig.webApi, accessToken);
+        } catch (err) {
+          console.log(err);
         }
       }
-    }).catch(error => {
-      console.log("Silent token acquisition fails. Acquiring token using redirect");
-      console.log(error);
-      // fallback to interaction when silent call fails
-      return myMSALObj.acquireTokenRedirect(request);
-    });
+    }
+  }).catch(error => {
+    console.log("Silent token acquisition fails. Acquiring token using redirect");
+    console.log(error);
+    // fallback to interaction when silent call fails
+    return myMSALObj.acquireTokenRedirect(request);
+  });
 }
 
 
@@ -85,4 +99,4 @@ function passTokenToApi() {
         console.log(err);
       }
   }
-} 
+}

JavaScriptSPA/index.html

@@ -6,10 +6,10 @@
   <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.2.2/js/msal.js" integrity="sha384-n2/wxR+doMGeL8Lmj4kdPRfZBUg2d/OAVqaKCoHPWOfOs1HUFU3laBvp3gv/HBOu" crossorigin="anonymous"></script>
+  <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.2.2/js/msal.js' type='text/javascript' integrity='sha384-n2/wxR+doMGeL8Lmj4kdPRfZBUg2d/OAVqaKCoHPWOfOs1HUFU3laBvp3gv/HBOu' crossorigin='anonymous'%3E%3C/script%3E"));
+    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 Bootstrap 4 for UI components  -->
@@ -43,6 +43,7 @@ <h5 id="label" class="card-title">Sign-in with Microsoft Azure AD B2C</h5>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
   <!-- importing app scripts -->
+  <script type="text/javascript" src="./policies.js"></script>
   <script type="text/javascript" src="./apiConfig.js"></script>
   <script type="text/javascript" src="./authConfig.js"></script>
   <script type="text/javascript" src="./ui.js"></script>

JavaScriptSPA/policies.js

@@ -0,0 +1,18 @@
+// Enter here the user flows and custom policies for your B2C application
+// To learn more about user flows, visit https://docs.microsoft.com/en-us/azure/active-directory-b2c/user-flow-overview
+// To learn more about custom policies, visit https://docs.microsoft.com/en-us/azure/active-directory-b2c/custom-policy-overview
+
+const b2cPolicies = {
+    names: {
+        signUpSignIn: "b2c_1_susi",
+        forgotPassword: "b2c_1_reset"
+    },
+    authorities: {
+        signUpSignIn: {
+            authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_susi",
+        },
+        forgotPassword: {
+            authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_reset",
+        },
+    },
+}

README.md

@@ -90,7 +90,7 @@ Now in the sample code, you can replace the single page application's demo envir
 3. Find the assignment for `authority` and replacing `b2c_1_susi` with the name of the policy you created in Step 2, and `fabrikamb2c.onmicrosoft.com` by the name of your Azure AD B2C tenant, for example `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>`
 4. Open the `apiConfig.js` file.
 5. Find the assignment for the scopes `b2cScopes` replacing the URL by the scope URL you created for the Web API, e.g. `b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/helloapi/demo.read"]`
-6. Find the assignment for API URL `webApi` replacing the current URL by the URL where you deployed your Web API in Step 4, e.g. `webApi: "http://localhost:5000/hello`
+6. Find the assignment for API URL `webApi` replacing the current URL by the URL where you deployed your Web API in Step 4, e.g. `webApi: http://localhost:5000/hello`
 
 Your resulting code should look as follows: