Compartir vía

Tutorial: Adición de inicio de sesión a una aplicación

  • Artículo

En el tutorial anterior, se creó y configuró un proyecto de ASP.NET Core para la autenticación. En este tutorial se instalarán los paquetes necesarios y se agregará el código que implementa la autenticación en la experiencia de inicio de sesión y cierre de sesión.

En este tutorial, aprenderá a:

  • Se identifican e instalan los paquetes NuGet necesarios para la autenticación
  • Se implementa la autenticación en el código
  • Se agregan las experiencias de inicio y cierre de sesión

Prerrequisitos

Instalación de paquetes de identidad

Los paquetes NuGet relacionados con la identidad deben instalarse en el proyecto para que se habilite la autenticación de los usuarios.

  1. En el menú superior de Visual Studio, seleccione Herramientas> Administrador de paquetes NuGet > Administrar paquetes NuGet para la solución.
  2. Con la pestaña Examinar seleccionada, busque y seleccione Microsoft.Identity.Web.UI. Seleccione la casilla Proyecto y, después, seleccione Instalar.
  3. Repita esto para Microsoft.Identity.Web.Diagnostics y Microsoft.Identity.Web.DownstreamApi.

Implementación de la autenticación y adquisición de tokens

  1. Abra Program.cs y sustituya todo el contenido del archivo por el fragmento de código siguiente:

    // <ms_docref_import_types>
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc.Authorization;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;
// </ms_docref_import_types>

// <ms_docref_add_msal>
WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
IEnumerable<string>? initialScopes = builder.Configuration["DownstreamApi:Scopes"]?.Split(' ');


builder.Services.AddMicrosoftIdentityWebAppAuthentication(builder.Configuration, "AzureAd")
    .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
        .AddDownstreamApi("DownstreamApi", builder.Configuration.GetSection("DownstreamApi"))
        .AddInMemoryTokenCaches();
// </ms_docref_add_msal>

// <ms_docref_add_default_controller_for_sign-in-out>
builder.Services.AddRazorPages().AddMvcOptions(options =>
    {
        var policy = new AuthorizationPolicyBuilder()
                      .RequireAuthenticatedUser()
                      .Build();
        options.Filters.Add(new AuthorizeFilter(policy));
    }).AddMicrosoftIdentityUI();
// </ms_docref_add_default_controller_for_sign-in-out>

// <ms_docref_enable_authz_capabilities>
WebApplication app = builder.Build();

app.UseAuthentication();
app.UseAuthorization();
// </ms_docref_enable_authz_capabilities>

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

app.UseRouting();

app.MapRazorPages();
app.MapControllers();

app.Run();

Agregar la experiencia de inicio y de cierre de sesión

Después de instalar los paquetes NuGet y agregar el código necesario para la autenticación, agregue las experiencias de inicio y cierre de sesión.

Creación del archivo _LoginPartial.cshtml

  1. Expanda Páginas, haga clic con el botón derecho en Compartido y, luego, seleccione Agregar > Página de Razor.
  2. Seleccione Página de Razor: vacío y, luego, seleccione Agregar.
  3. Ingrese _LoginPartial.cshtml como nombre y, luego, seleccione Agregar.

Edición del archivo _LoginPartial.cshtml

  1. Abra _LoginPartial.cshtml y agregue el código siguiente para agregar la experiencia de inicio y cierre de sesión:

    @using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity?.IsAuthenticated == true)
{
        <li class="nav-item">
            <span class="navbar-text text-dark">Hello @User.Identity?.Name!</span>
        </li>
        <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>

  2. Abra _Layout.cshtml y agregue una referencia al archivo _LoginPartial creado en el paso anterior. Esta sola línea debe colocarse entre </ul> y </div>:

        </ul>
    <partial name="_LoginPartial" />
</div>

Pasos siguientes

Tutorial: Llamar a una API y mostrar los resultados