Azure token hasgroups: true ,Adal angular, Graph API,

Question

I am working on Angular app and .net in the backend. instead of making table for users, I am using Microsoft Azure to login into app after regester it in Azure. In Angular side I am using 'microsoft-adal-angular6' library to connect to azure and return the token, and every thing is ok,for more security , I send this token to backend which it is also connect to Azure and validate this token after that showing data, and till here every thing is ok and I got the token.

BUT this token does not has property 'groups' with Id when the user has more than 6 groups , instead of it , token has property hasgroups : true. And I have polices on the backend for example for add new customer, and when the user has more than 6 groups,he can not add customer and the error is 403 forbiden. I tried alot to find soulation . but I did not found the right one in my case ,what I undertsand I need to call graph API to bring all groups but I did not found any real example , just explination . So,could you please tell me in this case How I can do to solve this problem. here the code how i connect to azure from Angular.

Angular :

appModule.ts :

imports: [ MsAdalAngular6Module.forRoot({
  tenant: 'tetant Id of the app in Azure',
  clientId: 'client Id of the app in Azure',
  redirectUri: window.location.origin,
  endpoints: {
    "http://localhost:4211/": "http://localhost:4211/",
  },
  navigateToLoginRequestUrl: false,
  cacheLocation: '<localStorage / sessionStorage>', }),

Angular Iterceptor look like:

export class Interceptor implements HttpInterceptor {

initialToken ; headers = new HttpHeaders({ 'Content-Type': 'application/json' });

constructor( private adalSvc: MsAdalAngular6Service,private http:HttpClient,private router:Router)

{

this.initialToken = sessionStorage.getItem('adal.idtoken') ;

console.log( "initialToken " , this.initialToken);

}

intercept(request: HttpRequest, next: HttpHandler): Observable> {

if (this.initialToken) {

  request = request.clone({
    setHeaders: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${this.initialToken}`
    }
  });

  }

return next.handle( request ).pipe( tap(() => {},
  (err: any) => {
if (err instanceof HttpErrorResponse) {
    if (err.status !== 401) {
     return;
    }
    this.router.navigate(['']);
  }
}))

}

backnd validate token :

services.AddAuthentication(sharedOptions =>
            {
                sharedOptions.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
                sharedOptions.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme; 
                sharedOptions.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;

            })


            .AddJwtBearer(options =>
            {
                options.Audience = "clientId";
                options.Authority = "https://login.microsoftonline.com/tetantId/";

                options.RequireHttpsMetadata = false;

                options.Events = new JwtBearerEvents()
                {
                    OnTokenValidated = context =>
                    {
                        return Task.CompletedTask;
                    }
                };
            });

Thank you for your help.

Allen Wu Allen Wu · Accepted Answer · 2020-01-21T01:23:01

If you are using implicit flow and a user has 6 or more groups, they won't be in the access token. The limit is smaller for implicit flow since the token is returned in the URL.

In this case, it's not recommended to use groups claim. You could define some applciation roles and assign the roles to the groups. Then the users in the group will have the claim like below:

{
  "roles": ["admin"]
}

Then you can implement your authorization logic based on the roles of the user. See reference here.

Of course you can also call Microsoft Graph API to get groups information.

The code should be like:

if (hasGroups)
  Call the Graph to inquire:
    Either about the full group membership OR 
    About membership to a particular group
else
  Access groups directly from the token

See a sample for Angular apps with Microsoft Graph. For more samples, see here.

Azure token hasgroups: true ,Adal angular, Graph API,

1 Answers