Secure Your APIs with Asgardeo: A Step-by-Step Guide - Part 2

Photo by Jason Goodman on Unsplash

Welcome back! As promised, I am here with a demonstration on how you can secure your APIs using Asgardeo. For those joining us for the first time, let’s quickly recap. Securing APIs is essential to protect sensitive data and ensure the integrity of your applications. Asgardeo, a SaaS-based customer identity and access management (CIAM) solution, offers a feature that enables you to authorize user access to APIs based on assigned roles. In this article, we will guide you through the process of configuring Asgardeo to secure your APIs.

Also, if you want to recap the first part of this article series, you can read it from here to get a comprehensive overview of this feature.

If we’re all good to go, without further ado, let’s dive straight into the demonstration!

Asgardeo Configuration Steps:

Before using Asgardeo, you’ll need an Asgardeo account. If you don’t have one, you can register for a free account from here.

Once you have created an account, follow these steps:

Step 1: Register API Resource in Asgardeo

First, we need to register our API resource in Asgardeo. Use the following details for that:

• Identifier: http://localhost:3001
• Display Name: Issues API
• Permissions

- Scope: issues:view, Display Name: View Issues

- Scope: issues:create, Display Name: Create Issue

Remember to mark “requires authorization” to set the authorization policy to Role-Based Access Control (RBAC). You can read more about RBAC from here.

Step 2: Create an Application

Create a standard-based application with OpenID Connect as the protocol. Let’s name it “Issues Application.” After creating the application, make sure to set the following parameters:

• Allowed grant types: Code
• Authorized redirect URLs: http://localhost:3000, http://localhost:3000/api/auth/callback/apiResourceDemo
• Allowed origins: http://localhost:3000
• PKCE: Mandatory
• Access Token: JWT

You can learn about creating applications in Asagredo from here.

Step 3: Authorize the API Resource to an Application

Go into the API authorization section and authorize the created API resource so that our application can access its mentioned scopes.

Step 4: Create Application Roles

Now, go into the roles section and create two roles:

• Manager: Create Issues, View Issues [allowed scopes]
• Employee: View Issues [allowed scopes]

Step 5: Create Users

Create two users: one we will assign the Manager role, and the other the Employee role.

• John — Manager
• Emily — Employee

You can learn about creating users in Asagredo from here.

Step 6: Create Groups

Create two groups named Manager and Employee. Go inside the groups and assign the created application roles (Manager and Employee) accordingly.

You can learn about creating groups in Asagredo from here.

That’s it for the Asgardeo configuration; now let’s proceed with the configuration of the demonstration system.

Demonstration System Configuration Steps:

Prerequisites:

• You need to have Ballerina installed as the backend of the system uses Ballerina. You can download Ballerina from this link.
• You need to have Node.js installed as the frontend of the system uses Next.js and Node is required for therelevant libraries related to the frontend of the system to work properly. You can download Node.js from this link.
• Download the system using the following Github link.

Configure Front End:

Go inside the

api_resource_demo_fe/config.json

and change the “client_id” and “client_secret”, which you can obtain from the “protocol” section in the created application. Finally, your “config.json” file should look like this.

{
    "AuthorizationConfig": {
        "BaseOrganizationUrl": "https://api.asgardeo.io/t/<tenant-name>"
    },
    "ApplicationConfig": {
        "HostedUrl": "http://localhost:3000",
        "BackendUrl": "http://localhost:3001",
        "ClientId": "<client-id>",
        "ClientSecret": "<client-secret>",
        "APIScopes": [
            "openid",
            "email",
            "profile",
            "internal_login"
        ]
    },
    "Features": {
        "Issues": {
            "scopes": {
                "create": ["issues:create"],
                "view": ["issues:view"]
            }
        }
    }
}

Configure Back End:

Go inside the

api_resource_demo_be/Config.toml

and change the audience value to the client ID obtained from the “protocol” section in the created application. The “issuer” value is the token endpoint of your Asgardeo organization, and the “jwksUrl” is the JWKS endpoint of your Asgardeo organization. Both these values can be obtained from the “info” section of your created application. Finally, your “Config.toml” file should look like this.

[api_resource_demo_be.util]
issuer = "https://dev.api.asgardeo.io/t/<tenant-name>/oauth2/token"
audience = "<client-id>"
jwksUrl = "https://dev.api.asgardeo.io/t/<tenant-name>/oauth2/jwks"
port = 3001

[api_resource_demo_be.util.issueScopes]
create = "issues:create"
view = "issues:view"

Let’s Run!

1. First, run the backend.

# From api_resource_demo_be
bal run

This will start the ballerina backend server.

2. Then start the frontend.

# From api_resource_demo_fe
npm run dev

You can access the frontend with http://localhost:3000 and login using the created user accounts.

You will see that when you sign in with John (Manager), you can create and view issues,

but when you sign in with Emily (Employee), you can only view issues.

Conclusion:

In this article, we explored a demonstration of how to configure Asgardeo to secure your APIs using role-based access control. Asgardeo simplifies the process of securing your APIs. By registering your API, authorizing it to an application, creating application roles, and associating users with roles, you can establish granular access control to your APIs.

If you found this article useful, feel free to share it with your friends and colleagues.

Thank you, and HAPPY CODING! 👩‍💻🧑🏽‍💻👨🏿‍💻