review changes

Author: derisen

6-AdvancedScenarios/1-call-api-obo/API/MsalOnBehalfOfClient.js renamed to 6-AdvancedScenarios/1-call-api-obo/API/auth/onBehalfOfClient.js

@@ -1,5 +1,5 @@
 const msal = require('@azure/msal-node');
-const config = require('./authConfig');
+const config = require('../authConfig');
 
 const msalConfig = {
     auth: {
@@ -25,7 +25,7 @@ const cca = new msal.ConfidentialClientApplication(msalConfig);
 const getOboToken = async (oboAssertion) => {
     const oboRequest = {
         oboAssertion: oboAssertion,
-        scopes: config.resources.downstreamAPI.scopes,
+        scopes: config.protectedResources.graphApi.scopes
     };
 
     try {

6-AdvancedScenarios/1-call-api-obo/API/auth/permissionUtils.js

@@ -1,20 +1,49 @@
+/**
+ * Indicates whether the access token was issued to a user or an application.
+ * @param {Object} accessTokenPayload 
+ * @returns {boolean}
+ */
+const isAppOnlyToken = (accessTokenPayload) => {
+    /**
+     * An access token issued by Azure AD will have at least one of the two claims. Access tokens
+     * issued to a user will have the 'scp' claim. Access tokens issued to an application will have
+     * the roles claim. Access tokens that contain both claims are issued only to users, where the scp
+     * claim designates the delegated permissions, while the roles claim designates the user's role.
+     *
+     * To determine whether an access token was issued to a user (i.e delegated) or an application
+     * more easily, we recommend enabling the optional claim 'idtyp'. For more information, see:
+     * https://docs.microsoft.com/azure/active-directory/develop/access-tokens#user-and-application-tokens
+     */
+    if (!accessTokenPayload.hasOwnProperty('idtyp')) {
+        if (accessTokenPayload.hasOwnProperty('scp')) {
+            return false;
+        } else if (!accessTokenPayload.hasOwnProperty('scp') && accessTokenPayload.hasOwnProperty('roles')) {
+            return true;
+        }
+    }
+
+    return accessTokenPayload.idtyp === 'app';
+};
+
 /**
  * Ensures that the access token has the specified delegated permissions.
  * @param {Object} accessTokenPayload: Parsed access token payload
  * @param {Array} requiredPermission: list of required permissions
  * @returns {boolean}
  */
- const hasRequiredDelegatedPermissions = (accessTokenPayload, requiredPermission) => {
+const hasRequiredDelegatedPermissions = (accessTokenPayload, requiredPermission) => {
     const normalizedRequiredPermissions = requiredPermission.map(permission => permission.toUpperCase());
 
     if (accessTokenPayload.hasOwnProperty('scp') && accessTokenPayload.scp.split(' ')
         .some(claim => normalizedRequiredPermissions.includes(claim.toUpperCase()))) {
+
         return true;
     }
 
     return false;
 }
 
 module.exports = {
+    isAppOnlyToken,
     hasRequiredDelegatedPermissions,
 }

6-AdvancedScenarios/1-call-api-obo/API/authConfig.js

@@ -15,19 +15,20 @@ const authConfig = {
         loggingLevel: 'info',
         loggingNoPII: true,
     },
-
-    resources: {
-        downstreamAPI: {
-            endpoint: 'https://graph.microsoft.com/v1.0',
-            scopes: ['User.Read', 'offline_access'],
-        },
-        middleTierAPI: {
+    protectedRoutes: {
+        profile: {
             endpoint: '/api/profile',
             delegatedPermissions: {
                 scopes: ['access_graph_on_behalf_of_user'],
             },
         },
     },
+    protectedResources: {
+        graphApi: {
+            endpoint: 'https://graph.microsoft.com/v1.0',
+            scopes: ['User.Read', 'offline_access'],
+        }
+    },
 };
 
 module.exports = authConfig;

6-AdvancedScenarios/1-call-api-obo/API/controllers/profileController.js

@@ -1,23 +1,32 @@
-const { getOboToken } = require('../MsalOnBehalfOfClient');
-const { getGraphClient } = require('../util/graphClient');
 const { ResponseType } = require('@microsoft/microsoft-graph-client');
+const { getOboToken } = require('../auth/onBehalfOfClient');
+const { getGraphClient } = require('../util/graphClient');
+
 const authConfig = require('../authConfig');
 
 const {
+    isAppOnlyToken,
     hasRequiredDelegatedPermissions,
 } = require('../auth/permissionUtils');
 
 exports.getProfile = async (req, res, next) => {
+    if (isAppOnlyToken(req.authInfo)) {
+        return next(new Error('This route requires a user token'));
+    }
+
     const userToken = req.get('authorization');
     const [bearer, tokenValue] = userToken.split(' ');
 
-    let accessToken;
-    if (hasRequiredDelegatedPermissions(req.authInfo, authConfig.resources.middleTierAPI.delegatedPermissions.scopes)) {
+    if (hasRequiredDelegatedPermissions(req.authInfo, authConfig.protectedRoutes.profile.delegatedPermissions.scopes)) {
         try {
-            accessToken = await getOboToken(tokenValue);
-            let graphResponse = await getGraphClient(accessToken).api('/me').responseType(ResponseType.RAW).get();
-            graphResponse = await graphResponse.json();
-            res.json(graphResponse);
+            const accessToken = await getOboToken(tokenValue);
+            const graphResponse = await getGraphClient(accessToken)
+                .api('/me')
+                .responseType(ResponseType.RAW)
+                .get();
+
+            const response = await graphResponse.json();
+            res.json(response);
         } catch (error) {
             next(error);
         }

6-AdvancedScenarios/1-call-api-obo/API/package-lock.json

@@ -20,7 +20,6 @@
     "express-rate-limit": "^6.7.0",
     "isomorphic-fetch": "^3.0.0",
     "morgan": "^1.10.0",
-    "node-fetch": "^2.6.7",
     "passport": "^0.6.0",
     "passport-azure-ad": "^4.3.3"
   },

6-AdvancedScenarios/1-call-api-obo/API/package.json

@@ -1,5 +1,6 @@
 const graph = require('@microsoft/microsoft-graph-client');
 require('isomorphic-fetch');
+
 /**
  * Creating a Graph client instance via options method. For more information, visit:
  * https://github.com/microsoftgraph/msgraph-sdk-javascript/blob/dev/docs/CreatingClientInstance.md#2-create-with-options

6-AdvancedScenarios/1-call-api-obo/API/util/graphClient.js

@@ -3,11 +3,11 @@ page_type: sample
 name: Authenticate a user with Azure AD using msal.js and call an Azure AD protected Node.js Web Api using on-behalf of flow
 description: Handling Conditional Access challenges in an Azure AD protected Node.js web API calling another protected Node.js web API on behalf of a user using the on-behalf of flow
 languages:
- - typescript
- - Node
+ - javascript
 products:
  - azure-active-directory
  - msal-js
+ - msal-react
  - passport-azure-ad
 urlFragment: ms-identity-javascript-react-tutorial
 extensions:
@@ -42,7 +42,7 @@ This sample demonstrates a React single-page application (SPA) which lets a user
 
 1. The client app uses **MSAL React** to sign-in a user and obtain a **JWT** [Access Token](https://aka.ms/access-tokens) from **Azure AD** for the **API**.
 1. The access token is used as a *bearer token* to authorize the user to call the Node.js **API** protected by **Azure AD**.
-1. This access token is also used by the Node.js API to obtain another Access token to call the MS Graph API **on user's behalf** using the [OAuth 2.0 on-behalf-of flow](https://docs.microsoft.com/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow). 
+1. This access token is also used by the Node.js API to obtain another Access token to call the MS Graph API **on user's behalf** using the [OAuth 2.0 on-behalf-of flow](https://docs.microsoft.com/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow).
 1. The Node.js **API** uses the [Microsoft Graph SDK](https://docs.microsoft.com/graph/sdks/sdks-overview) to call MS Graph
 
 ![Scenario Image](./ReadmeFiles/topology.png)
@@ -54,7 +54,7 @@ This sample demonstrates a React single-page application (SPA) which lets a user
 | `AppCreationScripts/` | Contains Powershell scripts to automate app registration. |
 | `SPA/src/authConfig.js`   | Contains configuration parameters for the SPA.   |
 | `API/authConfig.json`| Contains authentication parameters for the API. |
-| `API/MsalOnBehalfOfClient.js`| Contains the logic to Acquire an access token for Graph API using OBO flow. |
+| `API/auth/onBehalfOfClient.js`| Contains logic to acquire an access token for Graph API using OBO flow. |
 
 ## Prerequisites
 
@@ -119,7 +119,7 @@ There are two projects in this sample. Each needs to be separately registered in
     ```PowerShell
     cd .\AppCreationScripts\
     .\Configure.ps1 -TenantId "[Optional] - your tenant id" -AzureEnvironmentName "[Optional] - Azure environment, defaults to 'Global'"
-        ```
+    ```
 
 > Other ways of running the scripts are described in [App Creation Scripts guide](./AppCreationScripts/AppCreationScripts.md). The scripts also provide a guide to automated application registration, configuration and removal which can help in your CI/CD scenarios.
 
@@ -189,19 +189,18 @@ To manually register the apps, as a first step you'll need to:
    1. Set the **optionalClaims** property as shown below to request client capabilities claim *xms_cc*:
 
    ```json
-      "optionalClaims": 
-      {
-      "accessToken": [
-         {
-            "additionalProperties": [],
-            "essential": false,
-            "name": "xms_cc",
-            "source": null
-         }
-      ],
-      "idToken": [],
-      "saml2Token": []
-      }
+        "optionalClaims": {
+            "accessToken": [
+                {
+                    "additionalProperties": [],
+                    "essential": false,
+                    "name": "xms_cc",
+                    "source": null
+                }
+            ],
+            "idToken": [],
+            "saml2Token": []
+        }
     ```
 
 ##### Configure the service app (msal-node-api) to use your app registration
@@ -319,32 +318,9 @@ The middle-tier application adds the client to the `knownClientApplications` lis
 
 ### Acquire an access token with the OBO flow
 
-To get the access token for Graph API using the OBO flow, the middle-tier web API will initialize a **ConfidentialClientApplication** to exchange the access token using the **acquireTokenOnBehalfOf** API to get a new access token for the down-stream resource in the case Graph API.
+To get the access token for Graph API using the OBO flow, the middle-tier web API will initialize a **ConfidentialClientApplication** to exchange the access token using the **acquireTokenOnBehalfOf** API to get a new access token for the down-stream resource in the case Graph API. This is shown in [onBehalfOfClient.js](./API/auth/onBehalfOfClient.js):
 
 ```javascript
-const msal = require('@azure/msal-node');
-const config = require('./authConfig');
-
-const msalConfig = {
-    auth: {
-        clientId: config.credentials.clientID,
-        authority: `https://${config.metadata.authority}/${config.credentials.tenantID}`,
-        clientSecret: config.credentials.clientSecret,
-    },
-    system: {
-        loggerOptions: {
-            loggerCallback(loglevel, message, containsPii) {
-                console.log(message);
-            },
-            piiLoggingEnabled: false,
-            logLevel: msal.LogLevel.Info,
-        },
-    },
-};
-
-// Create msal application object
-const cca = new msal.ConfidentialClientApplication(msalConfig);
-
 const getOboToken = async (oboAssertion) => {
     const oboRequest = {
         oboAssertion: oboAssertion,

6-AdvancedScenarios/1-call-api-obo/README.md

@@ -53,7 +53,7 @@ export const NavigationBar = () => {
                 </a>
                 <AuthenticatedTemplate>
                     <Nav.Link className="navbarButton" href="/profile">
-                        Call API
+                        Profile
                     </Nav.Link> 
                     <div className="collapse navbar-collapse justify-content-end">
                         <DropdownButton

6-AdvancedScenarios/1-call-api-obo/SPA/src/components/NavigationBar.jsx

@@ -14,34 +14,7 @@ export const callApiWithToken = async (accessToken, apiEndpoint) => {
         headers: headers
     };
 
-    return fetch(apiEndpoint, options)
-        .then(response => response.json())
-        .then(response => {
-            return new Promise((resolve, reject) => {
-                // check for any errors
-                if (response['error_codes']) {
-
-                    /**
-                     * Conditional access MFA requirement throws an AADSTS50076 error.
-                     * If the user has not enrolled in MFA, an AADSTS50079 error will be thrown instead.
-                     * If this occurs, sample middle-tier API will propagate this to client
-                     * For more, visit: https://docs.microsoft.com/azure/active-directory/develop/v2-conditional-access-dev-guide
-                     */
-                    if (response['error_codes'].includes(50076) || response['error_codes'].includes(50079)) {
-
-                        // stringified JSON claims challenge
-                        reject(response['claims']);
-
-                    /**
-                     * If the user has not consented to the required scopes, 
-                     * an AADSTS65001 error will be thrown.
-                     */
-                    } else if (response['error_codes'].includes(65001)) {
-                        reject();
-                    }
-                } else {
-                    resolve(response);
-                }
-            })
-        });
-}
+    const response = await fetch(apiEndpoint, options);
+    const responseJson = await response.json();
+    return responseJson;
+};