Updating the sample

Author: sameerag

index.html

@@ -24,13 +24,13 @@
   <!-- bluebird only needed if this page needs to run on Internet Explorer -->
   <!-- msal.min.js can be used in the place of msal.js; included msal.js to make debug easy -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
-  <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/msal.js"></script>
+  <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.1.2/js/msal.js"></script>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js" class="pre"></script>
 
   <h2>Getting an access token with Azure AD B2C and calling a Web API</h2>
   <div>
     <div id="label">Sign-in with Microsoft Azure AD B2C</div>
-    <button id="auth" onclick="login()">Login</button>
+    <button id="auth" onclick="signIn()">Login</button>
     <button id="callApiButton" class="hidden" onclick="callApi()">Call Web API</button>
   </div>
 
@@ -43,13 +43,14 @@ <h2>Getting an access token with Azure AD B2C and calling a Web API</h2>
       b2cScopes: ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"],
       webApi: "https://fabrikamb2chello.azurewebsites.net/hello"
     };
+
   </script>
 
   <script>
     "use strict";
 
     // configuration to initialize msal
-    var msalConfig = {
+    const msalConfig = {
         auth: {
             clientId: "e760cab2-b9a1-4c0d-86fb-ff7084abd902", //This is your client ID
             authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_susi", //This is your tenant info
@@ -61,64 +62,68 @@ <h2>Getting an access token with Azure AD B2C and calling a Web API</h2>
         }
     };
 
-    var clientApplication = new Msal.UserAgentApplication(msalConfig);
-
-    // Register a call back for redirect flow
-    // myMSALObj.handleRedirectCallback(authRedirectCallback);
-
-    function login() {
+    // instantiate MSAL
+    const myMSALObj = new Msal.UserAgentApplication(msalConfig);
 
-      var loginRequest = {
+    // request to signin - returns an idToken
+    const loginRequest = {
         scopes: appConfig.b2cScopes
-      };
+    };
 
-      clientApplication.loginPopup(loginRequest).then(function (loginResponse) {
-        var tokenRequest = {
-          scopes: appConfig.b2cScopes
-        };
+    // request to acquire a token for resource access
+    const tokenRequest = {
+        scopes: appConfig.b2cScopes
+    };
 
-        clientApplication.acquireTokenSilent(tokenRequest).then(function (tokenResponse) {
-          updateUI();
+    // signin and acquire a token silently with POPUP flow. Fall back in case of failure with silent acquisition to popup
+    function signIn() {
+        myMSALObj.loginPopup(loginRequest).then(function (loginResponse) {
+            getToken(tokenRequest).then(updateUI);
         }).catch(function (error) {
-          clientApplication.acquireTokenPopup(tokenRequest).then(function (tokenResponse) {
-            updateUI();
-          }).catch (function (error) {
-            logMessage("Error acquiring the popup:\n" + error);
-          });
-        })
-      }).catch (function (error) {
-        logMessage("Error during login:\n" + error);
+            logMessage(error);
+        });
+    }
+
+    //acquire a token silently
+    function getToken(tokenRequest) {
+        return myMSALObj.acquireTokenSilent(tokenRequest).catch(function(error) {
+          console.log("aquire token popup");
+          // fallback to interaction when silent call fails
+          return myMSALObj.acquireTokenPopup(tokenrequest).then(function (tokenResponse) {
+          }).catch(function(error){
+            logMessage("Failed token acquisition", error);
+        });
       });
     }
 
+    // updates the UI post login/token acqusition
     function updateUI() {
-      var userName = clientApplication.getAccount().name;
-      console.log(clientApplication.getAccount());
+      const userName = myMSALObj.getAccount().name;
+      console.log(myMSALObj.getAccount());
       logMessage("User '" + userName + "' logged-in");
-      var authButton = document.getElementById('auth');
+
+      // add the logout button
+      const authButton = document.getElementById('auth');
       authButton.innerHTML = 'logout';
       authButton.setAttribute('onclick', 'logout();');
-      var label = document.getElementById('label');
+
+      // greet the user - specifying login
+      const label = document.getElementById('label');
       label.innerText = "Hello " + userName;
-      var callWebApiButton = document.getElementById('callApiButton');
+
+      // add the callWebApi button
+      const callWebApiButton = document.getElementById('callApiButton');
       callWebApiButton.setAttribute('class', 'visible');
     }
 
+    // calls the resource API with the token
     function callApi() {
-      var tokenRequest = {
-        scopes: appConfig.b2cScopes
-      }
-      clientApplication.acquireTokenSilent(tokenRequest).then(function (tokenResponse) {
+      getToken(tokenRequest).then(function(tokenResponse) {
         callApiWithAccessToken(tokenResponse.accessToken);
-      }).catch(function (error) {
-        clientApplication.acquireTokenPopup(tokenRequest).then(function (tokenResponse) {
-          callApiWithAccessToken(tokenResponse.accessToken);
-        }).catch(function (error) {
-          logMessage("Error acquiring the access token to call the Web api:\n" + error);
-        });
-      })
+      });
     }
 
+    // helper function to access the resource with the token
     function callApiWithAccessToken(accessToken) {
       // Call the Web API with the AccessToken
       $.ajax({
@@ -135,11 +140,13 @@ <h2>Getting an access token with Azure AD B2C and calling a Web API</h2>
         })
     }
 
+    // signout the user
     function logout() {
       // Removes all sessions, need to call AAD endpoint to do full logout
-      clientApplication.logout();
+      myMSALObj.logout();
     }
 
+    // debug helper
     function logMessage(s) {
       document.body.querySelector('.response').appendChild(document.createTextNode('\n' + s));
     }