Role based authorization with IdentityServer4 : <p>I am trying to implement "Role Based Authorization" using IdentityServer4 to give access to my API based on the user roles. </p>

<p>For example , I want to have two roles for the user i.e. FreeUser and PaidUser and want to give access to the API through the Authorize Attribute using [Authorize(Roles = "FreeUser"))], Kindly help me that How can I achieve this.</p>

<p>I have the following solution structure :</p>

<ol>
<li>IdentityServer</li>
<li>WebApi</li>
<li>Javascript Client</li>
</ol>

<p>I have registered my Javascript client as follows:</p>

<pre><code> new Client
            {
                ClientId = "js",
                ClientName = "javascript client",
                AllowedGrantTypes = GrantTypes.Implicit,
                AllowAccessTokensViaBrowser= true,
                RedirectUris = {"http://localhost:5004/callback.html"},
                PostLogoutRedirectUris = {"http://localhost:5004/index.html"},
                AllowedCorsOrigins = {"http://localhost:5004"},

                AllowedScopes =
                {
                    StandardScopes.OpenId.Name,
                    StandardScopes.Profile.Name,
                    "api1",
                    "role",
                    StandardScopes.AllClaims.Name
                }
            }
</code></pre>

<p><strong>Scopes</strong></p>

<pre><code> return new List&lt;Scope&gt;
        {
            StandardScopes.OpenId,
            StandardScopes.Profile,

            new Scope
            {
                Name = "api1",
                Description = "My API"
            },
           new Scope
           {
               Enabled = true,
               Name  = "role",
               DisplayName = "Role(s)",
               Description = "roles of user",
               Type = ScopeType.Identity,
               Claims = new List&lt;ScopeClaim&gt;
               {
                   new ScopeClaim("role",false)
               }
           },
           StandardScopes.AllClaims
        };
</code></pre>

<p><strong>Users</strong></p>

<pre><code> return new List&lt;InMemoryUser&gt;
        {
            new InMemoryUser
            {
                Subject = "1",
                Username = "alice",
                Password = "password",

                Claims = new List&lt;Claim&gt;
                {
                    new Claim("name", "Alice"),
                    new Claim("website", "https://alice.com"),
                    new Claim("role","FreeUser")
                }
            },
            new InMemoryUser
            {
                Subject = "2",
                Username = "bob",
                Password = "password",

                Claims = new List&lt;Claim&gt;
                {
                    new Claim("name", "Bob"),
                    new Claim("website", "https://bob.com"),
                    new Claim("role","PaidUser")
                }
            }
        };
</code></pre>

<p><strong>WebApi Startup.cs</strong> </p>

<pre><code>  public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();


        JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Clear();
        app.UseCors("default");
        app.UseIdentityServerAuthentication(new IdentityServerAuthenticationOptions
        {
            Authority = "http://localhost:5000",
            ScopeName = "api1",
            //  AdditionalScopes = new List&lt;string&gt; { "openid","profile", "role" },
            RequireHttpsMetadata = false
        });

        app.UseMvc();
    }
</code></pre>

<p><strong>Web Api controller</strong></p>

<pre><code>namespace Api.Controllers
{
 [Route("[controller]")]

public class IdentityController : ControllerBase
{
    [HttpGet]
    [Authorize(Roles = "PaidUser")]
    public IActionResult Get()
    {
        return new JsonResult(from c in User.Claims select new { c.Type,    c.Value });
    }

    [Authorize(Roles = "FreeUser")]
    [HttpGet]
    [Route("getfree")]
    public IActionResult GetFreeUser()
    {
        return new JsonResult(from c in User.Claims select new { c.Type, c.Value });
    }
}
}
</code></pre>

<p><strong>Javascript Client app.js</strong> 
Here I am trying to login the user through IdentityServer and make an API Request.</p>

<pre><code>var mgr = new Oidc.UserManager(config);
mgr.getUser().then(function (user) {
if (user) {
    log("User logged in", user.profile);
} else {
    log("User is not logged in.");
}
});

function login() {
  mgr.signinRedirect();
 }

function api() {
mgr.getUser().then(function (user) {
    var url = "http://localhost:5001/identity/getfree";

    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = function () {
        log(xhr.status, JSON.parse(xhr.responseText));
    };

    xhr.setRequestHeader("Authorization", "Bearer " + user.access_token);
    xhr.send();
  });
 }

 function logout() {
   mgr.signoutRedirect();
 }
</code></pre>

<p>The Login flow works fine and I can login successfully, and I can receive the role in the access token.</p>

<p><a href="https://i.stack.imgur.com/zV3i2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zV3i2.png" alt="enter image description here"></a></p>

<p>When I make a request to the API by clicking the button (Call Api) then I get the following error..
<a href="https://i.stack.imgur.com/OHlv0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OHlv0.png" alt="enter image description here"></a></p>
