Hola a todos, en esta oportunidad, quiero mostrar paso a paso cómo funciona la autencicación por bearer token en ASPNET Web API, y la forma en que es posible autenticarnos para realizar peticiones sin que sean rechazadas.


Iniciemos, lo primero es crear el proyecto, en este caso, usaremos la plantilla Web API; nos aseguramos que en las referencias este marcado Web API y MVC, y el tipo de autenticación este con Individual User Accounts:

Plantilla autenticación básica

Ahora, si revisamos el controllador ValuesController, este está decorado con el atributo Authorize para solo permitir request de usuarios autenticados:


[Authorize]
public class ValuesController : ApiController
{
    ...
}

En a la vista Index.cshtml vamos a modificar el código para añadir un botón que se encargue de ejecutar una función que haga el llamado al servicio, en este caso la vista quedaría:


<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
    <p><input type="button" id="btnGetData" class="btn btn-primary btn-lg" value="GetData" /></p>
</div>

@section scripts
{
    <script>
        $("#btnGetData").on("click", function() {
            getData();
        });

        function getData() {
            $.ajax({
                url: "/api/values",
                method: "get",
                contentType: "application/json",
                success: function (response) {
                    console.log(response);
                },
                error: function (e) {
                    if (e.status === 401)
                        alert('No autorizado');
                    console.log(e);
                }
            });
        }
    </script>
}

Ahora si ejecutemos, y al hacer el llamado el código de retorno es 401, asociado a Unauthorized (No Autorizado):

Plantilla autenticación básica

Bien, y cómo lo solucionamos? La solución es sencilla, lo primero que se debe hacer es obtener un token para el usuario, y luego, en cada llamado que se haga, debemos enviar ese token, para obtener el token, se debe realizar un llamado a /Token y enviarle el usuario, password y el grant_type como password. Si tienes dudas de donde sale ese /Token, se puede ver en el archivo Startup.Auth.cs, más exactamente en el método ConfigureAuth y en la propiedad TokenEndpointPath:

Plantilla autenticación básica

Ahora es momento de cambiar el llamado que tenemos, lo primero que se debe hacer es obtener el token, y una vez tenemos el token, se debe agregar el header Authorization con el valor Bearer + el token generado, also como:

Authorization: Bearer 345678yrtuu8676


Implementado la obtención del token, el código quedaría:


$("#btnGetData").on("click", function() {
    getToken();
});

function getToken() {
    var data = { username: "julito@gmail.com", password: "Pass1234567*", grant_type: "password" }
    $.ajax({
        url: "/Token",
        method: "post",
        data: data,
        contentType: "application/json",
        error: function (e) {
            alert('Error obteniendo el token del usuario');
            console.log(e);
        },
        success: function (response) {
            console.log(response.access_token);
            getData(response.access_token);
        }
    });
}

function getData(token) {
    $.ajax({
        url: "/api/values",
        method: "get",
        headers: { "Authorization": "Bearer " + token },
        contentType: "application/json",
        success: function (response) {
            console.log(response);
        },
        error: function (e) {
            if (e.status === 401)
                alert('No autorizado');
            console.log(e);
        }
    });
}

Y ahora, revisando las peticiones, la primera que se realiza obtiene el token para el usuario:

Obtener Token

Y la siguiente petición al servicio que en este caso ya no es rechazada:

Petición con Token

Y hemos terminado, espero el post les sea interesante y no se olviden de compartirlo, saludos!