add profile edit to redirect flow

Author: derisen

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## 08/31/2020
+
+* Updated MSAL.js to 1.4.0
+* Added Profile Edit user-flow.
+
 ## 08/05/2020
 
 * Updated to MSAL.js to 1.3.2.

JavaScriptSPA/authPopup.js

@@ -67,15 +67,9 @@ function passTokenToApi() {
 }
 
 function editProfile() {
-
-  const request = {
-    scopes: ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"],
-    authority: b2cPolicies.authorities.editProfile.authority
-  }
-
-  myMSALObj.loginPopup(request)
-  .then(tokenResponse => {
-      console.log("access_token acquired at: " + new Date().toString());
-      console.log(tokenResponse);
-  });
+  myMSALObj.loginPopup(b2cPolicies.authorities.editProfile)
+    .then(tokenResponse => {
+        console.log("access_token acquired at: " + new Date().toString());
+        console.log(tokenResponse);
+    });
 }

JavaScriptSPA/authRedirect.js

@@ -26,9 +26,17 @@ function authRedirectCallBack(error, response) {
     // We need to reject id tokens that were not issued with the default sign-in policy.
     // "acr" claim in the token tells us what policy is used (NOTE: for new policies (v2.0), use "tfp" instead of "acr")
     // 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) {
+    if (response.tokenType === "id_token" && response.idToken.claims['acr'] === b2cPolicies.names.forgotPassword) {
       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.editProfile) {
+      window.alert("Profile has been updated successfully.");
+
+      if (myMSALObj.getAccount()) {
+        updateUI();
+      }
+
     } else if (response.tokenType === "id_token" && response.idToken.claims['acr'] === b2cPolicies.names.signUpSignIn) {
       console.log("id_token acquired at: " + new Date().toString());
 
@@ -101,3 +109,7 @@ function passTokenToApi() {
       }
   }
 }
+
+function editProfile() {
+  myMSALObj.loginRedirect(b2cPolicies.authorities.editProfile);
+}

JavaScriptSPA/index.html

@@ -24,6 +24,7 @@
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     <a class="navbar-brand" href="/">Azure AD B2C</a>
     <div class="btn-group ml-auto dropleft">
+        <button type="button" id="editProfileButton" class="btn btn-secondary d-none" onclick="editProfile()">Edit Profile</button>
         <button type="button" id="signIn" class="btn btn-secondary" onclick="signIn()">Sign In</button>
         <button type="button" id="signOut" class="btn btn-success d-none" onclick="logout()">Sign Out</button>
     </div>
@@ -36,7 +37,6 @@ <h5 class="card-header text-center">Getting an access token with Azure AD B2C an
       <h5 id="label" class="card-title">Sign-in with Microsoft Azure AD B2C</h5>
       <pre id="response" class="card-text"></pre>
       <button type="button" id="callApiButton" class="btn btn-primary d-none" onclick="passTokenToApi()">Call API</button>
-      <button type="button" id="editProfileButton" class="btn btn-primary d-none" onclick="editProfile()">Edit Profile</button>
     </div>
   </div>
 
@@ -52,8 +52,8 @@ <h5 id="label" class="card-title">Sign-in with Microsoft Azure AD B2C</h5>
   <script type="text/javascript" src="./ui.js"></script>
 
   <!-- replace next line with authRedirect.js if you would like to use the redirect flow -->
-  <!-- <script type="text/javascript" src="./authRedirect.js"></script>   -->
-  <script type="text/javascript" src="./authPopup.js"></script>
+  <script type="text/javascript" src="./authRedirect.js"></script>  
+  <!-- <script type="text/javascript" src="./authPopup.js"></script> -->
   <script type="text/javascript" src="./api.js"></script>
 </body>
 </html>

JavaScriptSPA/policies.js

@@ -5,7 +5,8 @@
 const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi",
-        forgotPassword: "b2c_1_reset"
+        forgotPassword: "b2c_1_reset",
+        editProfile: "b2c_1_edit_profile"
     },
     authorities: {
         signUpSignIn: {