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?
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!~
