review changes

Author: derisen

5-AccessControl/1-call-api-roles/AppCreationScripts/Configure.ps1

@@ -193,6 +193,11 @@ Function ConfigureApplications
  New-MgApplicationOwnerByRef -ApplicationId $clientAadApplication.Id -BodyParameter = @{"@odata.id" = "htps://graph.microsoft.com/v1.0/directoryObjects/$user.ObjectId"}
  Write-Host "'$($user.UserPrincipalName)' added as an application owner to app '$($clientServicePrincipal.DisplayName)'"
  }
+
+ # Add optional claims
+ $newClaim = CreateOptionalClaim -name "acct" 
+ $optionalClaims.AccessToken += ($newClaim)
+ Update-MgApplication -ApplicationId $serviceAadApplication.Id -OptionalClaims $optionalClaims
 
  # Add application Roles
  $appRoles = New-Object System.Collections.Generic.List[Microsoft.Graph.PowerShell.Models.MicrosoftGraphAppRole]

5-AccessControl/1-call-api-roles/AppCreationScripts/sample.json

@@ -8,7 +8,8 @@
  "Endpoint": "AAD v2.0",
  "Languages": [
  "typescript",
- "csharp"
+ "csharp",
+ "javascript"
  ],
  "Description": "Angular single-page application calling a protected web API using App Roles to implement Role-Based Access Control",
  "products": [

5-AccessControl/1-call-api-roles/README.md

@@ -5,6 +5,7 @@ services: ms-identity
 languages:
  - typescript
  - csharp
+ - javascript
 products:
  - azure-active-directory
  - msal-js
@@ -31,10 +32,14 @@ description: Angular single-page application calling a protected web API using A
 
 This sample demonstrates a cross-platform application suite involving an Angular single-page application (*TodoListSPA*) calling an ASP.NET Core web API (*TodoListAPI*) secured with the Microsoft identity platform. In doing so, it implements **Role-based Access Control** (RBAC) by using Azure AD **App Roles**.
 
-Access control in Azure AD can be done with **Security Groups** as well, as we will cover in the [next tutorial](../2-call-api-groups/README.md). **Security Groups** and **App Roles** in Azure AD are by no means mutually exclusive - they can be used in tandem to provide even finer grained access control.
+Role based access control in Azure AD can be done with **Delegated** and **App** permissions and **Security Groups** as well. we will cover RBAC using Security Groups in the [next tutorial](../2-call-api-groups/README.md). **Delegated** and **App** permissions, **Security Groups** and **App Roles** in Azure AD are by no means mutually exclusive - they can be used in tandem to provide even finer grained access control.
 
 In the sample, a **dashboard** component allows signed-in users to see the tasks assigned to users and is only accessible by users under an **app role** named **TaskAdmin**.
 
+> :information_source: See the community call: [Implement authorization in your applications with the Microsoft identity platform](https://www.youtube.com/watch?v=LRoc-na27l0)
+
+> :information_source: See the community call: [Deep dive on using MSAL.js to integrate Angular single-page applications with Azure Active Directory](https://www.youtube.com/watch?v=EJey9KP1dZA)
+
 ## Scenario
 
 - The **TodoListSPA** uses [MSAL Angular](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular) to authenticate a user with the Microsoft identity platform.
@@ -165,10 +170,10 @@ To manually register the apps, as a first step you'll need to:
 1. Select **Add a scope** button open the **Add a scope** screen and Enter the values as indicated below:
  1. For **Scope name**, use `access_as_user`.
  1. Select **Admins and users** options for **Who can consent?**.
- 1. For **Admin consent display name** type in the details, `e.g. Allow the users of the app msal-angular-app to read ToDo list items`.
- 1. For **Admin consent description** type in the details `e.g. Allows the app msal-angular-app to read the signed-in users ToDo list items.`
- 1. For **User consent display name** type in the details `e.g. Read Todolist items as yourself`.
- 1. For **User consent description** type in the details `e.g. Allow the app msal-angular-app to read Todolist items on your behalf.`
+ 1. For **Admin consent display name** type in *Access 'msal-angular-app' as the signed-in user.*.
+ 1. For **Admin consent description** type in *Allow the app to access the 'msal-angular-app' as a signed-in user.*.
+ 1. For **User consent display name** type in *Access 'msal-angular-app' on your behalf.*.
+ 1. For **User consent description** type in *Allow the app to access the 'msal-angular-app' on your behalf.*.
  1. Keep **State** as **Enabled**.
  1. Select the **Add scope** button on the bottom to save this scope.
 1. Select the **Manifest** blade on the left.
@@ -207,15 +212,24 @@ To add users to this app role, follow the guidelines here: [Assign users and gro
 
 For more information, see: [How to: Add app roles in your application and receive them in the token](https://docs.microsoft.com/azure/active-directory/develop/howto-add-app-roles-in-azure-ad-apps)
 
-##### Configure the app (msal-angular-app) to use your app registration
+##### (Optional) Configure Optional Claims
+
+1. Still on the same app registration, select the **Token configuration** blade to the left.
+1. Select **Add optional claim**:
+ 1. Select **optional claim type**, then choose **Access**.
+ 1. Select the optional claim **acct**. 
+ > Provides user's account status in tenant. If the user is a member of the tenant, the value is 0. If they're a guest, the value is 1.
+ 1. Select **Add** to save your changes.
+
+##### Configure the client app (msal-angular-app) to use your app registration
 
 Open the project in your IDE (like Visual Studio or Visual Studio Code) to configure the code.
 
 > In the steps below, "ClientID" is the same as "Application ID" or "AppId".
 
 1. Open the `API\TodoListAPI\appsettings.json` file.
-1. Find the key `Enter the domain of your Azure AD tenant, e.g. contoso.onmicrosoft.com` and replace the existing value with your Azure AD tenant name.
-1. Find the key `Enter the ID of your Azure AD tenant copied from the Azure portal` and replace the existing value with your Azure AD tenant ID.
+1. Find the key `Enter the domain of your Azure AD tenant, e.g. contoso.onmicrosoft.com` and replace the existing value with your Azure AD tenant domain, ex. `contoso.onmicrosoft.com`.
+1. Find the key `Enter the ID of your Azure AD tenant copied from the Azure portal` and replace the existing value with your Azure AD tenant/directory ID.
 1. Find the key `Enter the application ID (clientId) of the 'TodoListAPI' application copied from the Azure portal` and replace the existing value with the application ID (clientId) of `msal-angular-app` app copied from the Azure portal.
 
 1. Open the `SPA\src\app\auth-config.ts` file.
@@ -282,41 +296,61 @@ To provide feedback on or suggest features for Azure Active Directory, visit [Us
 
 ### Angular RoleGuard and protected routes for role-based access control
 
-The client application Angular SPA has a **RoleGuard** (`role.guard.ts`) component that checks whether a user has the right privileges to access a protected route. It does this by checking `roles` claim the ID token of the signed-in user:
+The client application Angular SPA has a [role.guard.ts](./SPA/src/app/role.guard.ts) component that checks whether a user has the right privileges to access a protected route. It does this by checking `roles` claim the ID token of the signed-in user:
 
 ```typescript
-export class RoleGuard implements CanActivate {
+@Injectable()
+export class RoleGuard extends BaseGuard {
+
+ constructor(
+ @Inject(MSAL_GUARD_CONFIG) protected override msalGuardConfig: MsalGuardConfiguration,
+ protected override msalBroadcastService: MsalBroadcastService,
+ protected override authService: MsalService,
+ protected override location: Location,
+ protected override router: Router
+ ) {
+ super(msalGuardConfig, msalBroadcastService, authService, location, router);
+ }
+
+ override activateHelper(state?: RouterStateSnapshot, route?: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {
+ let result = super.activateHelper(state, route);
 
- constructor(private authService: MsalService) { }
+ const expectedRoles: string[] = route ? route.data['expectedRoles'] : [];
 
- canActivate(route: ActivatedRouteSnapshot): boolean {
-  const expectedRoles: string[] = route.data['expectedRoles'];
- let account: AccountInfo = this.authService.instance.getActiveAccount()!;
+ return result.pipe(
+ concatMap(() => {
+ let activeAccount = this.authService.instance.getActiveAccount();
 
- if (!account.idTokenClaims?.roles) {
+ if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
+ activeAccount = this.authService.instance.getAllAccounts()[0];
+ }
+
+ if (!activeAccount?.idTokenClaims?.roles) {
  window.alert('Token does not have roles claim. Please ensure that your account is assigned to an app role and then sign-out and sign-in again.');
- return false;
+ return of(false);
  }
 
- if (!expectedRoles.includes(account.idTokenClaims.roles[0])) {
+ const hasRequiredRole = expectedRoles.some((role: string) => activeAccount?.idTokenClaims?.roles?.includes(role));
+
+ if (!hasRequiredRole) {
  window.alert('You do not have access as the expected role is not found. Please ensure that your account is assigned to an app role and then sign-out and sign-in again.');
- return false;
  }
 
- return true;
- }
+ return of(hasRequiredRole);
+ })
+ );
+ }
 }
 ```
 
-We then enable **RoleGuard** in `app-routing.module.ts` as follows:
+We then enable **RoleGuard** in [app-routing.module.ts](./SPA/src/app/app-routing.module.ts) as follows:
 
 ```typescript
 const routes: Routes = [
  {
  path: 'todo-edit/:id',
  component: TodoEditComponent,
  canActivate: [
- MsalGuard,
  RoleGuard
  ],
  data: {
@@ -327,7 +361,6 @@ const routes: Routes = [
  path: 'todo-view',
  component: TodoViewComponent,
  canActivate: [
- MsalGuard,
  RoleGuard
  ],
  data: {
@@ -338,7 +371,6 @@ const routes: Routes = [
  path: 'dashboard',
  component: DashboardComponent,
  canActivate: [
- MsalGuard,
  RoleGuard,
  ],
  data: {
@@ -395,7 +427,7 @@ Finally, in `TodoListController.cs`, we decorate our routes with the appropriate
  // GET: api/todolist/getAll
  [HttpGet]
  [Route("getAll")]
- [RequiredScope(RequiredScopesConfigurationKey = "AzureAd:Scopes:Read")]
+ [RequiredScope(RequiredScopesConfigurationKey = "AzureAd:Scopes")]
  [Authorize(Policy = AuthorizationPolicies.AssignmentToTaskAdminRoleRequired)]
  public async Task<ActionResult<IEnumerable<TodoItem>>> GetAll()
  {
@@ -404,7 +436,7 @@ Finally, in `TodoListController.cs`, we decorate our routes with the appropriate
 
  // GET: api/TodoItems
  [HttpGet]
- [RequiredScope(RequiredScopesConfigurationKey = "AzureAd:Scopes:Read")]
+ [RequiredScope(RequiredScopesConfigurationKey = "AzureAd:Scopes")]
  [Authorize(Policy = AuthorizationPolicies.AssignmentToTaskUserRoleRequired)]
  public async Task<ActionResult<IEnumerable<TodoItem>>> GetTodoItems()
  {
@@ -435,4 +467,4 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope
 * [Building Zero Trust ready apps](https://aka.ms/ztdevsession)
 * [National Clouds](https://docs.microsoft.com/azure/active-directory/develop/authentication-national-cloud#app-registration-endpoints)
 * [Azure AD code samples](https://docs.microsoft.com/azure/active-directory/develop/sample-v2-code)
-* [Microsoft.Identity.Web](https://aka.ms/microsoft-identity-web)
+* [Microsoft.Identity.Web](https://aka.ms/microsoft-identity-web)

5-AccessControl/1-call-api-roles/SPA/src/app/base.guard.ts

@@ -13,7 +13,7 @@ import { MsalBroadcastService, MsalGuardConfiguration, MSAL_GUARD_CONFIG, MsalSe
 import { InteractionType, BrowserConfigurationAuthError, BrowserUtils, UrlString, PopupRequest, RedirectRequest, AuthenticationResult } from "@azure/msal-browser";
 
 @Injectable()
-export class MsalGuard implements CanActivate, CanActivateChild, CanLoad {
+export class BaseGuard implements CanActivate, CanActivateChild, CanLoad {
  private loginFailedRoute?: UrlTree;
 
  constructor(

5-AccessControl/1-call-api-roles/SPA/src/app/dashboard/dashboard.component.css

@@ -1,4 +1,4 @@
 .card-section {
- margin: 10%;
+ margin: 5%;
  padding: 5%;
 }

5-AccessControl/1-call-api-roles/SPA/src/app/role.guard.ts

@@ -5,10 +5,10 @@ import { Observable, of } from "rxjs";
 import { concatMap } from "rxjs/operators";
 
 import { MsalBroadcastService, MsalGuardConfiguration, MsalService, MSAL_GUARD_CONFIG } from "@azure/msal-angular";
-import { MsalGuard } from "./base.guard";
+import { BaseGuard } from "./base.guard";
 
 @Injectable()
-export class RoleGuard extends MsalGuard {
+export class RoleGuard extends BaseGuard {
 
  constructor(
  @Inject(MSAL_GUARD_CONFIG) protected override msalGuardConfig: MsalGuardConfiguration,
@@ -46,7 +46,6 @@ export class RoleGuard extends MsalGuard {
 
  return of(hasRequiredRole);
  })
- )
-
+ );
  }
 }