update schema

Author: derisen

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

@@ -46,7 +46,7 @@ Here you'll learn about [Access Tokens](https://docs.microsoft.com/azure/active-
 | `src/app/auth-config.ts` | Authentication parameters reside here. |
 | `src/app/app.module.ts` | MSAL-Angular configuration parameters reside here. |
 | `src/app/app-routing.module.ts` | Configure your MSAL-Guard here. |
-| `src/app/graph.service.ts` | class to call graph API. |
+| `src/app/graph.service.ts` | Class to call graph API. |
 
 ## Prerequisites
 
@@ -131,13 +131,11 @@ To manually register the apps, as a first step you'll need to:
 1. Since this app signs-in users, we will now proceed to select **delegated permissions**, which is is required by apps signing-in users.
  1. In the app's registration screen, select the **API permissions** blade in the left to open the page where we add access to the APIs that your application needs:
  1. Select the **Add a permission** button and then:
-
  1. Ensure that the **Microsoft APIs** tab is selected.
  1. In the *Commonly used Microsoft APIs* section, select **Microsoft Graph**
  1. In the **Delegated permissions** section, select the **User.Read** in the list. Use the search box if necessary.
  1. Select the **Add permissions** button at the bottom.
  1. Select the **Add a permission** button and then:
-
  1. Ensure that the **Microsoft APIs** tab is selected.
  1. In the list of APIs, select the API `Windows Azure Service Management API`.
  1. In the **Delegated permissions** section, select the **user_impersonation** in the list. Use the search box if necessary.

2-Authorization-I/1-call-graph/SPA/src/app/app.component.ts

@@ -1,9 +1,11 @@
 import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
-import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
-import { AuthenticationResult, InteractionStatus, InteractionType, PopupRequest, RedirectRequest } from '@azure/msal-browser';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
-import { clearStorage } from "./util/storage.utils";
+
+import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
+import { AuthenticationResult, InteractionStatus, InteractionType, PopupRequest, RedirectRequest } from '@azure/msal-browser';
+
+import { clearStorage } from "./utils/storageUtils";
 
 @Component({
  selector: 'app-root',

2-Authorization-I/1-call-graph/SPA/src/app/app.module.ts

@@ -20,7 +20,7 @@ import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfig
 
 import { msalConfig, loginRequest, protectedResources } from './auth-config';
 
-import { getClaimsFromStorage, getStorageSchema } from './util/storage.utils';
+import { getClaimsFromStorage } from './utils/storageUtils';
 
 /**
  * Here we pass the configuration parameters to create an MSAL instance.
@@ -38,33 +38,24 @@ export function MSALInstanceFactory(): IPublicClientApplication {
  */
 export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
- 
- protectedResourceMap.set(
- protectedResources.graphMe.endpoint,
- protectedResources.graphMe.scopes,
- );
+
+ protectedResourceMap.set(protectedResources.graphMe.endpoint, protectedResources.graphMe.scopes);
  protectedResourceMap.set(protectedResources.armTenants.endpoint, protectedResources.armTenants.scopes);
 
  return {
  interactionType: InteractionType.Redirect,
  protectedResourceMap,
  authRequest: (msalService, httpReq, originalAuthRequest) => {
- const resource = getStorageSchema(httpReq.url);
- let claim =
-   msalService.instance.getActiveAccount()! &&
+ const resource = new URL(httpReq.url).hostname;
+
+ let claim = msalService.instance.getActiveAccount()! &&
  getClaimsFromStorage(
- `cc.${msalConfig.auth.clientId}.${
- msalService.instance.getActiveAccount()?.idTokenClaims?.oid
- }.${resource}`
- )
- ? window.atob(
- getClaimsFromStorage(
- `cc.${msalConfig.auth.clientId}.${
- msalService.instance.getActiveAccount()?.idTokenClaims?.oid
- }.${resource}`
- )
- )
- : '';
+ `cc.${msalConfig.auth.clientId}.${msalService.instance.getActiveAccount()?.idTokenClaims?.oid}.${resource}`
+ ) ? window.atob(
+ getClaimsFromStorage(
+ `cc.${msalConfig.auth.clientId}.${msalService.instance.getActiveAccount()?.idTokenClaims?.oid}.${resource}`
+ ))
+ : undefined;
  return {
  ...originalAuthRequest,
  claims: claim,
@@ -78,7 +69,7 @@ export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  * additional scopes you want the user to consent upon login, add them here as well.
  */
 export function MSALGuardConfigFactory(): MsalGuardConfiguration {
- return { 
+ return {
  interactionType: InteractionType.Redirect,
  authRequest: loginRequest
  };

2-Authorization-I/1-call-graph/SPA/src/app/auth-config.ts

@@ -44,12 +44,10 @@ export const protectedResources = {
  graphMe: {
  endpoint: 'https://graph.microsoft.com/v1.0/me',
  scopes: ['User.Read'],
- resource: 'graph'
  },
  armTenants: {
  endpoint: 'https://management.azure.com/tenants',
  scopes: ['https://management.azure.com/user_impersonation'],
- resource: 'management.azure'
  },
 };
 

2-Authorization-I/1-call-graph/SPA/src/app/graph.service.ts

@@ -3,13 +3,14 @@ import { MsalService } from '@azure/msal-angular';
 import { HttpClient } from '@angular/common/http';
 
 import { protectedResources, msalConfig } from './auth-config';
-import { addClaimsToStorage, getClaimsFromStorage } from './util/storage.utils';
+import { addClaimsToStorage, getClaimsFromStorage } from './utils/storageUtils';
+import { AccountInfo } from '@azure/msal-browser';
 
 @Injectable({
  providedIn: 'root',
 })
 export class GraphService {
- constructor(private authService: MsalService, private http: HttpClient) {}
+ constructor(private authService: MsalService, private http: HttpClient) { }
 
  /**
  * Makes a GET request using authorization header For more, visit:
@@ -25,7 +26,9 @@ export class GraphService {
  },
  (error: any) => {
  if (error.status === 401) {
- this.handleClaimsChallenge(error);
+ if (error.headers.get('www-authenticate')) {
+ this.handleClaimsChallenge(error, endpoint);
+ }
  }
  reject(error);
  }
@@ -39,48 +42,43 @@ export class GraphService {
  * For more information, visit: https://docs.microsoft.com/en-us/azure/active-directory/develop/claims-challenge#claims-challenge-header-format
  * @param response
  */
- handleClaimsChallenge(response: any): void {
- if (response.headers.get('www-authenticate')) {
- const authenticateHeader: string =
- response.headers.get('www-authenticate');
+ handleClaimsChallenge(response: any, endpoint: string): void {
+ const authenticateHeader: string = response.headers.get('www-authenticate');
+
  const claimsChallenge: any = authenticateHeader
  ?.split(' ')
  ?.find((entry) => entry.includes('claims='))
  ?.split('claims="')[1]
  ?.split('",')[0];
- let account: any = this.authService.instance.getActiveAccount();
+
+ let account: AccountInfo = this.authService.instance.getActiveAccount()!;
+
  addClaimsToStorage(
  claimsChallenge,
- `cc.${msalConfig.auth.clientId}.${account?.idTokenClaims?.oid}.${protectedResources.graphMe.resource}`
+ `cc.${msalConfig.auth.clientId}.${account?.idTokenClaims?.oid}.${new URL(endpoint).hostname}`
  );
 
- this.getAccessTokenInteractively();
- }
+ this.getAccessTokenInteractively(endpoint);
  }
 
  /**
  * This method fetches a new access token interactively
  */
- getAccessTokenInteractively(): void {
+ getAccessTokenInteractively(endpoint: string): void {
  this.authService.instance.acquireTokenRedirect({
  account: this.authService.instance.getActiveAccount()!,
- scopes: protectedResources.graphMe.scopes,
- claims:
- this.authService.instance.getActiveAccount()! &&
+ scopes: Object.values(protectedResources).find((resource: { endpoint: string, scopes: string[]}) => resource.endpoint === endpoint)?.scopes || [],
+ claims: this.authService.instance.getActiveAccount()! &&
  getClaimsFromStorage(
- `cc.${msalConfig.auth.clientId}.${
- this.authService.instance.getActiveAccount()?.idTokenClaims?.oid
- }.${protectedResources.graphMe.resource}`
+ `cc.${msalConfig.auth.clientId}.${this.authService.instance.getActiveAccount()?.idTokenClaims?.oid
+ }.${new URL(endpoint).hostname}`
+ ) ? 
+ window.atob(
+ getClaimsFromStorage(
+ `cc.${msalConfig.auth.clientId}.${this.authService.instance.getActiveAccount()?.idTokenClaims?.oid}.${new URL(endpoint).hostname}`
+ )
  )
- ? window.atob(
- getClaimsFromStorage(
- `cc.${msalConfig.auth.clientId}.${
- this.authService.instance.getActiveAccount()?.idTokenClaims
- ?.oid
- }.${protectedResources.graphMe.resource}`
- )
- )
- : '',
+ : undefined,
  });
  }
 }

2-Authorization-I/1-call-graph/SPA/src/app/home/home.component.ts

@@ -14,7 +14,7 @@ export class HomeComponent implements OnInit {
 
  loginDisplay = false;
  displayedColumns: string[] = ['claim', 'value'];
- dataSource: any =[];
+ dataSource: any = [];
 
  private readonly _destroying$ = new Subject<void>();
 
@@ -32,7 +32,7 @@ export class HomeComponent implements OnInit {
  this.authService.instance.setActiveAccount(payload.account);
  });
 
-  this.msalBroadcastService.inProgress$
+ this.msalBroadcastService.inProgress$
  .pipe(
  filter((status: InteractionStatus) => status === InteractionStatus.None)
  )
@@ -64,9 +64,9 @@ export class HomeComponent implements OnInit {
 
  getClaims(claims: any) {
  this.dataSource = [
- {id: 1, claim: "Display Name", value: claims ? claims['name'] : null},
- {id: 2, claim: "User Principal Name (UPN)", value: claims ? claims['preferred_username'] : null},
- {id: 2, claim: "OID", value: claims ? claims['oid']: null}
+ { id: 1, claim: "Display Name", value: claims ? claims['name'] : null },
+ { id: 2, claim: "User Principal Name (UPN)", value: claims ? claims['preferred_username'] : null },
+ { id: 2, claim: "OID", value: claims ? claims['oid'] : null }
  ];
  }
 

2-Authorization-I/1-call-graph/SPA/src/app/profile.ts

@@ -0,0 +1,13 @@
+export type Profile = {
+ id?: string,
+ userPrincipalName?: string,
+ businessPhones?: Array<string>,
+ displayName?: string,
+ givenName?: string,
+ jobTitle?: string,
+ mail?: string,
+ mobilePhone?: string,
+ officeLocation?: string,
+ preferredLanguage?: string,
+ surname?: string
+};

2-Authorization-I/1-call-graph/SPA/src/app/profile/profile.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { protectedResources } from '../auth-config';
 import { GraphService } from '../graph.service';
+import { Profile } from '../profile';
 
 @Component({
  selector: 'app-profile',
@@ -13,39 +14,37 @@ export class ProfileComponent implements OnInit {
 
  constructor(
  private graphService: GraphService,
- ) {}
+ ) { }
 
  ngOnInit() {
  this.graphService
  .getData(protectedResources.graphMe.endpoint)
- .then((profileResponse: any) => {
+ .then((profileResponse: Profile) => {
  this.dataSource = [
  {
  id: 1,
  claim: 'Name',
- value: profileResponse ? profileResponse['givenName'] : null,
+ value: profileResponse ? profileResponse.givenName : null,
  },
  {
  id: 2,
  claim: 'Surname',
- value: profileResponse ? profileResponse['surname'] : null,
+ value: profileResponse ? profileResponse.surname : null,
  },
  {
  id: 3,
  claim: 'User Principal Name (UPN)',
- value: profileResponse
- ? profileResponse['userPrincipalName']
- : null,
+ value: profileResponse ? profileResponse.userPrincipalName : null,
  },
  {
  id: 4,
  claim: 'ID',
- value: profileResponse ? profileResponse['id'] : null,
+ value: profileResponse ? profileResponse.id : null,
  },
  ];
  })
  .catch((error) => {
  console.log(error);
- }); 
+ });
  }
 }

2-Authorization-I/1-call-graph/SPA/src/app/tenant/tenant.component.ts

@@ -10,7 +10,7 @@ import { protectedResources } from '../auth-config';
 export class TenantComponent implements OnInit {
 
  displayedColumns: string[] = ['claim', 'value'];
- dataSource: any =[];
+ dataSource: any = [];
 
  constructor(
  private http: HttpClient
@@ -24,10 +24,10 @@ export class TenantComponent implements OnInit {
  this.http.get(protectedResources.armTenants.endpoint + '?api-version=2020-01-01')
  .subscribe((tenant: any) => {
  this.dataSource = [
- {id: 1, claim: "Display Name", value: tenant ? tenant.value[0]['displayName'] : null},
- {id: 2, claim: "Default Domain", value: tenant ? tenant.value[0]['defaultDomain'] : null},
- {id: 3, claim: "Tenant Id", value: tenant ? tenant.value[0]['tenantId'] : null},
- {id: 3, claim: "Tenant Type", value: tenant ? tenant.value[0]['tenantType'] : null},
+ { id: 1, claim: "Display Name", value: tenant ? tenant.value[0]['displayName'] : null },
+ { id: 2, claim: "Default Domain", value: tenant ? tenant.value[0]['defaultDomain'] : null },
+ { id: 3, claim: "Tenant Id", value: tenant ? tenant.value[0]['tenantId'] : null },
+ { id: 3, claim: "Tenant Type", value: tenant ? tenant.value[0]['tenantType'] : null },
  ];
  });
  }