App that check another Application Roles use Azure authentication

Question

My application is kind of middleware (angular app) where it will be invoked by another parent applications to do certain tasks. My application uses MSAL library to authenticate user when they launch the app. So the requirement here is that now we have to verify the parent application user role and based on that, We have to show the modules differently. The good things here is that both applications uses Microsoft Azure authentication But both application is completely different to each other. It means that Sign-on one application doesn't require login on another application. All i need to verify the roles of parent app user when they launch my app. Both app uses different client ids. Is this something possible with Microsoft Azure.? If so, Any examples on that or Approach to do that?

Answer 1

Yes, it's definitely possible to achieve role-based access control in your Angular application using Microsoft Azure Active Directory (Azure AD) authentication. Since both applications use Azure AD for authentication, you can leverage the roles assigned to users in Azure AD to control access within your Angular middleware application.

Here's a general approach you can follow:

1. Set up role-based access control (RBAC) in Azure AD:
   • Assign appropriate roles to users or groups in Azure AD. This can be done either through Azure portal or programmatically via Azure AD Graph API or Microsoft Graph API.
2. Accessing roles in your Angular application:
   • After the user authenticates via MSAL, you can retrieve the user's roles from the token claims. The roles are typically included in the roles claim of the JWT token issued by Azure AD.
3. Authorize access based on roles:
   • Once you have the user's roles, you can implement logic in your Angular application to conditionally display modules or features based on the roles assigned to the user.
4. Handle token acquisition and role validation:
   • Ensure that your Angular application properly handles token acquisition using MSAL and validates the roles retrieved from the token against the required roles for accessing different modules or features.
   Testing:
   • Test your application thoroughly to ensure that users are able to access the appropriate modules based on their roles, and unauthorized access is prevented.

Here's a simplified example of how you might handle role-based access control in your Angular middleware application:

Code :

import { Injectable } from '@angular/core';
import { MsalService } from '@azure/msal-angular';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private authService: MsalService) { }

  // Method to check if the user has a specific role
  hasRole(role: string): boolean {
    const accessToken = this.authService.instance.getActiveAccount()?.accessToken;
    if (accessToken) {
      const decodedToken = this.decodeJwt(accessToken);
      const roles = decodedToken.roles;
      return roles.includes(role);
    }
    return false;
  }

  // Decode JWT token
  private decodeJwt(token: string): any {
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    return JSON.parse(window.atob(base64));
  }
}

In your component, you can then use the hasRole method to check if the user has a specific role:

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit(): void {
    if (this.authService.hasRole('Admin')) {
      // Display admin features
    } else {
      // Display regular user features
    }
  }
}

Remember that this is a simplified example, and you may need to adjust it based on your specific requirements and application architecture. Additionally, ensure that you handle errors and edge cases appropriately, especially when dealing with authentication and authorization.

Answer 2

Hi Moola Mahadevan, Raja

Thanks for reaching out.

Yes, it is possible to protect the API from another API using authorization. You can protect another API and use scope-based authorization based on application scopes to allow users to access API.

https://learn.microsoft.com/en-us/entra/identity-platform/scenario-protected-web-api-verification-scope-app-roles?tabs=aspnetcore

Hope this will help. Thanks,

Shweta

Please remember to "Accept Answer" if answer helped you.