Compartir a través de

Tutorial: Incorporar el inicio de sesión y cierre de sesión a una aplicación web de ASP.NET Core para un inquilino externo

  • Artículo

Este tutorial es la última parte de una serie que muestra cómo crear una aplicación web de ASP.NET Core y prepararla para la autenticación mediante el Centro de administración de Microsoft Entra. En la parte 2 de esta serie, creó un proyecto de ASP.NET Core en Visual Studio Code y lo configuró para la autenticación. En este paso final, agregará experiencias de inicio y cierre de sesión e iniciará y cerrará la sesión en la aplicación.

En este tutorial, aprenderás lo siguiente;

  • Agregar experiencias de inicio y cierre de sesión
  • Agregar código para ver las notificaciones de tokens de identificación
  • Iniciar y cerrar sesión en la aplicación utilizando el flujo de usuario

Requisitos previos

Agregar la experiencia de inicio y cierre de sesión

Después de instalar los paquetes NuGet y agregar el código necesario para la autenticación, es necesario agregar las experiencias de inicio y cierre de sesión. El código lee las notificaciones del token de id. para comprobar que el usuario está autenticado y usa User.Claims para extraer las notificaciones de token de id.

  1. En el IDE, vaya a Views/Shared y cree un archivo con el nombre _LoginPartial.cshtml.

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

    @using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity is not null && User.Identity.IsAuthenticated)
{
        <li class="nav-item">
            <span class="nav-link text-dark">Hello @User.Claims.First(c => c.Type == "preferred_username").Value!</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>

  3. A continuación, agregue una referencia a _LoginPartial en el archivo Layout.cshtml que se encuentra en la misma carpeta. Se recomienda colocar esto después de la clase navbar-collapse como se muestra en el siguiente fragmento de código:

    <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
    <partial name="_LoginPartial" />
</div>

Visualizar notificaciones de token de id

La aplicación web ahora se configuró para que los usuarios inicien sesión con la plataforma de identidad de Microsoft. El siguiente paso es agregar un código que nos permita ver las reclamaciones del token de ID. La aplicación verificará que el usuario esté autenticado usando User.Identity.IsAuthenticated, y enumerará las notificaciones del tokens de ID recorriendo cada elemento en User.Claims, devolviendo su Type y Value.

  1. Abra Views/Home/Index.cshtml y reemplace el contenido del archivo por el fragmento de código siguiente:

    @{
ViewData["Title"] = "Home Page";
}

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        text-align: justify;
        padding: 8px;
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd;
    }
</style>

<div class="text-center">
    <h1 class="display-4">Welcome</h1>

    @if (@User.Identity is not null && @User.Identity.IsAuthenticated)
    {
        <p>You are signed in! Below are the claims in your ID token. For more information, visit: <a href="https://learn.microsoft.com/azure/active-directory/develop/id-tokens">Microsoft identity platform ID tokens</a></p>
        <table>
            <tbody>

                @foreach (var item in @User.Claims)
                {
                    <tr>
                        <td>@item.Type</td>
                        <td>@item.Value</td>
                    </tr>
                }
            </tbody>
        </table>
    }

    <br />
    <p>Learn about <a href="https://learn.microsoft.com/azure/active-directory/develop/v2-overview">building web apps with Microsoft identity platform</a>.</p>
</div>

Iniciar sesión en la aplicación

  1. Inicie la aplicación escribiendo lo siguiente en el terminal para iniciar el perfil https en el archivo launchSettings.json.

    dotnet run --launch-profile https

  2. Abre un nuevo navegador privado e introduce el URI de la aplicación en el explorador, en este caso https://localhost:7274.

  3. Para probar el flujo de registro de usuarios que configuraste anteriormente, selecciona ¿No tienes cuenta? Crea una.

  4. En la ventana Crear cuenta, escriba la dirección de correo electrónico registrada en el inquilino externo. Esto iniciará el flujo de registro como usuario para la aplicación.

  5. Después de escribir un código de acceso de un solo uso desde el inquilino externo, escriba una nueva contraseña e introduzca los detalles de la cuenta. Con esto ha completado el flujo de registro.

    1. Si aparece una ventana que pide que Permanezca conectado, elija Sí o No.

  6. La página principal de ASP.NET Core aparece en el explorador como se muestra en la captura de pantalla siguiente:

    Captura de pantalla del inicio de sesión en una aplicación web de ASP.NET Core.

Cierre de sesión de la aplicación

  1. Para cerrar la sesión de la aplicación, seleccione Cerrar sesión en la barra de navegación.
  2. Aparece una ventana en la que se pregunta en qué cuenta quiere cerrar sesión.
  3. Tras cerrar sesión correctamente, aparece una ventana final que aconseja cerrar todas las ventanas del explorador.

Consulte también