add caching in SPA

Author: derisen

5-AccessControl/2-call-api-groups/API/TodoListAPI/Controllers/TodoListController.cs

@@ -1,13 +1,13 @@
-using Microsoft.AspNetCore.Authorization;
+using System.Collections.Generic;
+using System.Linq;
+using System.Security.Claims;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.Identity.Web;
 using Microsoft.Identity.Web.Resource;
-using System.Collections.Generic;
-using System.Linq;
-using System.Security.Claims;
-using System.Threading.Tasks;
 using TodoListAPI.Infrastructure;
 using TodoListAPI.Models;
 
@@ -172,7 +172,7 @@ private async void PopulateDefaultToDos(string _currentPrincipalId)
  /// <returns></returns>
  private ClaimsPrincipal GetCurrentClaimsPrincipal()
  {
- // Irrespective of whether a user signs in or not, the AspNet security middle-ware dehydrates the claims in the
+ // Irrespective of whether a user signs in or not, the AspNet security middleware dehydrates the claims in the
  // HttpContext.User.Claims collection
 
  if (_contextAccessor.HttpContext != null && _contextAccessor.HttpContext.User != null)

5-AccessControl/2-call-api-groups/API/TodoListAPI/Services/GraphHelper.cs

@@ -1,14 +1,14 @@
-using Microsoft.AspNetCore.Authentication.JwtBearer;
-using Microsoft.Extensions.Caching.Memory;
-using Microsoft.Extensions.DependencyInjection;
-using Microsoft.Graph;
-using System;
+using System;
 using System.Collections.Generic;
 using System.Diagnostics;
 using System.IdentityModel.Tokens.Jwt;
 using System.Linq;
 using System.Security.Claims;
 using System.Threading.Tasks;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+using Microsoft.Extensions.Caching.Memory;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Graph;
 
 namespace TodoListAPI.Utils
 {
@@ -35,12 +35,13 @@ public static async Task ProcessAnyGroupsOverage(TokenValidatedContext context)
 
  // ensure MemoryCache is available
  _memoryCache = context.HttpContext.RequestServices.GetService<IMemoryCache>();
+
  if (_memoryCache == null)
  {
  throw new ArgumentNullException("_memoryCache", "Memory cache is not available.");
  }
 
- // Checks if the incoming token contained a 'Group Overage' claim.
+ // Checks if the incoming token contains a 'Group Overage' claim.
  if (HasOverageOccurred(principal))
  {
  // Gets group values from cache if available.
@@ -71,7 +72,7 @@ public static async Task ProcessAnyGroupsOverage(TokenValidatedContext context)
  }
 
  // Here we add the groups in a cache variable so that calls to Graph can be minimized to fetch all the groups for a user.
- // IMPORTANT: Group list is cached for 1 hr by default, and thus Cached groups will miss any changes to a users group membership for this duration.
+ // IMPORTANT: Group list is cached for 1 hr by default, and thus cached groups will miss any changes to a users group membership for this duration.
  // For capturing real-time changes to a user's group membership, consider implementing MS Graph change notifications (https://learn.microsoft.com/graph/api/resources/webhooks)
  SaveUsersGroupsToCache(usergroups, principal);
  }
@@ -140,7 +141,7 @@ private static async Task<List<string>> ProcessUserGroupsForOverage(TokenValidat
  IUserMemberOfCollectionWithReferencesPage memberPage = new UserMemberOfCollectionWithReferencesPage();
  try
  {
- //Request to get groups and directory roles that the user is a direct member of.
+ // Request to get groups and directory roles that the user is a direct member of.
  memberPage = await graphClient.Me.MemberOf.Request().Select(select).GetAsync().ConfigureAwait(false);
  }
  catch (Exception graphEx)
@@ -179,7 +180,7 @@ private static async Task<List<string>> ProcessUserGroupsForOverage(TokenValidat
  }
  else
  {
- throw new ArgumentNullException("SecurityToken", "Group membership cannot be fetched if no tken has been provided.");
+ throw new ArgumentNullException("SecurityToken", "Group membership cannot be fetched if no token has been provided.");
  }
  }
  }
@@ -280,9 +281,8 @@ private static void SaveUsersGroupsToCache(List<string> usersGroups, ClaimsPrinc
 
  Debug.WriteLine($"Adding users groups for '{cacheKey}'.");
 
- // IMPORTANT: Group list is cached for 1 hr by default, and thus Cached groups will miss any changes to a users group membership for this duration.
+ // IMPORTANT: Group list is cached for 1 hr by default, and thus cached groups will miss any changes to a users group membership for this duration.
  // For capturing real-time changes to a user's group membership, consider implementing MS Graph change notifications (https://learn.microsoft.com/en-us/graph/api/resources/webhooks)
-
  var cacheEntryOptions = new MemoryCacheEntryOptions()
  .SetSlidingExpiration(TimeSpan.FromSeconds(60))
  .SetAbsoluteExpiration(TimeSpan.FromSeconds(3600))

5-AccessControl/2-call-api-groups/API/TodoListAPI/Startup.cs

@@ -1,3 +1,7 @@
+using System;
+using System.IdentityModel.Tokens.Jwt;
+using System.Linq;
+using System.Threading.Tasks;
 using Microsoft.AspNetCore.Authentication.JwtBearer;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
@@ -7,10 +11,6 @@
 using Microsoft.Extensions.Hosting;
 using Microsoft.Identity.Web;
 using Microsoft.IdentityModel.Logging;
-using System;
-using System.IdentityModel.Tokens.Jwt;
-using System.Linq;
-using System.Threading.Tasks;
 using TodoListAPI.Infrastructure;
 using TodoListAPI.Models;
 using TodoListAPI.Utils;
@@ -101,19 +101,8 @@ public void ConfigureServices(IServiceCollection services)
  services.AddControllers();
  services.AddHttpContextAccessor();
 
- //Added for session state
- //services.AddDistributedMemoryCache();
-
- //services.AddScoped<IGraphHelper, GraphHelper>();
- //services.AddScoped(typeof(ICollectionProcessor<>), typeof(CollectionProcessor<>));
-
- //services.AddSession(options =>
- //{
- // options.IdleTimeout = TimeSpan.FromMinutes(10);
- //});
-
  // The following flag can be used to get more descriptive errors in development environments
- // Enable diagnostic logging to help with troubleshooting.  For more details, see https://aka.ms/IdentityModel/PII.
+ // Enable diagnostic logging to help with troubleshooting. For more details, see https://aka.ms/IdentityModel/PII.
  // You might not want to keep this following flag on for production
  IdentityModelEventSource.ShowPII = true;
 
@@ -150,7 +139,6 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  app.UseCors("default");
  app.UseHttpsRedirection();
  app.UseRouting();
- //app.UseSession();
  app.UseAuthentication();
  app.UseAuthorization();
  app.UseEndpoints(endpoints =>

5-AccessControl/2-call-api-groups/README.md

@@ -406,7 +406,7 @@ When attending to overage scenarios, which requires a call to [Microsoft Graph](
 
 ##### Angular GroupGuard service
 
-Consider the [group.guard.ts](./SPA/src/app/group.guard.ts). Here, we are checking whether the token for the user's ID token has the `_claim_names` claim, which indicates that the user has too many group memberships. If so, we redirect the user to the [overage](./SPA/src/app/overage/overage.component.ts) component. There, we initiate a call to MS Graph API's `https://graph.microsoft.com/v1.0/me/memberOf` endpoint to query the full list of groups that the user belongs to. Finally we check for the designated `groupID` among this list.
+Consider the [group.guard.ts](./SPA/src/app/group.guard.ts). Here, we are checking whether the token for the user's ID token has the `_claim_names` claim, which indicates that the user has too many group memberships. If so, we redirect the user to the [overage](./SPA/src/app/overage/overage.component.ts) component. There, we initiate a call to MS Graph API's `https://graph.microsoft.com/v1.0/me/memberOf` endpoint to query the required list of groups that the user belongs to. Finally we check for the designated `groupID` among this list.
 
 ```typescript
 @Injectable()
@@ -423,7 +423,7 @@ export class GroupGuard extends BaseGuard {
  super(msalGuardConfig, msalBroadcastService, authService, location, router);
  }
 
- override activateHelper(state?: RouterStateSnapshot, route?: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {
+override activateHelper(state?: RouterStateSnapshot, route?: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {
  let result = super.activateHelper(state, route);
 
  const expectedGroups: string[] = route ? route.data['expectedGroups'] : [];
@@ -436,20 +436,25 @@ export class GroupGuard extends BaseGuard {
  activeAccount = this.authService.instance.getAllAccounts()[0] as AccountWithGroupClaims;
  }
 
- if (!activeAccount?.idTokenClaims?.groups && this.graphService.getUser().groupIDs.length === 0) {
- if (activeAccount.idTokenClaims?._claim_names) {
- window.alert('You have too many group memberships. The application will now query Microsoft Graph to get the full list of groups that you are a member of.');
+ // check either the ID token or a non-expired storage entry for the groups membership claim
+ if (!activeAccount?.idTokenClaims?.groups && !checkGroupsInStorage(activeAccount)) {
+
+ if (activeAccount.idTokenClaims?._claim_names && activeAccount.idTokenClaims?._claim_names.groups) {
+ window.alert('You have too many group memberships. The application will now query Microsoft Graph to check if you are a member of any of the groups required.');
  return this.router.navigate(['/overage']);
  }
 
  window.alert('Token does not have groups claim. Please ensure that your account is assigned to a security group and then sign-out and sign-in again.');
  return of(false);
  }
 
+ /**
+ * If an overage scenario occurs, the ID token will not have a groups claim. Instead, after
+ * the overage is handled, the user object in the graphService will have the relevant group IDs.
+ * If you like, you may want to cache the group IDs in sessionStorage as an alternative.
+ */
  const hasRequiredGroup = expectedGroups.some((group: string) =>
- activeAccount?.idTokenClaims?.groups?.includes(group) 
- ||
- this.graphService.getUser().groupIDs.includes(group)
+ activeAccount?.idTokenClaims?.groups?.includes(group) || getGroupsFromStorage(activeAccount)?.includes(group)
  );
 
  if (!hasRequiredGroup) {
@@ -509,7 +514,7 @@ const routes: Routes = [
 
 #### .NET Core web API and how to handle the overage scenario
 
-1. In [Startup.cs](./API/TodoListAPI/Startup.cs), `OnTokenValidated` event calls **GetSignedInUsersGroups** method defined in *GraphHelper.cs* to process groups overage claim.
+1. In [Startup.cs](./API/TodoListAPI/Startup.cs), `OnTokenValidated` event calls **GetSignedInUsersGroups** method defined in [GraphHelper.cs](./API//TodoListAPI/Services/GraphHelper.cs) to process groups overage claim.
 
 ```csharp
  services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)

5-AccessControl/2-call-api-groups/SPA/package-lock.json

@@ -31,6 +31,7 @@
  "@angular-devkit/build-angular": "^14.1.0",
  "@angular/cli": "~14.0.5",
  "@angular/compiler-cli": "^14.0.0",
+ "@microsoft/microsoft-graph-types": "^2.25.0",
  "@types/jasmine": "~4.0.0",
  "jasmine-core": "~4.1.0",
  "karma": "~6.3.0",

5-AccessControl/2-call-api-groups/SPA/package.json

@@ -4,6 +4,8 @@ import { AuthenticationResult, EventMessage, EventType, InteractionStatus, Inter
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
+import { clearGroupsInStorage } from './utils/storage-utils';
+
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
@@ -28,8 +30,8 @@ export class AppComponent implements OnInit, OnDestroy {
  this.authService.instance.enableAccountStorageEvents(); // Optional - This will enable ACCOUNT_ADDED and ACCOUNT_REMOVED events emitted when a user logs in or out of another tab or window
 
  /**
- * You can subscribe to MSAL events as shown below. For more info,
- * visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/events.md
+ * You can subscribe to MSAL events as shown below. For more information, visit:
+ * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/events.md
  */
 
  this.msalBroadcastService.msalSubject$
@@ -97,7 +99,18 @@ export class AppComponent implements OnInit, OnDestroy {
  }
 
  logout() {
- this.authService.logout();
+ const activeAccount = this.authService.instance.getActiveAccount() || this.authService.instance.getAllAccounts()[0];
+ clearGroupsInStorage(activeAccount); // make sure to remove groups from storage
+
+ if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
+ this.authService.logoutPopup({
+ account: activeAccount
+ });
+ } else {
+ this.authService.logoutRedirect({
+ account: activeAccount
+ });
+ }
  }
 
  // unsubscribe to events when component is destroyed

5-AccessControl/2-call-api-groups/SPA/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { TodoService } from './../todo.service';
-import { Todo } from '../todo';
+import { Todo } from '../todo.service';
 
 @Component({
  selector: 'app-dashboard',

5-AccessControl/2-call-api-groups/SPA/src/app/dashboard/dashboard.component.ts

@@ -3,20 +3,15 @@ import { Injectable } from '@angular/core';
 import { AuthenticationResult, InteractionRequiredAuthError } from '@azure/msal-browser';
 import { MsalService } from '@azure/msal-angular';
 import { Client, PageCollection, PageIterator, PageIteratorCallback } from '@microsoft/microsoft-graph-client';
+import { DirectoryObject } from '@microsoft/microsoft-graph-types';
 
-import { User } from './user';
 import { protectedResources } from './auth-config';
 
 @Injectable({
  providedIn: 'root'
 })
 export class GraphService {
 
- private user: User = {
- displayName: "",
- groupIDs: [],
- };
-
  constructor(private authService: MsalService) { }
 
  private getGraphClient(accessToken: string) {
@@ -33,15 +28,17 @@ export class GraphService {
 
  private async getToken(scopes: string[]): Promise<string> {
  let authResponse: AuthenticationResult | null = null;
- 
+
  try {
  authResponse = await this.authService.instance.acquireTokenSilent({
  account: this.authService.instance.getActiveAccount()!,
  scopes: scopes,
  });
- 
+
  } catch (error) {
  if (error instanceof InteractionRequiredAuthError) {
+ // TODO: get default interaction type from auth config
+
  authResponse = await this.authService.instance.acquireTokenPopup({
  scopes: protectedResources.apiGraph.scopes,
  });
@@ -53,43 +50,38 @@ export class GraphService {
  return authResponse ? authResponse.accessToken : "";
  }
 
- getUser(): User {
- return this.user;
- };
-
- setGroups(groups: any): void {
- this.user.groupIDs = groups;
- };
-
- async getGroups(): Promise<string[]> {
- const allGroups: string[] = [];
+ async getFilteredGroups(filterGroups: string[] = []): Promise<string[]> {
+ const groups: string[] = [];
 
  try {
  const accessToken = await this.getToken(protectedResources.apiGraph.scopes);
 
  // Get a graph client instance for the given access token
  const graphClient = this.getGraphClient(accessToken);
 
- // Makes request to fetch mails list. Which is expected to have multiple pages of data.
- let response: PageCollection = await graphClient.api(protectedResources.apiGraph.endpoint).get();
+ const selectQuery = "id,displayName,onPremisesNetBiosName,onPremisesDomainName,onPremisesSamAccountNameonPremisesSecurityIdentifier";
 
+ // Makes request to fetch groups list, which is expected to have multiple pages of data.
+ let response: PageCollection = await graphClient.api(protectedResources.apiGraph.endpoint).select(selectQuery).get();
+
  // A callback function to be called for every item in the collection. This call back should return boolean indicating whether not to continue the iteration process.
- let callback: PageIteratorCallback = (data) => {
- allGroups.push(data.id); // Add the group id to the groups array
+ let callback: PageIteratorCallback = (data: DirectoryObject) => {
+ if (data.id && filterGroups.includes(data.id)) groups.push(data.id); // Add the group id to the groups array
+ if (filterGroups.filter(x => !groups.includes(x)).length === 0) return false; // Stop iterating if all the required groups are found
  return true;
  };
- 
+
  // Creating a new page iterator instance with client a graph client instance, page collection response from request and callback
  let pageIterator = new PageIterator(graphClient, response, callback);
- 
+
  // This iterates the collection until the nextLink is drained out.
  await pageIterator.iterate();
 
- return allGroups;
+ return groups;
  } catch (error) {
  console.log(error);
  }
 
- return allGroups;
+ return groups;
  }
 }