Habilitación de la autenticación en su propia aplicación web 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. Obtenga información sobre cómo crear una aplicación web 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, reemplazando la aplicación web de ejemplo por su propia aplicación web.

Prerrequisitos

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

Paso 1: Crear un proyecto de aplicación web

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

dotnet new mvc -o mywebapp

El comando anterior hace lo siguiente:

• Crea una nueva aplicación web MVC.
• El -o mywebapp parámetro crea un directorio denominado mywebapp con los archivos de origen de la aplicación.

Paso 2: Agregar las bibliotecas de autenticación

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

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

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

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

Paso 3: Iniciar las bibliotecas de autenticación

El middleware web de identidad de Microsoft 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 Startup.cs y, a continuación, al principio de la clase, agregue las siguientes declaraciones de using:

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 . A continuación, lee la configuración de la AzureAdB2C aplicación e inicia el controlador de middleware con su vista.

Reemplace la ConfigureServices(IServiceCollection services) función 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 Configure función 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();
    });
};

Paso 4: Agregar los elementos de la interfaz de usuario

Para agregar elementos de 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 nuevo archivo, _LoginPartial.cshtml, dentro de la carpeta /Views/Shared con el siguiente fragmento de código:

@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 agregó. El archivo _Layout.cshtml es un diseño común que proporciona a los usuarios una experiencia coherente a medida que pasan de la página a la página. El diseño incluye elementos comunes de la interfaz de usuario, como el encabezado y el pie de página de la aplicación.

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

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

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

<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 Claims acción que creará en el paso siguiente.

Paso 5: Agregar 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 Claims acción que vincula la vista Claims.cshtml al controlador Home . La Claims acción usa el atributo , que limita el Authorize acceso a la acción a los usuarios autenticados.

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

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

Al principio de la clase , agregue la siguiente using declaración:

using Microsoft.AspNetCore.Authorization;

Paso 6: Agregar 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.jsony agregue la siguiente configuración:

"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 de 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).
• Id. de cliente: reemplace <web-app-application-id> por el identificador de aplicación del paso 2.
• Nombre de directiva: reemplace por <your-sign-up-in-policy> los flujos de usuario que creó 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 o 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 devuelve el token de Azure AD B2C 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.