How to support the JWT in Swagger UI

1. Introduction

Swagger is an open specification for describing and documenting RESTful APIs, it is a standard specification and set of tools for defining, producing, consuming, and visualizing RESTful web services. It makes it easy to design, build, document, and consume APIs efficiently.

But, if we are using the JWT in the API (find more in my previous article), you will find that can’t get data from the API in the Swagger UI, because we also need to pass the JWT to the API to get data, but it seems there is no way to do that, right?

Do you want to be a good trading in cTrader?   >> TRY IT! <<

Okay, in this article, I will show you how to do that!

2. Setup the Swagger

We can setup the Swagger in the Program.cs with services:

builder.Services.AddSwaggerGen(options =>
{
    //...
}

So, if we want to support JWT in the UI, just need to add the below codes

builder.Services.AddSwaggerGen(options =>
{
     // add JWT Authentication
    var securityScheme = new OpenApiSecurityScheme
    {
        Name = "JWT Authentication",
        Description = "Enter JWT Bearer token **_only_**",
        In = ParameterLocation.Header,
        Type = SecuritySchemeType.Http,
        Scheme = "bearer", // must be lower case
        BearerFormat = "JWT",
        Reference = new OpenApiReference
        {
            Id = JwtBearerDefaults.AuthenticationScheme,
            Type = ReferenceType.SecurityScheme
        }
    };
    options.AddSecurityDefinition(securityScheme.Reference.Id, securityScheme);
    options.AddSecurityRequirement(new OpenApiSecurityRequirement
    {
        {securityScheme, new string[] { }}
    });
});

By the way, you can also change the default Swagger Doc description as below

options.SwaggerDoc("v1", new OpenApiInfo
{
    Version = "v1",
    Title = "MyDemo API",
    Description = "My Demo API by Winson from CoderBlog.in",
    TermsOfService = new Uri("https://www.coderblog.in"),
    Contact = new OpenApiContact
    {
        Name = "Contact",
        Url = new Uri("https://www.coderblog.in")
    },
    License = new OpenApiLicense
    {
        Name = "Example License",
        Url = new Uri("https://example.com/license")
    }
});

3. Find the JWT and use it

After that, restart the website, you will find there is an Authorize button in the Swagger UI.

After clicking this button, it will pop up to let you input the JWT value

Maybe you will ask how can I find the JWT token? All right, you can login to the website in frontend (I am still using this demo site), after login in Chrome, you can find the JWT in the Application tab, and find the local storage

And then input the JWT in Swagger, and you will find that will be a login status.

Also, you can find the lock is changed.

Now, you can try and access your API as well! 🙂

And if you change the Swagger Doc, you will also can find that the Swagger Doc has been changed

4. Conclusion

Swagger is very helpful for testing the API and finding the bugs, but if we use the JWT token then need to do the above settings to allow the Swagger to support it, this can save much of our time for the API testing!~

Loading

Views: 18
Total Views: 277 ,

Leave a Reply

Your email address will not be published. Required fields are marked *