How can I have dropdown for different API version in REDOC c#

Question

Here is my configuration in the startup.cs

        services.AddApiVersioning(options =>
        {
            options.DefaultApiVersion = new ApiVersion(1, 0);
            options.AssumeDefaultVersionWhenUnspecified = true;
            options.ApiVersionReader = new UrlSegmentApiVersionReader();
            options.ReportApiVersions = true;
        });


        // Register the Swagger services
        services.AddSwaggerDocument(config =>
        {
            config.DocumentName = "v1";
            config.ApiGroupNames = new[] { "1" };
            config.GenerateEnumMappingDescription = true;
            config.AddSecurity("bearer", Enumerable.Empty<string>(), new OpenApiSecurityScheme
            {
                Type = OpenApiSecuritySchemeType.OAuth2,
                Description = "Get access to data while protecting your account credentials. OAuth2 is also a safer and more secure way to give you access.",
                Flow = OpenApiOAuth2Flow.Implicit,
                Flows = new OpenApiOAuthFlows()
                {
                    Implicit = new OpenApiOAuthFlow()
                    {

                        Scopes = new Dictionary<string, string>
                        {
                            {Configuration.GetValue<string>("IdentityServer:ClientId"), Configuration.GetValue<string>("IdentityServer:ClientId")},
                            {Configuration.GetValue<string>("IdentityServer:BankClientId"), Configuration.GetValue<string>("IdentityServer:BankClientId")}

                        },
                        TokenUrl = Configuration.GetValue<string>("IdentityServer:Authority") + "/connect/token",
                        AuthorizationUrl = Configuration.GetValue<string>("IdentityServer:Authority") + "/connect/authorize",

                    },
                }
            });
            config.OperationProcessors.Add(new AspNetCoreOperationSecurityScopeProcessor("bearer"));
            config.PostProcess = document =>
            {
                document.Info.Version = Configuration.GetValue<String>("SwaggerDocument:Version");
                document.Info.Title = Configuration.GetValue<String>("SwaggerDocument:Title");
                document.Info.Description = Configuration.GetValue<String>("SwaggerDocument:Description");
            };
        })
        .AddSwaggerDocument(document =>
            {
                document.DocumentName = "v2";
                document.ApiGroupNames = new[] { "2" };
                document.GenerateEnumMappingDescription = true;
                document.AddSecurity("bearer", Enumerable.Empty<string>(), new OpenApiSecurityScheme
                {
                    Type = OpenApiSecuritySchemeType.OAuth2,
                    Description = "Get access to data while protecting your account credentials. OAuth2 is also a safer and more secure way to give you access.",
                    Flow = OpenApiOAuth2Flow.Implicit,
                    Flows = new OpenApiOAuthFlows()
                    {
                        Implicit = new OpenApiOAuthFlow()
                        {

                            Scopes = new Dictionary<string, string>
                        {
                            {Configuration.GetValue<string>("IdentityServer:ClientId"), Configuration.GetValue<string>("IdentityServer:ClientId")},
                            {Configuration.GetValue<string>("IdentityServer:BankClientId"), Configuration.GetValue<string>("IdentityServer:BankClientId")}

                        },
                            TokenUrl = Configuration.GetValue<string>("IdentityServer:Authority") + "/connect/token",
                            AuthorizationUrl = Configuration.GetValue<string>("IdentityServer:Authority") + "/connect/authorize",

                        },
                    }
                });
                document.OperationProcessors.Add(new AspNetCoreOperationSecurityScopeProcessor("bearer"));
                document.PostProcess = document =>
                {
                    document.Info.Version = "v2";
                    document.Info.Title = Configuration.GetValue<String>("SwaggerDocument:Title");
                    document.Info.Description = Configuration.GetValue<String>("SwaggerDocument:Description");
                };
            });

        app.UseOpenApi();
        
        //Redoc
        app.UseReDoc(options =>
        {
            options.Path = Configuration.GetValue<String>("Redoc:Path");
            options.DocumentPath = Configuration.GetValue<String>("Redoc:DocumentPath");
        });

API version is showing for swagger. Below is the image

but the same thing isn't happening for the REDOC. below is the image

If I change the url from https://localhost:44311/redoc/index.html?url=/swagger/v1/swagger.json to https://localhost:44311/redoc/index.html?url=/swagger/v2/swagger.json Just change v1 to v2 then I get API for v2. But I want that REDOC UI should have a dropdown for version selection. Anyone can help me?

Answer 1

You can't have a UI selector but you can definitely change the behavior on the URLs for the different versions. Meaning you can have different URLs for each version. When you are configuring it the easy way is to define the URLs as below.

Please note that I will assume that you know about versioning for this to work and that all is working with Swagger Versioning. So what I have is that I get an IApiVersionDescriptionProvider parameter on my Configure() method. And then by that, it allows me to iterate over the different versions and create the different ReDoc(s).

public void Configure(IApplicationBuilder app, IApiVersionDescriptionProvider provider){
 
 app.UseSwagger();

 // Enable middleware to serve swagger-ui (HTML, JS, CSS, etc.), 
 // specifying the Swagger JSON endpoint.
 app.UseSwaggerUI(c =>
 {
     foreach (var description in provider.ApiVersionDescriptions)
      {
                c.SwaggerEndpoint($"/swagger/{description.GroupName}/swagger.json",
                    $"Your API {description.GroupName.ToUpperInvariant()}");
      }
      c.OAuthUsePkce();
      c.OAuthClientId("something");
      c.OAuthAppName("Something");
 });

 //Use ReDoc
 app.UseReDoc(c =>
 {
   foreach (var description in provider.ApiVersionDescriptions)
    {
      c.DocumentTitle = $"MY API Documentation {description.GroupName.ToUpperInvariant()}";
      c.RoutePrefix = $"{documentation/{description.GroupName}";
      c.SpecUrl = $"{/swagger/{description.GroupName}/swagger.json";
    }
 });
}

Answer 2

That works for me in .net 5:

swagger -> /docs

redoc -> /docs-v1, /docs-v2, etc.

 public void Configure(IApplicationBuilder app, IApiVersionDescriptionProvider provider){

        ...

        app.UseSwagger(options => { options.RouteTemplate = "docs/{documentName}/docs.json"; });
        app.UseSwaggerUI(options =>
        {
            options.RoutePrefix = "docs";
            foreach (var description in provider.ApiVersionDescriptions)
            {
                options.SwaggerEndpoint($"/docs/{description.GroupName}/docs.json", description.GroupName.ToUpperInvariant());
            }
        });

        foreach (var description in provider.ApiVersionDescriptions)
        {
            app.UseReDoc(options =>
            {
                options.DocumentTitle = $"API Documentation {description.GroupName}";
                options.SpecUrl = $"/docs/{description.GroupName}/docs.json";
                options.RoutePrefix = $"docs-{description.GroupName}";
            });
        }

}