Update browser sample

samples/msal-browser-samples/VanillaJSTestApp2.0/app/b2c/auth.js

@@ -1,93 +1,71 @@
-// 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;
+let username = "";
 
 // Create the main myMSALObj instance
 // configuration parameters are located at authConfig.js
-const myMSALObj = new Msal.UserAgentApplication(msalConfig);
+const myMSALObj = new msal.PublicClientApplication(msalConfig);
 
 // Register Callbacks for Redirect flow
-myMSALObj.handleRedirectCallback(authRedirectCallBack);
+myMSALObj.handleRedirectPromise().then(response => {
+    if (response) {
+        handleResponse(response);
+    }
+}).catch(error => {
+    console.log(error);
+});
 
-function authRedirectCallBack(error, response) {
-    if (error) {
-        console.log(error);
+function handleResponse(response) {
+    if (response !== null) {
+        username = resp.account.username;
+        showWelcomeMessage(response.account);
+        updateUI(response);
     } else {
-        if (response.tokenType === "id_token" && myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {
-            console.log('id_token acquired at: ' + new Date().toString());
-            showWelcomeMessage(myMSALObj.getAccount());
-        } else if (response.tokenType === "access_token") {
-            console.log('access_token acquired at: ' + new Date().toString());
-            updateUI(response);
-            accessTokenButtonPopup.style.display = 'none';
-            accessTokenButtonRedirect.style.display = 'none';
-        } else {
-            console.log("token type is:" + response.tokenType);
+        // need to call getAccount here?
+        const currentAccounts = myMSALObj.getAllAccounts();
+        if (currentAccounts === null) {
+            return;
+        } else if (currentAccounts.length > 1) {
+            // Add choose account code here
+        } else if (currentAccounts.length === 1) {
+            username = currentAccounts[0].username;
+            showWelcomeMessage(currentAccounts[0]);
         }
-    }
+    }    
 }
 
-// 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.
-    showWelcomeMessage(myMSALObj.getAccount());
-}
-
-function signIn(method) {
-    signInType = isIE ? "loginRedirect" : method;
-    if (signInType === "loginPopup") {
-        myMSALObj.loginPopup(loginRequest)
-            .then(loginResponse => {
-            console.log(loginResponse);
-            if (myMSALObj.getAccount()) {
-                showWelcomeMessage(myMSALObj.getAccount());
-            }
-        }).catch(function (error) {
+async function signIn(method) {
+    if (method === "loginPopup") {
+        await myMSALObj.loginPopup().then(handleResponse).catch(function (error) {
             console.log(error);
         });
-    } else if (signInType === "loginRedirect") {
-        myMSALObj.loginRedirect(loginRequest)
+    } else if (method === "loginRedirect") {
+        myMSALObj.loginRedirect();
     }
 }
 
 function signOut() {
-    myMSALObj.logout();
+    const currentAcc = account;
+    myMSALObj.logout(currentAcc);
 }
 
 function getAccessTokenPopup() {
-    if (myMSALObj.getAccount()) {
-        myMSALObj.acquireTokenPopup(loginRequest).then(response => {
-            updateUI(response);
-            accessTokenButtonPopup.style.display = 'none';
-            accessTokenButtonRedirect.style.display = 'none';
-        }).catch(error => {
-            console.log(error);
-        });
-    }
+    request = tokenRequest
+    request.account = myMSALObj.getAccountByUsername(username);
+    myMSALObj.acquireTokenPopup(request).then(handleResponse).catch(error => {
+        console.log(error);
+    });
 }
 
 function getAccessTokenRedirect() {
-    if (myMSALObj.getAccount()) {
-        myMSALObj.acquireTokenRedirect(loginRequest);
-    }
+    request = tokenRequest
+    request.account = myMSALObj.getAccountByUsername(username);
+    myMSALObj.acquireTokenRedirect(request);
 }
 
 function getAccessTokenSilent() {
-    if (myMSALObj.getAccount()) {
-        myMSALObj.acquireTokenSilent(loginRequest).then(response => {
-            updateUI(response);
-            accessTokenButtonPopup.style.display = 'none';
-            accessTokenButtonRedirect.style.display = 'none';
-        }).catch(error => {
-            console.log(error);
-        })
-    }
+    request = tokenRequest
+    request.account = myMSALObj.getAccountByUsername(username);
+    myMSALObj.acquireTokenSilent(request).then(handleResponse).catch(error => {
+        console.log(error);
+    })
 }

samples/msal-browser-samples/VanillaJSTestApp2.0/app/b2c/authConfig.js

@@ -12,7 +12,7 @@ const msalConfig = {
 };
 
 // Add here scopes for id token to be used at MS Identity Platform endpoints.
-const loginRequest = {
+const tokenRequest = {
     scopes: ["https://msidlabb2c.onmicrosoft.com/msidlabb2capi/read"],
     forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
 };

samples/msal-browser-samples/VanillaJSTestApp2.0/app/b2c/index.html

@@ -7,7 +7,7 @@
 
     <!-- IE support: add promises polyfill before msal.js  -->    
     <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/js/browser/bluebird.min.js"></script>
-    <script src="./dist/msal.js"></script>
+    <script src="../lib/msal-browser.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">

samples/msal-browser-samples/VanillaJSTestApp2.0/app/b2c/test/browser.spec.ts

@@ -229,6 +229,11 @@ describe("Browser tests", function () {
         }); 
 
         it("Test acquireTokenSilent", async () => {
+            await page.click("#getAccessTokenPopup");
+            await page.waitForSelector("#access-token-info");
+            await page.reload();
+
+            await page.waitForSelector("#getAccessTokenSilent");
             await page.click("#getAccessTokenSilent");
             await page.waitForSelector("#access-token-info");
             await takeScreenshot(page, testName, "accessTokenAcquiredSilently");

samples/msal-browser-samples/VanillaJSTestApp2.0/app/b2c/ui.js

@@ -30,4 +30,6 @@ function updateUI(response) {
     scopes.innerHTML = "<strong>Access Token Acquired for Scopes: </strong>" + response.scopes;
 
     accessTokenDiv.appendChild(scopes);
+    accessTokenButtonPopup.style.display = 'none';
+    accessTokenButtonRedirect.style.display = 'none';
 }

samples/msal-core-samples/VanillaJSTestApp/app/b2c/auth.js

@@ -12,85 +12,82 @@ let signInType;
 
 // Create the main myMSALObj instance
 // configuration parameters are located at authConfig.js
-const myMSALObj = new msal.PublicClientApplication(msalConfig);
+const myMSALObj = new Msal.UserAgentApplication(msalConfig);
 
 // Register Callbacks for Redirect flow
-myMSALObj.handleRedirectPromise().then(response => {
-    if (response) {
-        handleResponse(response);
-    }
-}).catch(error => {
-    console.log(error);
-});
+myMSALObj.handleRedirectCallback(authRedirectCallBack);
 
-function handleResponse(response) {
-    if (response !== null) {
-        showWelcomeMessage(response.account);
+function authRedirectCallBack(error, response) {
+    if (error) {
+        console.log(error);
     } else {
-        // need to call getAccount here?
-        const currentAccounts = myMSALObj.getAllAccounts();
-        if (currentAccounts === null) {
-            return;
-        } else if (currentAccounts.length > 1) {
-            // Add choose account code here
-        } else if (currentAccounts.length === 1) {
-            showWelcomeMessage(currentAccounts[0]);
+        if (response.tokenType === "id_token" && myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {
+            console.log('id_token acquired at: ' + new Date().toString());
+            showWelcomeMessage(myMSALObj.getAccount());
+        } else if (response.tokenType === "access_token") {
+            console.log('access_token acquired at: ' + new Date().toString());
+            updateUI(response);
+            accessTokenButtonPopup.style.display = 'none';
+            accessTokenButtonRedirect.style.display = 'none';
+        } else {
+            console.log("token type is:" + response.tokenType);
         }
     }
-
-    if (response.tokenType === "Bearer") {
-        console.log('access_token acquired at: ' + new Date().toString());
-        updateUI(response);
-        accessTokenButtonPopup.style.display = 'none';
-        accessTokenButtonRedirect.style.display = 'none';
-    } else {
-        console.log("token type is:" + response.tokenType);
-    }
 }
 
 // Redirect: once login is successful and redirects with tokens, call Graph API
-let currentAccounts = myMSALObj.getAllAccounts();
-let account = ""
-if (currentAccounts.length === 1) {
+if (myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {
     // avoid duplicate code execution on page load in case of iframe and Popup window.
-    account = currentAccounts[0];
-    showWelcomeMessage(account);
+    showWelcomeMessage(myMSALObj.getAccount());
 }
 
-async function signIn(method) {
+function signIn(method) {
     signInType = isIE ? "loginRedirect" : method;
     if (signInType === "loginPopup") {
-        const loginResponse = await myMSALObj.loginPopup(loginRequest).then(handleResponse).catch(function (error) {
+        myMSALObj.loginPopup(loginRequest)
+            .then(loginResponse => {
+            console.log(loginResponse);
+            if (myMSALObj.getAccount()) {
+                showWelcomeMessage(myMSALObj.getAccount());
+            }
+        }).catch(function (error) {
             console.log(error);
         });
     } else if (signInType === "loginRedirect") {
-        myMSALObj.loginRedirect(loginRequest);
+        myMSALObj.loginRedirect(loginRequest)
     }
 }
 
 function signOut() {
-    const currentAcc = account;
-    myMSALObj.logout(currentAcc);
+    myMSALObj.logout();
 }
 
 function getAccessTokenPopup() {
-    request = loginRequest
-    request.account = account;
-    myMSALObj.acquireTokenPopup(request).then(handleResponse).catch(error => {
-        console.log(error);
-    });
+    if (myMSALObj.getAccount()) {
+        myMSALObj.acquireTokenPopup(loginRequest).then(response => {
+            updateUI(response);
+            accessTokenButtonPopup.style.display = 'none';
+            accessTokenButtonRedirect.style.display = 'none';
+        }).catch(error => {
+            console.log(error);
+        });
+    }
 }
 
 function getAccessTokenRedirect() {
-    request = loginRequest
-    request.account = account;
-    myMSALObj.acquireTokenRedirect(request);
+    if (myMSALObj.getAccount()) {
+        myMSALObj.acquireTokenRedirect(loginRequest);
+    }
 }
 
 function getAccessTokenSilent() {
-    request = loginRequest
-    request.account = account;
-    myMSALObj.acquireTokenSilent(request).then(handleResponse).catch(error => {
-        console.log(error);
-    })
+    if (myMSALObj.getAccount()) {
+        myMSALObj.acquireTokenSilent(loginRequest).then(response => {
+            updateUI(response);
+            accessTokenButtonPopup.style.display = 'none';
+            accessTokenButtonRedirect.style.display = 'none';
+        }).catch(error => {
+            console.log(error);
+        })
+    }
 }

samples/msal-core-samples/VanillaJSTestApp/app/b2c/index.html

@@ -7,7 +7,7 @@
 
     <!-- IE support: add promises polyfill before msal.js  -->    
     <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/js/browser/bluebird.min.js"></script>
-    <script src="../lib/msal-browser.js"></script>
+    <script src="./dist/msal.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">

samples/msal-core-samples/VanillaJSTestApp/app/b2c/test/browser.spec.ts

@@ -229,11 +229,6 @@ describe("Browser tests", function () {
         }); 
 
         it("Test acquireTokenSilent", async () => {
-            await page.click("#getAccessTokenPopup");
-            await page.waitForSelector("#access-token-info");
-            await page.reload();
-
-            await page.waitForSelector("#getAccessTokenSilent");
             await page.click("#getAccessTokenSilent");
             await page.waitForSelector("#access-token-info");
             await takeScreenshot(page, testName, "accessTokenAcquiredSilently");