Sending User Attribute Values as Claims in JWT via WSO2 Identity Server

In your web apps, there can be scenarios where the web app functionality depends on the role of the user. Or this can be a different attribute of the user profile or identity.

As an example, there could be an e-commerce application where the customer should not provided access to the admin pages while the admin and customer both can access the item catalog page. Or there can be an scenario where some user profile information should be shown in the account page.

Lets see how to do this.

Create Users and Add Roles and Information

Login to WSO2 API Manager management console via https://<IS-M_HOST>:9443/carbon

From the Main menu in the left panel, click Add under the Users and Roles section.

In Add Users and Roles, click Add new role.

Provide the role name and click on “Finish”

In Add Users and Roles, click Add new user.

In Add Users and Roles, click Add new user.

Enter details and click Next

In “Select Roles of the User” page select the previously created role (adminuser)and click “Finish”.

From the Main menu in the left panel, click List under the Users and Roles section and select the User Profile of the relevant user

Mapping OIDC scopes with WSO2 Claims

To check which OIDC claim mapped to which WSO2 claim, From the Main menu in the left panel, click List under the Claims section and select the http://wso2.org/oidc/claim

All the OIDC scopes are matched with the WSO2 claims as you could see below

Once its confident of the above details, From the Main menu in the left panel, click List under the OIDC scopes section and check the OIDC scopes and the available claims under those. If you need any additional claims, you could use Add Claims in the respective claim.

Select the needed information and click on Add or Finish

If a new scope is needed other than the mentioned, it is possible to use Add under the OIDC scopes section and add the claims as before.

From the Main menu in the left panel, click Add under the OIDC Scopes section.

Click on Add OIDC Claim and select the user attribute that needed to be sent in JWT claims and click Finish

Now all the claims are configured that has to be sent with the scopes.

Configure Service Provider

In order for the web application to communicate with the Identity server, first an service provider application is needed and it can be created via the management console at https://localhost:9444/carbon.

Add a new service provider. By providing a name, the new application can be registered afterwards where we can change the settings.

Once you register, you can configure the authentication mechanism that you need for the application. In this case it would be Open ID Connect (OIDC)

Then you would need to additionally add the following information and click on “Add” at the end of the page.

In order to provide consent to the application to send the requesting, it is needed to add all the claims in the Requested Claims using the Add Claim URI.

Above, several claims have added and the Groups claim is made as mandatory.

Web Application Configurations

In the web application, add the required scopes and get the authorization code

const clientId = authConfig.clientID;
const redirectUri = authConfig.signInRedirectURL;
const authorizationEndpoint = authConfig.authEndpoint;
const responseType = 'code';
const scope = 'openid profile email groups roles address';
// build the authorization URL
const url = `${authorizationEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=${responseType}&scope=${scope}`;
// redirect the user to the authorization URL
window.location.href = url;

Afterwards, the following code can be used to get the Access token and the ID token.

const data = {
  grant_type: "authorization_code",
  code: code,
  client_id: authConfig.clientID,
  redirect_uri: redirect_uri,
  scopes: ["admin"]
};

const headers = {
  'Access-Control-Allow-Origin': '*',
  'Authorization': 'Basic ' + btoa(authConfig.clientID + ':' + authConfig.clientSecret),
};

const response = await axios.post(authConfig.tokenEndpoint, data, {headers});

With the above configuration, when the login is clicked, the user will be redirected to the Identity Server login page

And the user will be requested to provide consent on getting some attributes and since the groups attribute is a mandatory attribute, it has to be sent compulsory.

The retrieved ID token contains the following claim values and you can use it in the web application.