To add a new role claim to the token issued by Azure AD (Active Directory) in an Angular application using ADAL JS (Azure Active Directory Authentication Library for JavaScript) and a Web API, you need to configure the roles claim on both the Azure AD application registration and the Web API.

Here are the steps to achieve this:

  1. Configure the Azure AD Application Registration:

    • Go to the Azure portal and navigate to "Azure Active Directory" > "App registrations."
    • Select your application registration (Angular app) and go to the "Token configuration" section.
    • Under the "Add optional claims" section, add a new claim mapping with the desired role claim name and type (e.g., "roles" with type "String").
    • Save the changes.
  2. Configure the Web API:

    • Go to the Azure portal and navigate to "Azure Active Directory" > "App registrations."
    • Select your application registration (Web API) and go to the "Manifest" section.
    • In the manifest, find the "appRoles" property and add a new role definition with a unique "id," "allowedMemberTypes," "displayName," and "description." For example:
    "appRoles": [ { "allowedMemberTypes": [ "Application" ], "displayName": "MyCustomRole", "id": "guid-value", // Replace with a unique GUID "isEnabled": true, "description": "Custom role for my application" } ]
    • Save the changes to the manifest.
  3. Grant Permissions:

    • Go to the "API permissions" section of your Angular app's application registration.
    • Make sure to grant the necessary permissions to the Web API, including the custom role defined in the Web API's manifest.
  4. Update Your Web API:

    • In your Web API code, when you authenticate the incoming token, make sure to include the role claim in the claims principal of the user. The exact implementation depends on your backend technology. For example, in ASP.NET Web API, you can do it in the Startup.cs file:
    public void ConfigureAuth(IAppBuilder app) { app.UseWindowsAzureActiveDirectoryBearerAuthentication( new WindowsAzureActiveDirectoryBearerAuthenticationOptions { TokenValidationParameters = new TokenValidationParameters { // other configurations... RoleClaimType = "roles" // Use the same claim name as defined in the Azure AD application registration }, }); }
  5. Accessing the Role Claim in Angular:

    • After obtaining the access token in your Angular app using ADAL JS, you can access the role claim like this:
    const token = adalAuthenticationService.userInfo.token; const decodedToken = adalAuthenticationService.userInfo.profile; const roles = decodedToken.roles; // This will contain the roles claim if it's present in the token.

That's it! Now, when your Angular app calls the Web API, the Web API should receive the token with the custom role claim added by Azure AD, allowing you to handle authorization based on the custom roles in your Web API.

Have questions or queries?
Get in Touch