page_type	languages	products	description	urlFragment
sample	javascript typescript csharp	dotnet angular msal-angular ms-graph microsoft-identity-web azure-active-directory	An Angular single-page application (SPA) calling a protected Web API and using App Roles and Security Groups to implement Role-Based Access Control (RBAC)	ms-identity-javascript-angular-spa-dotnetcore-webapi-roles-groups

An Angular single-page application (SPA) calling a protected Web API and using App Roles and Security Groups to implement Role-Based Access Control (RBAC)

This chapterwise tutorial demonstrates how to use Azure AD App Roles and Security Groups features to implement Role-Based Access Control (RBAC) in your application. In doing so, it covers how to modify claims in ID tokens and access tokens, how to protect restricted routes in your client app, and how to accept only authorized calls in your web API. To do so, it uses Microsoft Authentication Library for Angular (Preview) (MSAL Angular) obtain and manage tokens securely.

We recommend you to follow each chapter in a successive order, as the concepts used in later chapters are built on top of the previous ones and explanations may not be repeated. Before proceeding to Chapter 1, please review the Prerequisites below.

Contents

File/folder	Description
Chapter 1	Angular SPA calling .NET Core web API and using App Roles.
Chapter 2	Angular SPA calling .NET Core web API and using Security Groups.
ReadmeFiles	Contains screenshots and illustrations.
AppCreationScripts/	Contains Powershell scripts for automating app registration.
CONTRIBUTING.md	Guidelines for contributing to the sample.
LICENSE	The license for the sample.

Prerequisites

• Node.js must be installed to run this sample.
• Dotnet Core SDK must be installed to run this sample.
• An Azure Active Directory (Azure AD) tenant.
• At least two user accounts in your Azure AD tenant.
• A modern Browser. This sample uses ES6 conventions and will not run on Internet Explorer.
• We recommend VS Code for running and debugging this cross-platform application.

Moreover:

• We highly recommend you first getting familiar with the following basic sign-in examples and documents. This will help you easily grasp the various aspects that are presented here.
  • Angular single-page application calling MS Graph API
  • Angular single-page application calling a custom .NET Core web API
• Please take a moment to review Azure RBAC documentation in order to become familiar with App Roles and Security Groups. More specific documentation pointers can be found below under More information.

A Microsoft identity platform Office Hours session covered Azure AD App roles and security groups, featuring this scenario and this sample. A recording of the session is provided in this video Implement Authorization in your Applications with Microsoft identity platform

Please refer to each chapter's sub-folder for sample-specific prerequisites.

Setup

Step 1

Using a command line interface such as VS Code integrated terminal, clone or download this repository:

git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-spa-dotnetcore-webapi-roles-groups.git

⚠️ Given that the name of the sample is quite long, and so are the names of the referenced NuGet packages, you might want to clone it in a folder close to the root of your hard drive, to avoid file size limitations on Windows.

Step 2

Now let's start with Chapter 1 where we'll learn about using App Roles first.

More information

For more information, visit the following links:

• What is the Microsoft identity platform?

  • Configure group claims for applications with Azure Active Directory
  • How to: Configure the role claim issued in the SAML token for enterprise applications
  • Azure Active Directory app manifest
  • User: getMemberObjects function
  • How to: Provide optional claims to your Azure AD app
  • How to: Restrict your Azure AD app to a set of users in an Azure AD tenant
  • How to: Add app roles in your application and receive them in the token

• To learn more about the application registration, visit:

  • Quickstart: Set up a tenant
  • Quickstart: Register an application with the Microsoft identity platform
  • Quickstart: Configure a client application to access web APIs
  • Quickstart: Configure an application to expose web APIs

• Learn more about on-prem groups synchronization to Azure AD

  • Azure AD Connect sync: Understanding Users, Groups, and Contacts
  • Configure Office 365 Groups with on-premises Exchange hybrid

Community Help and Support

Use Stack Overflow to get support from the community. Ask your questions on Stack Overflow first and browse existing issues to see if someone has asked your question before. Make sure that your questions or comments are tagged with [msal dotnet angular azure-active-directory].

If you find a bug in the sample, please raise the issue on GitHub Issues.

To provide a recommendation, visit the following User Voice page.

ℹ️ Consider taking a moment to share your experience with us

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments