title: Role based authorization with IdentityServer4
body: <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>