Identify roles with SPA and .NET Core 3 Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Identify roles with SPA and .NET Core 3 without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have an application using .NET Core 3.1 and also a frontend using the default React application, generated from this link.

In the .NET Core app, I have Identity Server setup with users and roles.

When I’m in the React app, I would like to know the roles from the user. I see that there’s currently a library being used called oidc-client.

From the responses I can debug when authorizing the user, I see that there are some scopes being returned.

scope: "openid profile [Name of the app]"

Here’s the full response.

enter image description here

How can I know the roles from that user? Do I need to add it somewhere in my .NET Core app? Or can I figure it from the access_token in the response?

Answer

That template is using ASP.NET Core Identity to manage users/roles . So that the first thing is to enable roles :

services.AddDefaultIdentity<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
        .AddRoles<IdentityRole>().AddEntityFrameworkStores<ApplicationDbContext>();

Crating custom Profile service to include custom claims into tokens & userinfo endpoint :

public class ProfileService : IProfileService
{
    protected readonly UserManager<ApplicationUser> _userManager;


    public ProfileService(UserManager<ApplicationUser> userManager)
    {
        _userManager = userManager;
    }

    public async Task GetProfileDataAsync(ProfileDataRequestContext context)
    {
        ApplicationUser user = await _userManager.GetUserAsync(context.Subject);

        IList<string> roles = await _userManager.GetRolesAsync(user);

        IList<Claim> roleClaims = new List<Claim>();
        foreach (string role in roles)
        {
            roleClaims.Add(new Claim(JwtClaimTypes.Role, role));
        }

        //add user claims

        roleClaims.Add(new Claim(JwtClaimTypes.Name, user.UserName));
        context.IssuedClaims.AddRange(roleClaims);
    }

    public Task IsActiveAsync(IsActiveContext context)
    {
        return Task.CompletedTask;
    }
}

And register in Startup.cs :

services.AddIdentityServer()
        .AddApiAuthorization<ApplicationUser, ApplicationDbContext>()
        .AddProfileService<ProfileService>(); 

Now the claims will include in userinfo endpoint , your react application will automatically request the userinfo endpoint to get user’s profile in getUser function of AuthorizeService.js file , trace the _user.profile to get the new claims . Also , the role claims are included in access token .

We are here to answer your question about Identify roles with SPA and .NET Core 3 - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji