swagger tags

¿Cómo enviar el encabezado de autorización con una solicitud en la interfaz de usuario de Swagger?

Question

Tengo una aplicación ASP.NET Web Api 2. Le agregué Swashbuckle (Swagger para .NET). Muestra mis puntos finales sin problemas, pero para enviar una solicitud, necesito adjuntar un encabezado de Autorización a esa solicitud. Si comprendo correctamente para hacer eso, necesito modificar el archivo index.html ( https://github.com/swagger-api/swagger-ui#how-to-use-it ), así que hice el proyecto de Swashbuckle clonado en Para modificar index.html y agregar algunos encabezados.

¿Es esa la única forma de enviar el encabezado de autorización con la solicitud en Swashbuckle?

Answer 1

Agregué el código a continuación en un archivo js y lo agregué como un recurso incorporado a mi proyecto de API web. Cuando construyas y ejecutas Swagger, el cuadro de texto api_key se reemplazará con el cuadro de texto de clave de autorización, donde puedes pegar tu AuthKey y con cada solicitud, swagger lo agregará al encabezado de solicitud.

(function () {

    $(function () {
        var basicAuthUI =
         ''<div class="input"><input placeholder="Authorization Token" id="input_token" name="token" type="text"></div>'';
            $(basicAuthUI).insertBefore(''#api_selector div.input:last-child'');
            $("#input_apiKey").hide();
            $(''#input_token'').change(addAuthorization);
    });

    function addAuthorization() {
        var token = $(''#input_token'').val();

        if (token && token.trim() !== "" ) {
            window.swaggerUi.api.clientAuthorizations.add("api_key", new window.SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + token, "header"));
            console.log("authorization added: Bearer = " + token);
        }
    }

})();

Answer 2

Para enviar el encabezado de autorización con una solicitud mediante la interfaz de usuario de Swagger, necesitaba:

1. Dado el nombre de mi ensamblaje es: My.Assembly y contiene una carpeta: Swagger, donde coloqué mi index.html personalizado, agregué esta línea en SwaggerConfig.cs:

    c.CustomAsset("index", thisAssembly, "My.Assembly.Swagger.index.html");

Tenga en cuenta que index.html carga archivos javascript y css. Tuve que cambiar todos los puntos a trazos en las rutas de archivo para que esos archivos se carguen. No sé por qué tenía que hacerse, pero resolvió el problema de cargar el archivo ...

2. En el archivo index.html modifiqué el

   addApiKeyAuthorization ()

Funciona para verse así:

function addApiKeyAuthorization() {
        var key = encodeURIComponent($(''#input_apiKey'')[0].value);
        if (key && key.trim() != "") {
            var value = "auth-scheme api_key=123456,order_id=56789";
            var authKeyHeader = new SwaggerClient.ApiKeyAuthorization("Authorization", value, "header");
            window.swaggerUi.api.clientAuthorizations.add("Authorization", authKeyHeader);
        }
    }

Nota cambié "consulta" a "encabezado".

3. También descomenté este código:

   var apiKey = "this field represents header but can be anything as long as its not empty";
   $(''#input_apiKey'').val(apiKey);

que mostrará texto en el segundo campo de texto, pero parece que no importa lo que contenga siempre que no esté vacío.

Eso me funcionó y me permitió cargar el archivo index.html personalizado. Ahora estoy buscando habilitar al usuario de Swagger UI para manipular el valor de los parámetros del encabezado ...

Answer 3

para el token de portador, lo he hecho de esa manera: usé swashbuckle solo para generar el archivo swagger.json y usé Swagger.Net para mostrar la última versión de SwaggerUI (3.xx) y personalizarla:

Así que en mis referencias de proyectos, he añadido (a través de nuget):

en index.html:

<input id="bearer-code-input" type="text" placeholder="Enter Bearer Token here" style="width: auto" value="yourtoken" />

luego en SwaggerUIBundle constructor:

const ui = SwaggerUIBundle({
...,
requestInterceptor: function (req) {
req.headers = {
''Authorization'': ''Bearer '' + document.getElementById(''bearer-code-
input'').value
, ''Accept'': ''application/json'',
''Content-Type'': ''application/json''
};
return req;
},
... })

pantalla de resultados:

También he personalizado muchas otras funciones (carpeta de modelos Json, análisis de cadenas de consulta, SwaggerGenerator personalizado para anular el comportamiento predeterminado de ConflictingActionsResolver para poder manejar múltiples rutas, pero no está en el alcance de este hilo)