Cuándo trabajamos en ambientes de microservicios, o al menos con distintas APIs, que están protegidos utilizando Azure AD B2C, es necesario que el Front End pueda interactuar con las APIs.

Hoy veremos los pasos necesarios para integrar los tres componentes y tener así nuestro ecosistema de servicios integrados y protegidos con Azure AD B2C.

IMPORTANTE: para poder implementar los pasos aquí mencionados es necesario contar con una configuración básica en Azure AD B2C. Podrás encontrarlos en el siguiente paso a paso.

Antes de Comenzar

En este tutorial vamos a utilizar .Net 5 como marco o framework de desarrollo, con lo cual es un requisito excluyente tener instalado .Net 5 SDK. Si aún no lo tienes, lo puedes descargar aquí, también encontrarás un instructivo paso a paso en caso de que tengas dudas.

Por otro lado, vamos a utilizar Visual Studio 2019 Community Edition, sin embargo este no es un requerimiento excluyente ya que podemos utilizar cualquier editor de texto o ambiente de desarrollo como Visual Studio Code o Notepad++. Puedes descargar Visual Studio 2019 aquí.

Contexto

En los últimos años ha proliferado mucho el desarrollo de aplicaciones compuestas por módulos o APIs independientes del Front End, favoreciendo así la escalabilidad y adaptabilidad a los cambios.

Por supuesto que esto genera un nuevo desafío: Integrar Front Ends y APIs de forma fácil y simple.

Requerimiento

Por un lado tenemos una aplicación Web MVC .Net 5 integrada con Azure AD B2C, por el otro lado tenemos una aplicación Web API .Net 5 que sólo acepta peticiones de usuarios que hayan sido autenticados por Azure AD B2C.

Necesitamos realizar los cambios necesarios para que nuestra aplicación MVC pueda comunicarse con nuestra API.

Solución

Nuestra API solo acepta peticiones de usuarios autenticados por Azure AD B2C, para esto utiliza JWT tokens. Estos tokens contienen la información suficiente para asegurar que se trata de un usuario legítimo.

La API espera recibir con cada petición una cabecera o header de autenticación incluyendo un JWT token emitido por Azure AD B2C.

La solución consiste en configurar los mecanismos necesarios para que la aplicación MVC pueda generar JWT tokens en nombre del usuario y así hacer las peticiones a la API en forma correcta.

Paso 1: Preparar la aplicación Web MVC

Lo primero que haremos es preparar nuestra aplicación Web MVC para mostrar los resultados obtenidos de la API, esto implica crear un Modelo de Vista o View Model, un Controlador y una Vista..

Modelo de Vista o View Model

Para poder mostrar el resultado obtenido de la API necesitamos un View Model, para lo cuál crearemos una nueva clase llamada WeatherForecastViewModel.cs bajo el directorio Models:

public class WeatherForecastViewModel
{
    public DateTime Date { get; set; }

    public int TemperatureC { get; set; }

    public int TemperatureF { get; set; }

    public string Summary { get; set; }
}

El View Model que acabamos de crear se corresponde a la plantilla que utiliza Visual Studio por defecto.

Controlador

Por el momento el controlador tendrá la tarea de comunicarse con la API y devolver los resultados a la vista. Los pasos son los siguientes:

  1. Hacer la petición a la API
  2. Leer y deserializar el resultado
  3. Devolver el resultado a la vista.

Crearemos un nuevo Controlador llamado WeatherController dentro del directorio Controllers. Este controlador tendrá una sola acción:

public class WeatherController : Controller
{
    private readonly HttpClient _httpClient;

    public WeatherController(HttpClient httpClient) =>
        _httpClient = httpClient;

    public async Task<IActionResult> Index()
    {
        var response = await _httpClient.GetAsync("https://localhost:5002/weatherforecast");
        var content = await response.Content.ReadAsStringAsync();
        var values = JsonConvert.DeserializeObject<IEnumerable<WeatherForecastViewModel>>(content);

        return View(values);
    }
}

Debido a que la API está protegida, este controlador todavía no va a funcionar. Modificaremos en los próximos pasos el controlador para poder realizar la interacción con la API en forma exitosa.

Además de incluir algunos usings que serán sugeridos por Visual Studio, es necesario instalar un paquete adicional para la deserialización: Newtonsoft.Json.

Vista

Para mostrar los resultados crearemos una nueva vista llamada Index.cshtml, pero antes debemos crear un nuevo directorio llamado Weather dentro del directorio Views.

Directorio de vistas
Directorio de vistas

El código de la vista estará compuesto simplemente por una tabla mostrando los resultados obtenidos en el controlador.

@model IEnumerable<WeatherForecastViewModel>
@{
    ViewData["Title"] = "Weather";
}

<h1>Weather</h1>
<table class="table">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.Date)</th>
            <th>@Html.DisplayNameFor(model => model.TemperatureC)</th>
            <th>@Html.DisplayNameFor(model => model.TemperatureF)</th>
            <th>@Html.DisplayNameFor(model => model.Summary)</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.Date)</td>
                <td>@Html.DisplayFor(modelItem => item.TemperatureC)</td>
                <td>@Html.DisplayFor(modelItem => item.TemperatureF)</td>
                <td>@Html.DisplayFor(modelItem => item.Summary)</td>
            </tr>
        }
    </tbody>
</table>

Como último paso debemos agregar un acceso directo a esta nueva vista en la cabecera general.

Para esto agregaremos uno nuevo elemento a la sección Header de la vista compartida llamada _Layout.cshtml que se encuentra dentro del directorio Views/Shared:

<ul class="navbar-nav flex-grow-1">
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-controller="Weather" asp-action="Index">Weather</a>
    </li>
</ul>
<partial name="_LoginPartial" />

En este punto ya tenemos la vista preparada, si ejecutamos el proyecto MVC deberíamos ver una nueva entrada en la cabecera. Sin embargo, si intentamos navegar hasta esta nueva vista, obtendremos un error.

Este error se debe a que todavía, nuestra aplicación no puede generar el token necesario para interactuar con la API.

Pantalla de bienvenida
Pantalla de bienvenida

Paso 2: Configuración en Azure AD B2C

Hasta el momento configuramos en nuestro tenant de Azure AD B2C un registro de aplicación para la aplicación MVC y otro registro de aplicación para la API.

Además, cuando registramos la API creamos un ámbito o scope llamado Lector que se ve asi:

https://linkedinazureadb2c.onmicrosoft.com/posts/Lector

Bien, ahora necesitamos configurar nuestra aplicación MVC en Azure AD B2C para que pueda solicitar JWT tokens incluyendo el scope de la API. Para esto necesitamos realizar lo siguiente:

  1. Generar un secreto de cliente o client secret
  2. Asignar permisos para utilizar el scope

Generar secreto de cliente

Para generar un secreto tenemos que ir al registro de aplicación correspondiente a la aplicación MVC, y luego en sección Certificados y secretos crear un nuevo secreto de cliente.

Certificados y secretos
Certificados y secretos

Sólo necesitamos darle una descripción, podemos dejar el campo Expiración en su valor por defecto que es de 6 meses. Una vez creado, podremos obtener el valor creado por Azure desde la de secretos utilizando el botón para copiar.

El valor del secreto solo se puede ver y/o copiar por única vez al momento de su creación. Es importante tomar nota del mismo o tendremos que crear uno nuevo.

Asignar permisos para utilizar el scope

Desde el registro de aplicación MVC iremos a la sección Permisos de API y agregaremos un nuevo permiso.

Agregar permiso de API
Agregar permiso de API

Luego navegamos a la pestaña Mis API y seleccionamos del listado la API que habíamos creado para proteger nuestra Web API .Net 5.

Finalmente seleccionamos el permiso Lector que creamos cuando creamos el scope y agregamos el permiso.

Como último paso para terminar de dar los permisos necesarios es conceder consentimiento de administrador. Desde la misma sección de Permisos de API veremos el nuevo permiso pero en estado No concedido.

Concedemos el permiso y terminamos. El icono pasara de naranja a verde como se muestra en la imagen con los otros permisos.

Conceder consentimiento de administrador
Conceder consentimiento de administrador

Paso 3: Configurar aplicación Web MVC

Habiendo realizado todas las configuraciones pertinentes en torno a Azure AD B2C, podemos proceder con la configuración de la aplicación MVC.

Comenzaremos agregando el secreto de cliente que configuramos en el paso anterior al archivo appsettings.json, dentro de la sección "AzureAdB2C".

"AzureAdB2C": {
  "Instance": "https://linkedinazureadb2c.b2clogin.com",
  "ClientId": "00000000-0000-0000-0000-000000000000",
  "Domain": "linkedinazureadb2c.onmicrosoft.com",
  "SignUpSignInPolicyId": "B2C_1_InicioSesionConRegistro",
  "ClientSecret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}

Finalmente debemos configurar los servicios necesarios para poder generar los JWT tokens necesarios y así poder interactuar con la API.

Para esto, en el método ConfigureServices de la clase Startup.cs utilizaremos los métodos de extensión EnableTokenAcquisitionToCallDownstreamApi() indicando la lista de scopes habilitados y AddInMemoryTokenCaches().

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews()
        .AddMicrosoftIdentityUI();

    services.AddMicrosoftIdentityWebAppAuthentication(Configuration, "AzureAdB2C")
        .EnableTokenAcquisitionToCallDownstreamApi(new string[] { "https://linkedinazureadb2c.onmicrosoft.com/posts/Lector" })
        .AddInMemoryTokenCaches();

    services.AddRazorPages();
}

Paso 4: Generar JWT tokens

En el paso anterior configuramos los servicios necesarios para poder generar los JWT tokens que necesitamos incluir en las peticiones a nuestra API.

Uno de esos servicios es ITokenAcquisition, el cuál nos habilita una serie de métodos para obtener de forma muy sencilla distintos tipos de JWT tokens.

Comenzaremos recibiendo en el constructor del controlador mediante inyección de dependencias el servicio y guardándolo en una variable local. Tendremos que agregar la referencia a Microsoft.Identity.Web en la lista de usings.

private readonly HttpClient _httpClient;
private readonly ITokenAcquisition _tokenAcquisition;

public WeatherController(
    ITokenAcquisition tokenAcquisition,
    HttpClient httpClient)
{
    _httpClient = httpClient;
    _tokenAcquisition = tokenAcquisition;
}

Luego modificaremos la acción Index() del controlador. Utilizaremos el método GetAccessTokenForUserAsync() del servicio ITokenAcquisition para obtener un JWT token en nombre del usuario actual indicando la lista de scopes que queremos incluir.

Por último, solo necesitamos incluir el token como nuevo header de autenticación en la petición a la API.

public async Task<IActionResult> Index()
{
    var accessToken = await _tokenAcquisition.GetAccessTokenForUserAsync(new[] { "https://linkedinazureadb2c.onmicrosoft.com/posts/Lector" });
    _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", accessToken);
    _httpClient.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

    var response = await _httpClient.GetAsync("https://localhost:5002/weatherforecast");
    var content = await response.Content.ReadAsStringAsync();
    var values = JsonConvert.DeserializeObject<IEnumerable<WeatherForecastViewModel>>(content);

    return View(values);
}

Paso 5: Pruebas

Si llegamos a este punto y no hemos olvidado ningún paso ni configuración, estamos listos para compilar y ejecutar la solución.

Luego de iniciar sesión, podemos verificar que todo funcione correctamente haciendo clic en la nueva acción disponible en la cabecera. Deberíamos ver el resultado devuelto por la API en forma de tabla.

Resultado en forma de tabla
Resultado en forma de tabla

Si intentamos acceder a la vista sin haber iniciado sesión obtendremos una excpción del tipo MsalUiRequiredException.

Es nuestra responsabilidad detectar este escenario y redireccionar al usuario a la pantalla de inicio de sesión.

Conclusión

Con este post hemos completado una integración completa de una aplicación Web MVC, una Web API y Azure AD B2C, y vimos que es muy simple e intuitivo la forma en que los tres componentes se integran.

Gracias a las librerías Microsoft.Identity.Web y Microsoft.Identity.Web.UI podemos escribir muy poco código y reducir así el esfuerzo y tiempo necesarios.

Podrás encontrar el código completo en mi GitHub.