added redirect flow

Author: derisen

JavaScriptSPA/api.js

@@ -24,7 +24,7 @@ function callApiWithAccessToken(endpoint, accessToken) {
 
 // calls the resource API with the token
 function callApi() {
-  getToken(tokenRequest)
+  getTokenPopup(tokenRequest)
       .then(tokenResponse => {
           try {
             callApiWithAccessToken(apiConfig.webApi, tokenResponse.accessToken);

JavaScriptSPA/auth.js

@@ -1,38 +1,94 @@
 
 "use strict";
 
-// instantiate MSAL
+// Browser check variables
+// If you support IE, our recommendation is that you sign-in using Redirect APIs
+// If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check
+const ua = window.navigator.userAgent;
+const msie = ua.indexOf("MSIE ");
+const msie11 = ua.indexOf("Trident/");
+const msedge = ua.indexOf("Edge/");
+const isIE = msie > 0 || msie11 > 0;
+const isEdge = msedge > 0;
+
+let signInType;
+
+// Create the main myMSALObj instance
+// configuration parameters are located at authConfig.js
 const myMSALObj = new Msal.UserAgentApplication(msalConfig);
 
-// sign-in and acquire a token silently with popup flow. 
-// Fall back in case of failure with silent acquisition to popup.
-function signIn() {
+// Register Callbacks for Redirect flow
+myMSALObj.handleRedirectCallback(authRedirectCallBack);
+
+function authRedirectCallBack(error, response) {
+    if (error) {
+      console.log(error);
+    } else {
+      if (response.tokenType === "id_token" && myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {
+        console.log('id_token acquired at: ' + new Date().toString());
+        updateUI();
+        getTokenRedirect(loginRequest);
+      } else if (response.tokenType === "access_token") {
+        console.log('access_token acquired at: ' + new Date().toString());
+      } else {
+        console.log("token type is:" + response.tokenType);
+      }
+    }
+  }
+
+// Redirect: once login is successful and redirects with tokens, call Graph API
+if (myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {
+    // avoid duplicate code execution on page load in case of iframe and Popup window.
+    updateUI();
+  }
+
+
+function signIn(method) {
+  
+  signInType = isIE ? "Redirect" : method;
+
+  if (signInType === "Popup") {
     myMSALObj.loginPopup(loginRequest)
-        .then(loginResponse => {
-            getToken(tokenRequest)
-                .then(updateUI);
-    }).catch(error => {
-        logMessage(error);
+      .then(loginResponse => {  
+        console.log('id_token acquired at: ' + new Date().toString());
+        if (myMSALObj.getAccount()) {
+          updateUI();
+        }
+    }).catch(function (error) {
+      console.log(error);
     });
+
+  } else if (signInType === "Redirect") {
+    myMSALObj.loginRedirect(loginRequest)
+  }
+}
+
+// sign-out the user
+function logout() {
+    // Removes all sessions, need to call AAD endpoint to do full logout
+    myMSALObj.logout();
 }
 
-//acquire a token silently
-function getToken(tokenRequest) {
-    return myMSALObj.acquireTokenSilent(tokenRequest)
+function getTokenPopup(request) {
+    return myMSALObj.acquireTokenSilent(request)
         .catch(error => {
-            console.log("Silent token acquisition fails. acquiring token using popup");
-            
+          console.log("silent token acquisition fails. acquiring token using popup");
             // fallback to interaction when silent call fails
-            return myMSALObj.acquireTokenPopup(tokenRequest)
+            return myMSALObj.acquireTokenPopup(request)
                 .then(tokenResponse => {
                 }).catch(error => {
-                    logMessage("Failed token acquisition", error);
+                    console.log(error);
                 });
         });
-}
-
-// 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
+  function getTokenRedirect(request) {
+    return myMSALObj.acquireTokenSilent(request)
+        .then((response) => {
+        }).catch(error => {
+            console.log("silent token acquisition fails. acquiring token using redirect");
+            // fallback to interaction when silent call fails
+            return myMSALObj.acquireTokenRedirect(request)
+        });
+  }

JavaScriptSPA/index.html

@@ -21,10 +21,16 @@
 
 <body>
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-    <a class="navbar-brand" href="/">Azure AD B2C</a>
-        <button type="button" id="authButton" class="btn btn-secondary ml-auto" onclick="signIn()">
+    <a class="navbar-brand" href="/">MS Identity Platform</a>
+    <div class="btn-group ml-auto dropleft">
+        <button type="button" id="SignIn" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           Sign In
-        </button> 
+        </button>
+        <div class="dropdown-menu">
+          <button class="dropdown-item" id="Popup" onclick="signIn(this.id)">Sign in using Popup</button>
+          <button class="dropdown-item" id="Redirect" onclick="signIn(this.id)">Sign in using Redirect</button>
+        </div>
+    </div>
   </nav>
   <div class="card">
     <h5 class="card-header text-center">Getting an access token with Azure AD B2C and calling a Web API</h5>

JavaScriptSPA/ui.js

@@ -4,10 +4,11 @@ function updateUI() {
     logMessage("User '" + userName + "' logged-in");
 
     // add the logout button
-    const authButton = document.getElementById('authButton');
-    authButton.innerHTML = 'logout';
-    authButton.setAttribute('onclick', 'logout();');
-    authButton.setAttribute('class', "btn btn-success ml-auto")
+    const signInButton = document.getElementById('SignIn');
+    signInButton.nextElementSibling.style.display = 'none';
+    signInButton.innerHTML = 'logout';
+    signInButton.setAttribute('onclick', 'logout();');
+    signInButton.setAttribute('class', "btn btn-success ml-auto")
 
     // greet the user - specifying login
     const label = document.getElementById('label');