Habilitación de la autenticación en una aplicación web propia mediante Azure AD B2C

En este artículo se muestra cómo agregar la autenticación de Azure Active Directory B2C (Azure AD B2C) a su propia aplicación web de ASP.NET. Aprenda a crear una aplicación web de ASP.NET Core con middleware de ASP.NET Core que usa el protocolo OpenID Connect.

Use este artículo junto con Configuración de la autenticación en una aplicación web de ejemplo y sustituya la aplicación web de ejemplo por una propia.

Prerrequisitos

Para revisar los requisitos previos y las instrucciones de integración, vea Configuración de la autenticación en una aplicación web de ejemplo.

Paso 1: Creación de un proyecto de aplicación web

Puede usar un proyecto existente de aplicación web Modelo-Vista-Controlador (MVC) de ASP.NET o crear uno. Para crear un proyecto, abra un shell de comandos y escriba el comando siguiente:

dotnet new mvc -o mywebapp

El comando anterior hace lo siguiente:

• Crea una aplicación web MVC.
• El parámetro -o mywebapp crea un directorio llamado mywebapp con los archivos de código fuente de la aplicación.

Paso 2: Adición de las bibliotecas de autenticación

Agregue la biblioteca Microsoft Identity Web, que es un conjunto de bibliotecas de ASP.NET Core que simplifican la adición de la compatibilidad con la autenticación y la autorización de Azure AD B2C en la aplicación web. La biblioteca Microsoft Identity Web configura la canalización de autenticación con la autenticación basada en cookies. Se encarga de enviar y recibir mensajes de autenticación HTTP, la validación de tokens, la extracción de notificaciones, etc.

Para agregar la biblioteca Microsoft Identity Web, instale los paquetes mediante la ejecución de los siguientes comandos:

Visual Studio

dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI

Visual Studio Code

Install-Package Microsoft.Identity.Web
Install-Package Microsoft.Identity.Web.UI 

Paso 3: Inicio de las bibliotecas de autenticación

El middleware Microsoft Identity Web usa una clase de inicio que se ejecuta cuando se inicia el proceso de hospedaje. En este paso, agregará el código necesario para iniciar las bibliotecas de autenticación.

Abra el archivo Startup.cs y, a continuación, agregue las siguientes declaraciones using al principio de la clase:

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;

Dado que Microsoft Identity Web usa la autenticación basada en cookies para proteger la aplicación web, el código siguiente establece la configuración de cookies SameSite. Después, lee la configuración de la aplicación AzureAdB2C e inicia el controlador de middleware con su vista.

Reemplace la función ConfigureServices(IServiceCollection services) por el siguiente fragmento de código:

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<CookiePolicyOptions>(options =>
    {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.Unspecified;
        // Handling SameSite cookie according to https://learn.microsoft.com/aspnet/core/security/samesite?view=aspnetcore-3.1
        options.HandleSameSiteCookieCompatibility();
    });

    // Configuration to sign-in users with Azure AD B2C
    services.AddMicrosoftIdentityWebAppAuthentication(Configuration, "AzureAdB2C");

    services.AddControllersWithViews()
        .AddMicrosoftIdentityUI();

    services.AddRazorPages();

    //Configuring appsettings section AzureAdB2C, into IOptions
    services.AddOptions();
    services.Configure<OpenIdConnectOptions>(Configuration.GetSection("AzureAdB2C"));
}

El código siguiente agrega la directiva de cookies y usa el modelo de autenticación. Reemplace la función Configure por el siguiente fragmento de código:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    // Add the Microsoft Identity Web cookie policy
    app.UseCookiePolicy();
    app.UseRouting();
    // Add the ASP.NET Core authentication service
    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        
        // Add endpoints for Razor pages
        endpoints.MapRazorPages();
    });
};

Pas 4: Adición de elementos de la interfaz de usuario

Para agregar elementos de la interfaz de usuario, use una vista parcial que contenga lógica para comprobar si los usuarios han iniciado sesión. Si los usuarios no han iniciado sesión, la vista parcial representa el botón de inicio de sesión. Si han iniciado sesión, se muestra el nombre para mostrar del usuario y el botón de cierre de sesión.

Cree un archivo _LoginPartial.cshtml dentro de la carpeta /Views/Shared con el fragmento de código siguiente:

@using System.Security.Principal
@if (User.Identity.IsAuthenticated)
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-text">Hello @User.Identity.Name</li>
        <!-- The Account controller is not defined in this project. Instead, it is part of Microsoft.Identity.Web.UI nuget package and
            it defines some well known actions such as SignUp/In, SignOut and EditProfile-->
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="EditProfile">
                <button type="submit" class="btn btn-primary" style="margin-right:5px">Edit Profile</button>
            </form>
        </li>
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">
                <button type="submit" class="btn btn-primary">Sign Out</button>
            </form>
        </li>
    </ul>
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">
                <button type="submit" class="btn btn-primary">Sign Up/In</button>
            </form>
        </li>
    </ul>
}

Modifique el archivo /Views/Shared_Layout.cshtml para incluir el archivo _LoginPartial.cshtml que ha agregado. El archivo _Layout.cshtml es un diseño común que proporciona a los usuarios una experiencia coherente a medida que navegan entre páginas. El diseño incluye elementos comunes de la interfaz de usuario, como el encabezado y el pie de página de la aplicación.

Nota:

En función de la versión de .NET Core que ejecute y de si va a agregar el inicio de sesión a una aplicación existente, los elementos de la interfaz de usuario podrían tener otro aspecto. Si es así, asegúrese de incluir _LoginPartial en la ubicación adecuada dentro del diseño de página.

Abra el archivo /Views/Shared/_Layout.cshtml y agregue el siguiente elemento div.

<div class="navbar-collapse collapse">
...
</div>

Reemplace este elemento con el siguiente código de Razor:

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
    <li><a asp-area="" asp-controller="Home" asp-action="Claims">Claims</a></li>
  </ul>
  <partial name="_LoginPartial" />
</div>

El código de Razor anterior incluye un vínculo a la acción Claims que creará en el paso siguiente.

Paso 5: Adición de la vista de notificaciones

Para ver las notificaciones del token de identificador en la carpeta /Views/Home, agregue la vista Claims.cshtml.

@using System.Security.Claims

@{
  ViewData["Title"] = "Claims";
}
<h2>@ViewData["Title"].</h2>

<table class="table-hover table-condensed table-striped">
  <tr>
    <th>Claim Type</th>
    <th>Claim Value</th>
  </tr>

  @foreach (Claim claim in User.Claims)
  {
    <tr>
      <td>@claim.Type</td>
      <td>@claim.Value</td>
    </tr>
  }
</table>

En este paso, agregará la acción Claims que vincula la vista Claims.cshtml al controlador Home. El atributo Claims usa el atributo Authorize, que limita el acceso a la acción para los usuarios autenticados.

En el controlador /Controllers/HomeController.cs, agregue la siguiente acción:

[Authorize]
public IActionResult Claims()
{
    return View();
}

Agregue la siguiente declaración using al inicio de la clase:

using Microsoft.AspNetCore.Authorization;

Paso 6: Adición de la configuración de la aplicación

La configuración del proveedor de identidades de Azure AD B2C se almacena en el archivo appsettings.json. Abra appsettings.json y agregue los valores siguientes:

"AzureAdB2C": {
  "Instance": "https://<your-tenant-name>.b2clogin.com",
  "ClientId": "<web-app-application-id>",
  "Domain": "<your-b2c-domain>",
  "SignedOutCallbackPath": "/signout-oidc",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

La información necesaria se describe en el artículo Configuración de la autenticación en una aplicación web de ejemplo. Use la configuración siguiente:

• Instancia: reemplace <your-tenant-name> por la primera parte del nombre del inquilino de Azure AD B2C (por ejemplo, https://contoso.b2clogin.com).
• Dominio: reemplace <your-b2c-domain> por el nombre completo del inquilino de Azure AD B2C (por ejemplo, contoso.onmicrosoft.com).
• Identificador de cliente: reemplace <web-app-application-id> por el identificador de la aplicación del paso 2.
• Nombre de directiva: reemplace <your-sign-up-in-policy> por los flujos de usuario que ha creado en el paso 1.

Paso 7: Ejecución de la aplicación

1. Compile y ejecute el proyecto.
2. Ir a https://localhost:5001.
3. Seleccione Registrarse/Iniciar sesión.
4. Complete el proceso de inicio de sesión o registro.

Después de autenticarse correctamente, verá el nombre para mostrar en la barra de navegación. Para ver las notificaciones que el token de Azure AD B2C devuelve a la aplicación, seleccione Notificaciones.

Pasos siguientes

• Obtenga información sobre cómo personalizar y mejorar la experiencia de autenticación de Azure AD B2C para la aplicación web.