updated claims change parsing and storage schema

Author: salman90

2-Authorization-I/1-call-graph/README-incremental.md

@@ -249,18 +249,12 @@ Once the client app receives the CAE claims challenge from Microsoft Graph, it n
             if (response.headers.get('www-authenticate')) {
                 const account = msalInstance.getActiveAccount();
                 const authenticateHeader = response.headers.get('www-authenticate');
-
-                const claimsChallenge = authenticateHeader
-                    .split(' ')
-                    .find((entry) => entry.includes('claims='))
-                    .split('claims="')[1]
-                    .split('",')[0];
-
+                const claimsChallenge = parseChallenges(authenticateHeader);   
                 /**
                  * This method stores the claim challenge to the session storage in the browser to be used when acquiring a token.
                  * To ensure that we are fetching the correct claim from the storage, we are using the clientId
                  * of the application and oid (user’s object id) as the key identifier of the claim with schema
-                 * cc.<clientId>.<oid>
+                 * cc.<clientId>.<oid>.<resource.hostname>
                  */
                 addClaimsToStorage(claimsChallenge, `cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}`);
                 return { error: 'claims_challenge_occurred', payload: claimsChallenge };
@@ -280,12 +274,12 @@ After that, we require a new access token via the `useMsalAuthentication` hook,
         const { instance } = useMsal();
         const account = instance.getActiveAccount();
         const [graphData, setGraphData] = useState(null);
-
+        const resource = new URL(protectedResources.graphMe.endpoint).hostname;
         const request = {
             scopes: protectedResources.graphMe.scopes,
             account: account,
-            claims: account && getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}`)
-                ? window.atob(getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}`))
+            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"]}}}
         };
 

2-Authorization-I/1-call-graph/README.md

@@ -22,6 +22,7 @@ description: This sample demonstrates a React single-page application that signs
 * [Explore the sample](#explore-the-sample)
 * [Troubleshooting](#troubleshooting)
 * [About the code](#about-the-code)
+* [How to deploy this sample to Azure](#how-to-deploy-this-sample-to-azure)
 * [Next Steps](#next-steps)
 * [Contributing](#contributing)
 * [Learn More](#learn-more)
@@ -343,18 +344,13 @@ Once the client app receives the CAE claims challenge from Microsoft Graph, it n
             if (response.headers.get('www-authenticate')) {
                 const account = msalInstance.getActiveAccount();
                 const authenticateHeader = response.headers.get('www-authenticate');
-
-                const claimsChallenge = authenticateHeader
-                    .split(' ')
-                    .find((entry) => entry.includes('claims='))
-                    .split('claims="')[1]
-                    .split('",')[0];
+                const claimsChallenge = parseChallenges(authenticateHeader);    
 
                 /**
                  * This method stores the claim challenge to the session storage in the browser to be used when acquiring a token.
                  * To ensure that we are fetching the correct claim from the storage, we are using the clientId
                  * of the application and oid (user’s object id) as the key identifier of the claim with schema
-                 * cc.<clientId>.<oid>
+                 * cc.<clientId>.<oid><resource.hostname>
                  */
                 addClaimsToStorage(claimsChallenge, `cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}`);
                 return { error: 'claims_challenge_occurred', payload: claimsChallenge };
@@ -374,12 +370,12 @@ After that, we require a new access token via the `useMsalAuthentication` hook,
         const { instance } = useMsal();
         const account = instance.getActiveAccount();
         const [graphData, setGraphData] = useState(null);
-
+        const resource = new URL(protectedResources.graphMe.endpoint).hostname;
         const request = {
             scopes: protectedResources.graphMe.scopes,
             account: account,
-            claims: account && getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}`)
-                ? window.atob(getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}`))
+            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"]}}}
         };
 
@@ -487,6 +483,55 @@ You can use [React Router](https://reactrouter.com/) component in conjunction wi
     };
 ```
 
+## How to deploy this sample to Azure
+
+<details>
+ <summary>Expand the section</summary>
+
+### Deploying SPA to Azure Storage
+
+There is one single-page application in this sample. To deploy it to **Azure Storage**, you'll need to:
+
+* create an Azure Storage blob and obtain website coordinates
+* build your project and upload it to Azure Storage blob
+* update config files with website coordinates
+
+> :information_source: If you would like to use **VS Code Azure Tools** extension for deployment, [watch the tutorial](https://docs.microsoft.com/azure/developer/javascript/tutorial-vscode-static-website-node-01) offered by Microsoft Docs.
+
+#### Build and upload (ms-identity-react-c2s1) to an Azure Storage blob
+
+Build your project to get a distributable files folder, where your built `html`, `css` and `javascript` files will be generated. Then follow the steps below:
+
+> :warning: When uploading, make sure you upload the contents of your distributable files folder and **not** the entire folder itself.
+
+> :information_source: If you don't have an account already, see: [How to create a storage account](https://docs.microsoft.com/azure/storage/common/storage-account-create).
+
+1. Sign in to the [Azure portal](https://portal.azure.com).
+1. Locate your storage account and display the account overview.
+1. Select **Static website** to display the configuration page for static websites.
+1. Select **Enabled** to enable static website hosting for the storage account.
+1. In the **Index document name** field, specify a default index page (For example: `index.html`).
+1. The default **index page** is displayed when a user navigates to the root of your static website.
+1. Select **Save**. The Azure portal now displays your static website endpoint. Make a note of the **Primary endpoint field**.
+1. In the `ms-identity-react-c2s1` project source code, update your configuration file with the **Primary endpoint field** as your new **Redirect URI** (you will register this URI later).
+1. Next, select **Storage Explorer**.
+1. Expand the **BLOB CONTAINERS** node, and then select the `$web` container.
+1. Choose the **Upload** button to upload files.
+1. If you intend for the browser to display the contents of file, make sure that the content type of that file is set to `text/html`.
+1. In the pane that appears beside the **account overview page** of your storage account, select **Static Website**. The URL of your site appears in the **Primary endpoint field**. In the next section, you will register this URI.
+
+#### Update the Azure AD app registration for ms-identity-react-c2s1
+
+1. Navigate back to to the [Azure portal](https://portal.azure.com).
+1. In the left-hand navigation pane, select the **Azure Active Directory** service, and then select **App registrations**.
+1. In the resulting screen, select `ms-identity-react-c2s1`.
+1. In the app's registration screen, select **Authentication** in the menu.
+   * In the **Redirect URIs** section, update the reply URLs to match the site URL of your Azure deployment. For example:
+      * `https://ms-identity-react-c2s1.azurewebsites.net/`
+      * `https://ms-identity-react-c2s1.azurewebsites.net/redirect.html`
+
+</details>
+
 ### MSAL logging
 
 The Microsoft Authentication Library (MSAL) apps generate log messages to help diagnose issues. An app can configure logging with a few lines of code and have custom control over the level of detail and whether or not personal and organizational data is logged. Please check the [authConfig.js](./SPA/src//authConfig.js) file to see an example of configuring the logger with MSAL.js. For more information about using the logger with MSAL.js, see the following [Logging in MSAL.js](https://docs.microsoft.com/azure/active-directory/develop/msal-logging-js).

2-Authorization-I/1-call-graph/SPA/src/fetch.js

@@ -6,6 +6,7 @@
 import { msalInstance } from './index';
 import { msalConfig } from '../src/authConfig';
 import { addClaimsToStorage } from './utils/storageUtils';
+import { parseChallenges } from './utils/claimUtils';
 
 /**
  * Makes a GET request using authorization header. For more, visit:
@@ -16,7 +17,6 @@ import { addClaimsToStorage } from './utils/storageUtils';
 export const fetchData = async (accessToken, apiEndpoint) => {
     const headers = new Headers();
     const bearer = `Bearer ${accessToken}`;
-
     headers.append('Authorization', bearer);
 
     const options = {
@@ -25,7 +25,7 @@ export const fetchData = async (accessToken, apiEndpoint) => {
     };
 
     return fetch(apiEndpoint, options)
-        .then((response) => handleClaimsChallenge(response))
+        .then((response) => handleClaimsChallenge(response, apiEndpoint))
         .catch((error) => error);
 };
 
@@ -36,32 +36,33 @@ export const fetchData = async (accessToken, apiEndpoint) => {
  * @param {object} response
  * @returns response
  */
-const handleClaimsChallenge = async (response) => {
+const handleClaimsChallenge = async (response, apiEndpoint) => {
     if (response.status === 200) {
         return response.json();
     } else if (response.status === 401) {
         if (response.headers.get('www-authenticate')) {
             const account = msalInstance.getActiveAccount();
             const authenticateHeader = response.headers.get('www-authenticate');
-
-            const claimsChallenge = authenticateHeader
-                .split(' ')
-                .find((entry) => entry.includes('claims='))
-                .split('claims="')[1]
-                .split('",')[0];
+            const claimsChallenge = parseChallenges(authenticateHeader);
 
             /**
              * This method stores the claim challenge to the session storage in the browser to be used when acquiring a token.
              * To ensure that we are fetching the correct claim from the storage, we are using the clientId
              * of the application and oid (user’s object id) as the key identifier of the claim with schema
-             * cc.<clientId>.<oid>
+             * cc.<clientId>.<oid>.<resource.hostname>
              */
-            addClaimsToStorage(claimsChallenge, `cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}`);
-            return { error: 'claims_challenge_occurred', payload: claimsChallenge };
+            addClaimsToStorage(
+                claimsChallenge.claims,
+                `cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${new URL(apiEndpoint).hostname}`
+            );
+            return { error: 'claims_challenge_occurred', payload: claimsChallenge.claims };
         }
 
         throw new Error(`Unauthorized: ${response.status}`);
     } else {
         throw new Error(`Something went wrong with the request: ${response.status}`);
     }
 };
+
+
+

2-Authorization-I/1-call-graph/SPA/src/pages/Contacts.jsx

@@ -11,13 +11,15 @@ export const Contacts = () => {
     const { instance } = useMsal();
     const account = instance.getActiveAccount();
     const [graphData, setGraphData] = useState(null);
-
+    const resource = new URL(protectedResources.graphContacts.endpoint).hostname;
     const request = {
         scopes: protectedResources.graphContacts.scopes,
         account: account,
         claims:
-            account && getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}`)
-                ? window.atob(getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}`))
+            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"]}}}
     };
 

2-Authorization-I/1-call-graph/SPA/src/pages/Profile.jsx

@@ -11,13 +11,15 @@ export const Profile = () => {
     const { instance } = useMsal();
     const account = instance.getActiveAccount();
     const [graphData, setGraphData] = useState(null);
-
+    const resource = new URL(protectedResources.graphMe.endpoint).hostname;
     const request = {
         scopes: protectedResources.graphMe.scopes,
         account: account,
         claims:
-            account && getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}`)
-                ? window.atob(getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}`))
+            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"]}}}
     };
 

2-Authorization-I/1-call-graph/SPA/src/utils/claimUtils.js

@@ -222,3 +222,22 @@ const changeDateFormat = (date) => {
 };
 
 
+/**
+   * This method parses WWW-Authenticate authentication headers 
+   * @param header
+   * @return {Object} challengeMap
+   */
+export const parseChallenges = (header) => {
+    const schemeSeparator = header.indexOf(' ');
+    const challenges = header.substring(schemeSeparator + 1).split(',');
+    const challengeMap = {};
+
+    challenges.forEach((challenge) => {
+        const [key, value] = challenge.split('=');
+        challengeMap[key.trim()] = window.decodeURI(value.replace(/['"]+/g, ''));
+    });
+
+    return challengeMap;
+}
+
+