Base solution for your next web application
Starts in:
01 DAYS
01 HRS
01 MIN
01 SEC
Open Closed

ANZ/Abp custom SwaggerUI javascript interfering with Auth button functionality #10321


User avatar
0
mightyit created

I checked the documentation at https://aspnetboilerplate.com/Pages/Documents/Swagger-UI-Integration

Swagger UI does not render the authorization dialog for bearer token authentication. This seems to be due to abp-specific javascript contained in wwwroot/swagger/ui/index.html, for the onload event, not returning null, in stead of the proper markup for the authorizebtn component.

 configObject.plugins = [
                function (system) {
                    return {
                        components: {
                            authorizeBtn: function () {
                                return null; // <-- Returning null in stead of authorize button markup
                            }
                        }
                    }
                }
            ];

Here is the OAS3 markup that is generated from my API during runtime (shortened)

{
    "openapi": "3.0.1",
    "info": {
        "title": "MyDemo Host API v1",
        "version": "v1"
    },
    "paths": {
        "/api/services/app/Tenant/CreateTenant": {
            "post": {
                "tags": [
                    "Tenant"
                ],
                "operationId": "ApiServicesAppTenantCreatetenantPost",
                "requestBody": {
                    "content": {
                        "application/json-patch+json": {
                            "schema": {
                                "allOf": [
                                    {
                                        "$ref": "#/components/schemas/CreateTenantInput"
                                    }
                                ]
                            }
                        },
                        "application/json": {
                            "schema": {
                                "allOf": [
                                    {
                                        "$ref": "#/components/schemas/CreateTenantInput"
                                    }
                                ]
                            }
                        },
                        "text/json": {
                            "schema": {
                                "allOf": [
                                    {
                                        "$ref": "#/components/schemas/CreateTenantInput"
                                    }
                                ]
                            }
                        },
                        "application/*+json": {
                            "schema": {
                                "allOf": [
                                    {
                                        "$ref": "#/components/schemas/CreateTenantInput"
                                    }
                                ]
                            }
                        }
                    }
                },
                "responses": {
                    "200": {
                        "description": "Success",
                        "content": {
                            "text/plain": {
                                "schema": {
                                    "$ref": "#/components/schemas/SwaggerDocResponseWrapper"
                                }
                            },
                            "application/json": {
                                "schema": {
                                    "$ref": "#/components/schemas/SwaggerDocResponseWrapper"
                                }
                            },
                            "text/json": {
                                "schema": {
                                    "$ref": "#/components/schemas/SwaggerDocResponseWrapper"
                                }
                            }
                        }
                    }
                },
                "security": [
                    {
                        "bearer": []
                    }
                ]
            }
        }
    },
    "components": {
        "schemas": {
            "CreateTenantInput": {
                "required": [
                    "adminEmailAddress",
                    "name",
                    "tenancyName"
                ],
                "type": "object",
                "properties": {
                    "tenancyName": {
                        "maxLength": 64,
                        "minLength": 0,
                        "pattern": "^[a-zA-Z][a-zA-Z0-9_-]{1,}$",
                        "type": "string"
                    },
                    "name": {
                        "maxLength": 128,
                        "minLength": 0,
                        "type": "string"
                    },
                    "adminEmailAddress": {
                        "maxLength": 256,
                        "minLength": 0,
                        "type": "string",
                        "format": "email"
                    },
                    "adminPassword": {
                        "maxLength": 128,
                        "minLength": 0,
                        "type": "string",
                        "nullable": true
                    },
                    "connectionString": {
                        "maxLength": 1024,
                        "type": "string",
                        "nullable": true
                    },
                    "shouldChangePasswordOnNextLogin": {
                        "type": "boolean"
                    },
                    "sendActivationEmail": {
                        "type": "boolean"
                    },
                    "editionId": {
                        "type": "integer",
                        "format": "int32",
                        "nullable": true
                    },
                    "isActive": {
                        "type": "boolean"
                    },
                    "subscriptionEndDateUtc": {
                        "type": "string",
                        "format": "date-time",
                        "nullable": true
                    },
                    "isInTrialPeriod": {
                        "type": "boolean"
                    },
                    "onSellingPartnerId": {
                        "type": "integer",
                        "format": "int32",
                        "nullable": true
                    },
                    "onSellingPartner": {
                        "allOf": [
                            {
                                "$ref": "#/components/schemas/OnSellingPartnerDto"
                            }
                        ],
                        "nullable": true
                    },
                    "contactPersonFirstName": {
                        "maxLength": 32,
                        "type": "string",
                        "nullable": true
                    },
                    "contactPersonLastName": {
                        "maxLength": 32,
                        "type": "string",
                        "nullable": true
                    },
                    "contactNumber": {
                        "maxLength": 24,
                        "type": "string",
                        "nullable": true
                    },
                    "contactEmail": {
                        "maxLength": 256,
                        "type": "string",
                        "nullable": true
                    },
                    "taxNumber": {
                        "maxLength": 24,
                        "type": "string",
                        "nullable": true
                    },
                    "registeredName": {
                        "maxLength": 256,
                        "type": "string",
                        "nullable": true
                    },
                    "tenantBillingAddress": {
                        "allOf": [
                            {
                                "$ref": "#/components/schemas/TenantBillingAddressInput"
                            }
                        ],
                        "nullable": true
                    }
                },
                "additionalProperties": false
            },
            "ValidationError": {
                "type": "object",
                "properties": {
                    "message": {
                        "type": "string",
                        "nullable": true
                    },
                    "members": {
                        "type": "array",
                        "items": {
                            "type": "string"
                        },
                        "nullable": true
                    }
                },
                "additionalProperties": false
            },
            "SwaggerDocResponseWrapper": {
                "type": "object",
                "properties": {
                    "result": {
                        "type": "string",
                        "nullable": true
                    },
                    "targetUrl": {
                        "type": "string",
                        "nullable": true
                    },
                    "success": {
                        "type": "boolean"
                    },
                    "error": {
                        "allOf": [
                            {
                                "$ref": "#/components/schemas/ResponseError"
                            }
                        ],
                        "nullable": true
                    },
                    "unauthorizedRequest": {
                        "type": "boolean"
                    },
                    "__Abp": {
                        "type": "boolean"
                    }
                },
                "additionalProperties": false
            },
            "OnSellingPartnerDto": {
                "type": "object",
                "properties": {
                    "name": {
                        "type": "string",
                        "nullable": true
                    },
                    "isActive": {
                        "type": "boolean"
                    },
                    "registeredName": {
                        "type": "string",
                        "nullable": true
                    },
                    "taxNumber": {
                        "type": "string",
                        "nullable": true
                    },
                    "contactNumber": {
                        "type": "string",
                        "nullable": true
                    },
                    "contactPersonFirstName": {
                        "type": "string",
                        "nullable": true
                    },
                    "contactPersonLastName": {
                        "type": "string",
                        "nullable": true
                    },
                    "contactEmail": {
                        "type": "string",
                        "nullable": true
                    },
                    "id": {
                        "type": "integer",
                        "format": "int32"
                    }
                },
                "additionalProperties": false
            },
            "TenantBillingAddressInput": {
                "type": "object",
                "properties": {
                    "streetAddress": {
                        "maxLength": 256,
                        "minLength": 0,
                        "type": "string",
                        "nullable": true
                    },
                    "region": {
                        "maxLength": 64,
                        "minLength": 0,
                        "type": "string",
                        "nullable": true
                    },
                    "city": {
                        "maxLength": 64,
                        "minLength": 0,
                        "type": "string",
                        "nullable": true
                    },
                    "countryId": {
                        "type": "integer",
                        "format": "int32",
                        "nullable": true
                    },
                    "regionCode": {
                        "maxLength": 6,
                        "minLength": 0,
                        "type": "string",
                        "nullable": true
                    }
                },
                "additionalProperties": false
            },
            "ResponseError": {
                "type": "object",
                "properties": {
                    "code": {
                        "type": "integer",
                        "format": "int32"
                    },
                    "message": {
                        "type": "string",
                        "nullable": true
                    },
                    "details": {
                        "type": "string",
                        "nullable": true
                    },
                    "validationErrors": {
                        "type": "array",
                        "items": {
                            "$ref": "#/components/schemas/ValidationError"
                        },
                        "nullable": true
                    }
                },
                "additionalProperties": false
            }
        },
        "securitySchemes": {
            "bearer": {
                "type": "http",
                "description": "Specify the authorization token.",
                "scheme": "bearer",
                "bearerFormat": "JWT"
            }
        }
    },
    "security": [
        {}
    ]
}

This renders correctly when running it through editor.swagger.io (with "Authorize" button and bearer authentication dialog working correctly).

However, it renders incorrectly on my ASPNetZero / ABP solution....

The following version and Nuget package information applies

  • AspNetZero Core MVC & JQuery v10.3.0 (.Net 5)
  • Abp (6.2.0)
  • Swashbuckle.AspNetCore (5.6.3) & Swashbuckle.AspNetCore.NewtonSoft (6.1.4)
  • .Net 5

1 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @mightyit,

    I thought you were using Angular version in your previous question. We removed Authorize button on purpose because it can't handle 2FA and some other login flows. In MVC & Jquery version, we suggest using the default login page and then redirect to swagger UI so that it will contain an authorization cookie and APIs will work as expected.