Merge pull request #204780 from salman90/updating-continuous-access-evaluation

Updated the continuous access evaluation docs to include JavaScript implementation

Author: LJSpiller

articles/active-directory/develop/app-resilience-continuous-access-evaluation.md

@@ -47,6 +47,8 @@ Your app would check for:
   - an "error" parameter with the value "insufficient_claims"
   - a "claims" parameter
 
+# [.NET](#tab/dotnet)
+
 When these conditions are met, the app can extract and decode the claims challenge using MSAL.NET `WwwAuthenticateParameters` class.
 
 ```csharp
@@ -97,7 +99,69 @@ _clientApp = PublicClientApplicationBuilder.Create(App.ClientId)
 
 You can test your application by signing in a user to the application then using the Azure portal to Revoke the user's sessions. The next time the app calls the CAE enabled API, the user will be asked to reauthenticate.
 
+# [JavaScript](#tab/JavaScript)
+
+When these conditions are met, the app can extract the claims challenge from the API response header as follows: 
+
+```javascript
+const authenticateHeader = response.headers.get('www-authenticate');
+const claimsChallenge = authenticateHeader
+        .split(' ')
+        .find((entry) => entry.includes('claims='))
+        .split('claims="')[1]
+        .split('",')[0];
+```
+
+Your app would then use the claims challenge to acquire a new access token for the resource.
+
+```javascript
+let tokenResponse;
+
+try {
+
+    tokenResponse = await msalInstance.acquireTokenSilent({
+                    claims: window.atob(claimsChallenge), // decode the base64 string
+                    scopes: scopes,  // e.g ['User.Read', 'Contacts.Read']
+                    account: account, // current active account
+                });
+
+} catch (error) {
+
+     if (error instanceof InteractionRequiredAuthError) {
+
+        tokenResponse = await msalInstance.acquireTokenPopup({
+                        claims: window.atob(claimsChallenge), // decode the base64 string
+                        scopes: scopes, // e.g ['User.Read', 'Contacts.Read']
+                        account: account, // current active account
+                    });
+    }
+
+}
+```
+
+Once your application is ready to handle the claim challenge returned by a CAE-enabled resource, you can tell Microsoft Identity your app is CAE-ready by adding a `clientCapabilities` property in the MSAL configuration.
+
+```javascript
+const msalConfig = {
+    auth: {
+        clientId: 'Enter_the_Application_Id_Here', 
+        clientCapabilities: ["CP1"]
+        // the remaining settings
+        // ... 
+    }
+}
+
+const msalInstance = new PublicClientApplication(msalConfig);
+
+```
+
+---
+
+You can test your application by signing in a user and then using the Azure portal to revoke the user's session. The next time the app calls the CAE-enabled API, the user will be asked to reauthenticate.
+
 ## Next steps
 
 - [Continuous access evaluation](../conditional-access/concept-continuous-access-evaluation.md) conceptual overview
 - [Claims challenges, claims requests, and client capabilities](claims-challenge.md)
+- [React single-page application using MSAL React to sign-in users against Azure Active Directory](https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/2-Authorization-I/1-call-graph)
+- [Enable your ASP.NET Core web app to sign in users and call Microsoft Graph with the Microsoft identity platform](https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2/tree/master/2-WebApp-graph-user/2-1-Call-MSGraph)

articles/active-directory/develop/claims-challenge.md

@@ -94,6 +94,8 @@ The following example claims parameter shows how a client application communicat
 Claims: {"access_token":{"xms_cc":{"values":["cp1"]}}}
 ```
 
+#### [.NET](#tab/dotnet)
+
 Those using MSAL library will use the following code:
 
 ```c#
@@ -115,6 +117,24 @@ Those using Microsoft.Identity.Web can add the following code to the configurati
     "ClientCapabilities": [ "cp1" ]
 },
 ```
+#### [JavaScript](#tab/JavaScript)
+
+Those using MSAL.js can add `clientCapabilities` property to the configuration object.
+
+```javascript
+const msalConfig = {
+    auth: {
+        clientId: 'Enter_the_Application_Id_Here', 
+        clientCapabilities: ["CP1"]
+        // the remaining settings
+        // ... 
+    }
+}
+
+const msalInstance = new msal.PublicClientApplication(msalConfig);
+```
+
+---
 
 An example of how the request to Azure AD will look like:
 
@@ -152,7 +172,7 @@ The **xms_cc** claim with a value of "cp1" in the access token is the authoritat
 
 The values are not case-sensitive and unordered. If more than one value is specified in the **xms_cc** claim request, those values will be a multi-valued collection as the value of the **xms_cc** claim.
 
-A request of :
+A request of:
 
 ```json
 { "access_token": { "xms_cc":{"values":["cp1","foo", "bar"] } }}
@@ -185,7 +205,7 @@ This is how the app's manifest looks like after the **xms_cc** [optional claim](
 
 The API can then customize their responses based on whether the client is capable of handling claims challenge or not.
 
-An example in C#
+### [.NET](#tab/dotnet)
 
 ```c#
 Claim ccClaim = context.User.FindAll(clientCapabilitiesClaim).FirstOrDefault(x => x.Type == "xms_cc");
@@ -200,8 +220,27 @@ else
 }
 ```
 
+### [JavaScript](#tab/JavaScript)
+
+```javascript
+const checkIsClientCapableOfClaimsChallenge = (req, res, next) => {
+    // req.authInfo contains the decoded access token payload
+    if (req.authInfo['xms_cc'] && req.authInfo['xms_cc'].includes('CP1')) {
+          // Return formatted claims challenge as this client understands this
+          
+    } else {
+            return res.status(403).json({ error: 'Client is not capable' });
+    }
+}
+
+```
+
+---
+
 ## Next steps
 
 - [Microsoft identity platform and OAuth 2.0 authorization code flow](v2-oauth2-auth-code-flow.md#request-an-authorization-code)
 - [How to use Continuous Access Evaluation enabled APIs in your applications](app-resilience-continuous-access-evaluation.md)
 - [Granular Conditional Access for sensitive data and actions](https://techcommunity.microsoft.com/t5/azure-active-directory-identity/granular-conditional-access-for-sensitive-data-and-actions/ba-p/1751775)
+- [React single-page application using MSAL React to sign-in users against Azure Active Directory](https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/2-Authorization-I/1-call-graph)
+- [Enable your ASP.NET Core web app to sign in users and call Microsoft Graph with the Microsoft identity platform](https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2/tree/master/2-WebApp-graph-user/2-1-Call-MSGraph)