Español
  • asp-net-core
  • c-sharp
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

Cree la autenticación de ASP.NET Core con Logto

Aprenda a crear un flujo de autenticación de usuario con ASP.NET Core integrando el SDK de Logto.

Gao
Gao
Founder

Introducción

  • Logto es una moderna alternativa a Auth0 para construir infraestructuras de identidad de clientes con un esfuerzo mínimo. Admite varios métodos de inicio de sesión, incluyendo nombre de usuario, correo electrónico, número de teléfono y métodos de inicio de sesión social populares como Google y GitHub.
  • ASP.NET Core es un marco de trabajo de código abierto, de alto rendimiento y multiplataforma para construir aplicaciones conectadas a internet modernas, basadas en la nube.

En este tutorial, le mostraremos cómo construir un flujo de autenticación de usuario con ASP.NET Core integrando el SDK de Logto. El tutorial usa C# como lenguaje de programación.

Prerrequisitos

Antes de comenzar, asegúrese de tener lo siguiente:

Crear una aplicación Logto

Para empezar, cree una aplicación Logto con el tipo "Aplicación web tradicional". Sigue estos pasos para crear una aplicación Logto:

  1. Inicie sesión en la Consola de Logto.
  2. En la barra de navegación izquierda, haga clic en Aplicaciones.
  3. Haga clic en Crear aplicación.
  4. En la página abierta, encuentre la sección "Aplicación web tradicional" y localice la tarjeta "ASP.NET Core".
  5. Haga clic en Comenzar a construir, e introduzca el nombre de su aplicación.
  6. Haga clic en Crear.

A continuación, debe ver un tutorial interactivo que le guía a través del proceso de integración del SDK de Logto con su aplicación ASP.NET Core. El siguiente contenido puede ser una referencia para su uso futuro.

Prueba el tutorial interactivo de Logto Cloud

Integrar con el SDK de Logto

Instalación

Tenga en cuenta que la versión mínima admitida de ASP.NET Core es 6.0.

Añadir el middleware de autenticación de Logto

Abra Startup.cs (o Program.cs) y añada el siguiente código para registrar el middleware de autenticación de Logto:

El método AddLogtoAuthentication hará las siguientes cosas:

  • Establecerá el esquema de autenticación predeterminado en LogtoDefaults.CookieScheme.
  • Establecerá el esquema de desafío predeterminado en LogtoDefaults.AuthenticationScheme.
  • Establecerá el esquema de cierre de sesión predeterminado en LogtoDefaults.AuthenticationScheme.
  • Añadirá controladores de autenticación de cookies y OpenID Connect al esquema de autenticación.

Inicio de sesión

Añada el siguiente URI a la lista Redirect URIs en la página de detalles de la aplicación Logto:

Para iniciar sesión con Logto, puede utilizar el método ChallengeAsync:

El método ChallengeAsync redireccionará al usuario a la página de inicio de sesión de Logto.

La propiedad RedirectUri se utiliza para redirigir al usuario de vuelta a su aplicación web después de la autenticación. Nótese que es diferente del URI de redireccionamiento que configuró en la página de detalles de la aplicación Logto:

  1. El URI de redireccionamiento en la página de detalles de la aplicación Logto es el URI al que Logto redirigirá al usuario después de que el usuario haya iniciado sesión.
  2. La propiedad RedirectUri es el URI al que se redirigirá después de que se hayan tomado las acciones necesarias en el middleware de autenticación de Logto.

The order of the actions is 1 -> 2. For clarity, let's call the redirect URI in the Logto application details page the Logto redirect URI and the RedirectUri property the application redirect URI.

El Logto redirect URI tiene un valor predeterminado de /Callback, que puede dejarlo tal cual si no hay un requisito especial. Si desea cambiarlo, puede establecer la propiedad CallbackPath para LogtoOptions:

Recuerde actualizar el valor en la página de detalles de la aplicación Logto en consecuencia.

Cerrar sesión

Añade el siguiente URI a la lista Post sign-out redirect URIs en la página de detalles de la aplicación Logto:

Para salir con Logto, puedes usar el método SignOutAsync:

El método SignOutAsync borrará la cookie de autenticación y redirigirá al usuario a la página de salida de Logto.

La propiedad RedirectUri se utiliza para redirigir al usuario de vuelta a su aplicación web después de cerrar la sesión. Nótese que es diferente del post sign-out redirect URI que configuró en la página de detalles de la aplicación Logto:

  1. El post sign-out redirect URI en la página de detalles de la aplicación Logto es el URI al que Logto redirigirá al usuario después de que el usuario haya cerrado la sesión.
  2. La propiedad RedirectUri es el URI al que se redirigirá después de que se hayan tomado las acciones necesarias en el middleware de autenticación de Logto.

El orden de las acciones es 1 -> 2. Para claridad, llamemos al post sign-out redirect URI en la página de detalles de la aplicación Logto el Logto post sign-out redirect URI y a la propiedad RedirectUri el application post sign-out redirect URI.

El Logto post sign-out redirect URI tiene un valor predeterminado de /SignedOutCallback, que puede dejarlo tal cual si no hay un requisito especial. Si desea cambiarlo, puede establecer la propiedad SignedOutCallbackPath para LogtoOptions:

Recuerde actualizar el valor en la página de detalles de la aplicación Logto en consecuencia.

Implementar botones de inicio/cierre de sesión (Razor Pages)

Primero, añade los métodos de manejo a tu PageModel, por ejemplo:

Luego, añade los botones a tu página Razor (html):

<p>Está autenticado: @User.Identity?.IsAuthenticated</p>
<form method="post">
  @if (User.Identity?.IsAuthenticated == true)
  {
    <button type="submit" asp-page-handler="SignOut">Cerrar sesión</button>
  } else {
    <button type="submit" asp-page-handler="SignIn">Iniciar sesión</button>
  }
</form>

Mostrará el botón "Iniciar sesión" si el usuario no está autenticado, y mostrará el botón "Cerrar sesión" si el usuario está autenticado.

Punto de control: Ejecutar la aplicación web

Ahora puedes ejecutar la aplicación web y tratar de iniciar/cerrar sesión con Logto:

  1. Abre la aplicación web en tu navegador, deberías ver "Está autenticado: Falso" y el botón "Iniciar sesión".
  2. Haz clic en el botón "Iniciar sesión", y serás redirigido a la página de inicio de sesión de Logto.
  3. Después de que hayas iniciado sesión, deberías ser redirigido de vuelta a la aplicación web, y deberías ver "Está autenticado: Verdadero" y el botón "Cerrar sesión".
  4. Haz clic en el botón "Cerrar sesión", y serás redirigido a la página de cierre de sesión de Logto, y luego redirigido de vuelta a la aplicación web.

Si encuentras algún problema durante la integración, no dudes en contactarnos por correo electrónico a [email protected] o ¡únete a nuestro servidor de Discord!

Lecturas adicionales

Prueba Logto Hoy