Autenticación en la nube Azure Active Directory B2C en ASP.NET Core

Artículo
11/06/2024

Azure Active Directory B2C (AZure AD B2C) es una solución de administración de identity en la nube para aplicaciones móviles y web. El servicio proporciona autenticación para las aplicaciones hospedadas en la nube y en el entorno local. Los tipos de autenticación incluyen cuentas individuales, cuentas de red social y cuentas empresariales federadas. Además, Azure AD B2C puede proporcionar autenticación multifactor con una configuración mínima.

Sugerencia

Microsoft Entra ID, Id. externa de Microsoft Entra y Azure AD B2C son ofertas de productos independientes. Un inquilino de Entra ID suele representar una organización, mientras que un inquilino de Azure AD B2C o un inquilino de Id. externa de Microsoft Entra puede representar una colección de identidades que se van a usar con aplicaciones de usuario de confianza. Para más información, consulte Azure AD B2C: Preguntas más frecuentes (P+F).

Sugerencia

Id. externa de Microsoft Entra para clientes es la nueva solución de administración de identity y acceso para clientes (CIAM) de Microsoft.

En este tutorial, aprenderá a configurar una aplicación de ASP.NET Core para la autenticación con Azure AD B2C.

Prerrequisitos

Una cuenta de Azure con una suscripción activa. Cree una cuenta gratuita.
.NET SDK. Instale la versión más reciente del SDK de .NET para la plataforma.

Preparación

Crear un inquilino de Azure Active Directory B2C.
Cree una nueva aplicación de páginas ASP.NET Core Razor:
```
dotnet new razor -o azure-ad-b2c
```
El comando anterior crea una aplicación de páginas Razor en un directorio denominado azure-ad-b2c.

Sugerencia

Es posible que prefiera usar Visual Studio para crear la aplicación.
Cree un registro de aplicación web en el inquilino. Para Redirect URI, utilicehttps://localhost:5001/signin-oidc. Reemplace 5001 por el puerto usado por la aplicación al usar puertos generados por Visual Studio.

Modificar la aplicación

Agregue los paquetes Microsoft.Identity.Web y Microsoft.Identity.Web.UI al proyecto. Si utiliza Visual Studio, puede usar el Administrador de paquetes NuGet.
```
dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI
```
En el anterior:
- Microsoft.Identity.Web incluye el conjunto básico de dependencias para autenticarse con la plataforma Microsoft identity .
- Microsoft.Identity.Web.UI incluye la funcionalidad de interfaz de usuario encapsulada en un área denominada MicrosoftIdentity.

Agregue un AzureADB2C objeto a appsettings.json.

Nota:

Al usar flujos de usuario de Azure B2C, debe establecer la instancia y el PolicyId del tipo de flujo.

{
  "AzureADB2C": {
    "Instance": "https://--your-domain--.b2clogin.com",
    "Domain": "[Enter the domain of your B2C tenant, e.g. contoso.onmicrosoft.com]",
    "TenantId": "[Enter 'common', or 'organizations' or the Tenant Id (Obtained from the Azure portal. Select 'Endpoints' from the 'App registrations' blade and use the GUID in any of the URLs), e.g. da41245a5-11b3-996c-00a8-4d99re19f292]",
    "ClientId": "[Enter the Client Id (Application ID obtained from the Azure portal), e.g. ba74781c2-53c2-442a-97c2-3d60re42f403]",
    // Use either a secret or a certificate. ClientCertificates are recommended.
    "ClientSecret": "[Copy the client secret added to the app from the Azure portal]",
    "ClientCertificates": [
    ],
    // the following is required to handle Continuous Access Evaluation challenges
    "ClientCapabilities": [ "cp1" ],
    "CallbackPath": "/signin-oidc",
    // Add your policy here
    "SignUpSignInPolicyId": "B2C_1_signup_signin",
    "SignedOutCallbackPath": "/signout-callback-oidc"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

En Dominio, use el dominio del inquilino de Azure AD B2C.
En ClientId, use el identificador de aplicación (cliente) del registro de la aplicación que creó en el inquilino.
En Dominio, use el dominio del inquilino de Azure AD B2C.
Para SignUpSignInPolicyId, use la directiva de flujo de usuario definida en el inquilino de Azure B2C
Use la configuración ClientSecret o ClientCertificates . Se recomiendan clientCertificates.
Deje todos los demás valores tal como están.

En Pages/Shared, cree un archivo denominado _LoginPartial.cshtml. Incluya el código siguiente:

@using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity?.IsAuthenticated == true)
{
        <span class="navbar-text text-dark">Hello @User.Identity?.Name!</span>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">Sign out</a>
        </li>
}
else
{
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">Sign in</a>
        </li>
}
</ul>

El código anterior:

Comprueba si el usuario está autenticado.
Representa un vínculo Cerrar sesión o Iniciar sesión según corresponda.
- El vínculo apunta a un método de acción en el Account controlador del MicrosoftIdentity área.

En Pages/Shared/_Layout.cshtml, agregue la línea resaltada dentro del <header> elemento :

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-page="/Index">azure_ad_b2c</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                </ul>
                <partial name="_LoginPartial" />
            </div>
        </div>
    </nav>
</header>

Agregar <partial name="_LoginPartial" /> representa la _LoginPartial.cshtml vista parcial en cada solicitud de página que usa este diseño.

En Program.cs, realice los cambios siguientes:
1. Agregue las siguientes directivas using:
```
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
```
  El código anterior resuelve las referencias usadas en los pasos siguientes.
2. Actualice builder.Services con el código siguiente:
```
builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
        .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureADB2C"));

builder.Services.AddAuthorization(options =>
{
    // By default, all incoming requests will be authorized according to 
    // the default policy
    options.FallbackPolicy = options.DefaultPolicy;
});
builder.Services.AddRazorPages(options => {
    options.Conventions.AllowAnonymousToPage("/Index");
})
.AddMvcOptions(options => { })
.AddMicrosoftIdentityUI();
```
  En el código anterior:
  - Las llamadas a los métodos AddAuthentication y AddMicrosoftIdentityWebApp configuran la aplicación para utilizar Open ID Connect, configurado específicamente para la plataforma identity Microsoft.
  - AddAuthorization inicializa ASP.NET Core autorización.
  - La AddRazorPages llamada configura la aplicación para que los exploradores anónimos puedan ver la página Índice. Todas las demás solicitudes requieren autenticación.
  - AddMvcOptions y AddMicrosoftIdentityUI agregue los componentes de interfaz de usuario necesarios para redirigir hacia y desde Azure AD B2C.
3. Actualice la línea resaltada al Configure método :
```
app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

app.MapRazorPages();
```
  El código anterior habilita la autenticación en ASP.NET Core.

Ejecutar la aplicación

Nota

Utilice el perfil que coincida con los URI de redirección de registro de Azure App

Ejecutar la aplicación.
```
dotnet run --launch-profile https
```
Vaya al punto de conexión seguro de la aplicación, por ejemplo, https://localhost:5001/.
- La página Índice se representa sin ningún desafío de autenticación.
- El encabezado incluye un vínculo de inicio de sesión porque no está autenticado.
Seleccione el vínculo Privacy.
- El explorador se redirige al método de autenticación configurado del inquilino.
- Después de iniciar sesión, el encabezado muestra un mensaje de bienvenida y un vínculo Cerrar sesión .

Pasos siguientes

En este tutorial, ha aprendido a configurar una aplicación de ASP.NET Core para la autenticación con Azure AD B2C.

Ahora que la aplicación ASP.NET Core está configurada para usar Azure AD B2C para la autenticación, el atributo Authorize se puede usar para proteger la aplicación. Siga desarrollando la aplicación aprendiendo a:

Personalización de la interfaz de usuario en un flujo de usuario de Azure AD B2C.
Configuración de los requisitos de complejidad de las contraseñas.
Habilitar Multi-Factor Authentication.
Configura proveedores de identity adicionales, como Microsoft, Facebook, Google, Amazon, Twitter, y otros.
Use la API de Microsoft Graph para recuperar información de usuario adicional, como la pertenencia a grupos, del inquilino de Azure AD B2C.
Protección de una API web compilada con ASP.NET Core mediante Azure AD B2C.
Tutorial: Concesión de acceso a una API web de ASP.NET mediante Azure Active Directory B2C.

Compartir vía