Update sample call graph API to follow Basher and Zero Trust

2-Authorization-I/1-call-graph/App/authConfig.js

@@ -5,26 +5,28 @@
  */
 const msalConfig = {
     auth: {
-        clientId: "Enter_the_Application_Id_Here", // This is the ONLY mandatory field that you need to supply.
-        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", // Defaults to "https://login.microsoftonline.com/common"
-        redirectUri: "/", // You must register this URI on Azure Portal/App Registration. Defaults to window.location.href
+        clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
+        authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Defaults to "https://login.microsoftonline.com/common"
+        redirectUri: '/', // You must register this URI on Azure Portal/App Registration. Defaults to window.location.href
+        postLogoutRedirectUri: '/', //Indicates the page to navigate after logout.
+        clientCapabilities: ['CP1'], // this lets the resource owner know that this client is capable of handling claims challenge.
     },
     cache: {
-        cacheLocation: "localStorage", // This configures where your cache will be stored
+        cacheLocation: 'localStorage', // This configures where your cache will be stored
         storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
     },
 };
 
 // Add here the endpoints for MS Graph API services you would like to use.
 const graphConfig = {
     graphMeEndpoint: {
-        uri: "https://graph.microsoft.com/v1.0/me",
-        scopes: ["User.Read"]
+        uri: 'https://graph.microsoft.com/v1.0/me',
+        scopes: ['User.Read'],
+    },
+    graphContactsEndpoint: {
+        uri: 'https://graph.microsoft.com/v1.0/me/contacts',
+        scopes: ['Contacts.Read'],
     },
-    graphMailEndpoint: {
-        uri: "https://graph.microsoft.com/v1.0/me/messages",
-        scopes: ["Mail.Read"]
-    }
 };
 
 /**
@@ -41,5 +43,6 @@ const loginRequest = {
 if (typeof exports !== 'undefined') {
     module.exports = {
         msalConfig: msalConfig,
+        graphConfig: graphConfig
     };
 }

2-Authorization-I/1-call-graph/App/authPopup.js

@@ -2,95 +2,220 @@
 // configuration parameters are located at authConfig.js
 const myMSALObj = new msal.PublicClientApplication(msalConfig);
 
-let username = "";
+let username = '';
+
+myMSALObj.addEventCallback((event) => {
+    if (
+        (event.eventType === 'msal:loginSuccess' || event.eventType === 'msal:acquireTokenSuccess') &&
+        event.payload.account
+    ) {
+        const account = event.payload.account;
+        myMSALObj.setActiveAccount(account);
+    }
 
-function selectAccount() {
+    if (event.eventType === 'msal:logoutSuccess') {
+        if (myMSALObj.getAllAccounts().length > 0) {
+            myMSALObj.setActiveAccount(myMSALObj.getAllAccounts()[0]);
+        }
+    }
+});
 
+function selectAccount() {
     /**
-     * See here for more info on account retrieval: 
+     * See here for more info on account retrieval:
      * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
      */
-
     const currentAccounts = myMSALObj.getAllAccounts();
-
     if (currentAccounts === null) {
         return;
     } else if (currentAccounts.length > 1) {
         // Add choose account code here
-        console.warn("Multiple accounts detected.");
+        console.warn('Multiple accounts detected.');
+        username = myMSALObj.getActiveAccount().username;
+        showWelcomeMessage(username, currentAccounts);
     } else if (currentAccounts.length === 1) {
-        username = currentAccounts[0].username;
-        showWelcomeMessage(username);
+        username = myMSALObj.getActiveAccount().username;
+        showWelcomeMessage(username, currentAccounts);
     }
 }
 
-function handleResponse(response) {
+async function addAnotherAccount(event) {
+    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(event.target.innerHTML)) {
+        const username = event.target.innerHTML;
+        const account = myMSALObj.getAllAccounts().find((account) => account.username === username);
+        const activeAccount = myMSALObj.getActiveAccount();
+        if (account && activeAccount.homeAccountId != account.homeAccountId) {
+            try {
+                myMSALObj.setActiveAccount(account);
+                let res = await myMSALObj.ssoSilent({
+                    ...loginRequest,
+                    account: account,
+                });
+                handleResponse(res);
+                window.location.reload();
+            } catch (error) {
+                if (error instanceof msal.InteractionRequiredAuthError) {
+                    let res = await instance.loginPopup({
+                        ...loginRequest,
+                        prompt: 'login',
+                    });
+                    handleResponse(res);
+                    window.location.reload();
+                }
+            }
+        } else {
+            closeModal();
+        }
+    } else {
+        try {
+            myMSALObj.setActiveAccount(null);
+            const res = await myMSALObj.loginPopup({
+                ...loginRequest,
+                prompt: 'login',
+            });
+            handleResponse(res);
+            closeModal();
+        } catch (error) {
+            console.log(error);
+        }
+    }
+}
 
+function handleResponse(response) {
     /**
      * To see the full list of response object properties, visit:
      * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#response
      */
 
     if (response !== null) {
+        const accounts = myMSALObj.getAllAccounts();
         username = response.account.username;
-        showWelcomeMessage(username);
+        showWelcomeMessage(username, accounts);
     } else {
         selectAccount();
     }
 }
 
 function signIn() {
-
     /**
      * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
      * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
      */
 
-    myMSALObj.loginPopup(loginRequest)
+    myMSALObj
+        .loginPopup(loginRequest)
         .then(handleResponse)
-        .catch(error => {
+        .catch((error) => {
             console.error(error);
         });
 }
 
 function signOut() {
-
     /**
      * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
      * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
      */
+    const account = myMSALObj.getAccountByUsername(username);
     const logoutRequest = {
-        account: myMSALObj.getAccountByUsername(username)
+        account: account,
+        redirectUri: '/redirect',
+        mainWindowRedirectUri: '/signout',
     };
-
-    myMSALObj.logout(logoutRequest);
+    clearStorage(account);
+    myMSALObj.logoutPopup(logoutRequest).catch((error) => {
+        console.log(error);
+    });
 }
 
 function seeProfile() {
-
+    const account = myMSALObj.getAccountByUsername(username);
     getGraphClient({
-        account: myMSALObj.getAccountByUsername(username),
+        account: account,
         scopes: graphConfig.graphMeEndpoint.scopes,
-        interactionType: msal.InteractionType.Popup
-    }).api('/me').get()
+        interactionType: msal.InteractionType.Popup,
+    })
+        .api('/me')
+        .responseType('raw')
+        .get()
         .then((response) => {
+            return handleClaimsChallenge(account, response, graphConfig.graphMeEndpoint.uri);
+        })
+        .then((response) => {
+            if (response && response.error === 'claims_challenge_occurred') throw response.error;
             return updateUI(response, graphConfig.graphMeEndpoint.uri);
-        }).catch((error) => {
-            console.log(error);
+        })
+        .catch((error) => {
+            if (error === 'claims_challenge_occurred') {
+                const resource = new URL(graphConfig.graphMeEndpoint.uri).hostname;
+                const claims =
+                    account &&
+                    getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`)
+                        ? window.atob(
+                              getClaimsFromStorage(
+                                  `cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`
+                              )
+                          )
+                        : undefined; // e.g {"access_token":{"xms_cc":{"values":["cp1"]}}}
+                let request = {
+                    account: account,
+                    scopes: graphConfig.graphMeEndpoint.scopes,
+                    claims: claims,
+                    redirectUri: '/redirect',
+                };
+
+                myMSALObj.acquireTokenPopup(request).catch((error) => {
+                    console.log(error);
+                });
+            } else {
+                console.log(error);
+            }
         });
 }
 
-function readMail() {
-
+function readContacts() {
+    const account = myMSALObj.getAccountByUsername(username);
     getGraphClient({
-        account: myMSALObj.getAccountByUsername(username),
-        scopes: graphConfig.graphMailEndpoint.scopes,
-        interactionType: msal.InteractionType.Popup
-    }).api('/me/messages').get()
+        account: account,
+        scopes: graphConfig.graphContactsEndpoint.scopes,
+        interactionType: msal.InteractionType.Popup,
+    })
+        .api('/me/contacts')
+        .responseType('raw')
+        .get()
         .then((response) => {
-            return updateUI(response, graphConfig.graphMailEndpoint.uri);
-        }).catch((error) => {
-            console.log(error);
+            return handleClaimsChallenge(account, response, graphConfig.graphContactsEndpoint.uri);
+        })
+        .then((response) => {
+            if (response && response.error === 'claims_challenge_occurred') throw response.error;
+            return updateUI(response, graphConfig.graphContactsEndpoint.uri);
+        })
+        .catch((error) => {
+            if (error === 'claims_challenge_occurred') {
+                const resource = new URL(graphConfig.graphContactsEndpoint.uri).hostname;
+                const claims =
+                    account &&
+                    getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`)
+                        ? window.atob(
+                              getClaimsFromStorage(
+                                  `cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`
+                              )
+                          )
+                        : undefined; // e.g {"access_token":{"xms_cc":{"values":["cp1"]}}}
+                let request = {
+                    account: account,
+                    scopes: graphConfig.graphContactsEndpoint.scopes,
+                    claims: claims,
+                    redirectUri: '/redirect',
+                };
+
+                myMSALObj.acquireTokenPopup(request).catch((error) => {
+                    console.log(error);
+                });
+            } else if (error.toString().includes('404')) {
+                return updateUI(null, graphConfig.graphContactsEndpoint.uri);
+            } else {
+                console.log(error);
+            }
         });
 }