Bouw ASP.NET Core-authenticatie met Logto

Inleiding#

• Logto is een modern Auth0-alternatief voor het bouwen van klantidentiteitsinfrastructuur met minimale inspanning. Het ondersteunt verschillende aanmeldmethoden, waaronder gebruikersnaam, e-mail, telefoonnummer en populaire sociale aanmeldingen zoals Google en GitHub.
• ASP.NET Core is een cross-platform, high-performance, open-source framework voor het bouwen van moderne, cloud-gebaseerde, internet-verbonden applicaties.

In deze handleiding laten we je zien hoe je een gebruikersauthenticatiestroom opzet met ASP.NET Core door de Logto SDK te integreren. De handleiding gebruikt C# als programmeertaal.

Vereisten#

Voordat je begint, zorg ervoor dat je het volgende hebt:

• Een Logto-account. Als je er geen hebt, kun je gratis aanmelden.
• Een .NET-ontwikkelomgeving en een ASP.NET Core-project. Als je er geen hebt, kun je .NET installeren en de ASP.NET-tutorials volgen om je project in te stellen.

Maak een Logto applicatie#

Om te beginnen, maak een Logto applicatie aan met het type "Traditionele webapp". Volg deze stappen om een Logto applicatie aan te maken:

1. Meld je aan bij de Logto Console.
2. Klik in de linkernavigatiebalk op Applicaties.
3. Klik op Maak applicatie aan.
4. Op de geopende pagina, vind de sectie "Traditionele webapp" en zoek de "ASP.NET Core"-kaart.
5. Klik op Start bouwen en voer de naam van je applicatie in.
6. Klik op Maak aan.

Vervolgens zou je een interactieve tutorial moeten zien die je door het proces van het integreren van de Logto SDK met je ASP.NET Core-applicatie begeleidt. De volgende inhoud kan als referentie voor toekomstig gebruik dienen.

Integreren met Logto SDK#

Installatie#

Let op, de minimaal ondersteunde versie van ASP.NET Core is 6.0.

Voeg Logto authenticatiemiddleware toe#

Open Startup.cs (of Program.cs) en voeg de volgende code toe om Logto authenticatiemiddleware te registreren:

De AddLogtoAuthentication-methode zal het volgende doen:

• De standaard authenticatieregel instellen op LogtoDefaults.CookieScheme.
• De standaard uitdaging regel instellen op LogtoDefaults.AuthenticationScheme.
• De standaard uitlog regel instellen op LogtoDefaults.AuthenticationScheme.
• Cookie- en OpenID Connect-authenticatiehandlers toevoegen aan de authenticatieregel.

Aanmelden#

Voeg de volgende URI toe aan de lijst Redirect URIs op de Logto applicatie details pagina:

Om aan te melden met Logto, kun je de ChallengeAsync-methode gebruiken:

De ChallengeAsync-methode zal de gebruiker naar de Logto aanmeldpagina leiden.

De RedirectUri-eigenschap wordt gebruikt om de gebruiker terug naar je webapplicatie te leiden na authenticatie. Let op, het is verschillend van de redirect URI die je geconfigureerd hebt op de Logto applicatie details pagina:

1. De redirect URI op de Logto applicatie details pagina is de URI waar Logto de gebruiker naar terugleidt nadat de gebruiker zich heeft aangemeld.
2. De RedirectUri-eigenschap is de URI waar naar teruggeleid wordt nadat de benodigde acties in de Logto authenticatiemiddleware zijn uitgevoerd.

De volgorde van de acties is 1 -> 2. Voor de duidelijkheid noemen we de redirect URI op de Logto applicatie details pagina de Logto redirect URI en de RedirectUri-eigenschap de applicatie redirect URI.

De Logto redirect URI heeft een standaardwaarde van /Callback, die je kunt laten zoals die is als er geen speciale vereiste is. Als je het wilt wijzigen, kun je de CallbackPath-eigenschap voor LogtoOptions instellen:

Denk eraan de waarde op de Logto applicatie details pagina dienovereenkomstig bij te werken.

Afmelden#

Voeg de volgende URI toe aan de lijst Post sign-out redirect URIs op de Logto applicatie details pagina:

Om af te melden met Logto, kun je de SignOutAsync-methode gebruiken:

De SignOutAsync-methode zal de authenticatiecookie wissen en de gebruiker naar de Logto afmeldpagina leiden.

De RedirectUri-eigenschap wordt gebruikt om de gebruiker terug naar je webapplicatie te leiden na afmelding. Let op, het is verschillend van de post sign-out redirect URI die je hebt geconfigureerd op de Logto applicatie details pagina:

1. De post sign-out redirect URI op de Logto applicatie details pagina is de URI waar Logto de gebruiker naar terugleidt nadat de gebruiker zich heeft afgemeld.
2. De RedirectUri-eigenschap is de URI waar naar teruggeleid wordt nadat de benodigde acties in de Logto authenticatiemiddleware zijn uitgevoerd.

De volgorde van de acties is 1 -> 2. Voor de duidelijkheid noemen we de post sign-out redirect URI op de Logto applicatie details pagina de Logto post sign-out redirect URI en de RedirectUri-eigenschap de applicatie post sign-out redirect URI.

De Logto post sign-out redirect URI heeft een standaardwaarde van /SignedOutCallback, die je kunt laten zoals die is als er geen speciale vereiste is. Als je het wilt wijzigen, kun je de SignedOutCallbackPath-eigenschap voor LogtoOptions instellen:

Denk eraan de waarde op de Logto applicatie details pagina dienovereenkomstig bij te werken.

Implementeer aanmeld-/afmeldknoppen (Razor Pages)#

Voeg eerst de handler-methodes toe aan je PageModel, bijvoorbeeld:

Voeg vervolgens de knoppen toe aan je Razor-pagina (html):

<p>Is authenticated: @User.Identity?.IsAuthenticated</p>
<form method="post">
  @if (User.Identity?.IsAuthenticated == true)
  {
    <button type="submit" asp-page-handler="SignOut">Log uit</button>
  } else {
    <button type="submit" asp-page-handler="SignIn">Log in</button>
  }
</form>

Het toont de knop "Log in" als de gebruiker niet is geauthenticeerd, en toont de knop "Log uit" als de gebruiker is geauthenticeerd.

Controlepunt: Voer de webapplicatie uit#

Nu kun je de webapplicatie uitvoeren en proberen aan te melden/af te melden met Logto:

1. Open de webapplicatie in je browser, je zou "Is authenticated: False" en de "Log in"-knop moeten zien.
2. Klik op de "Log in"-knop, en je zou naar de Logto aanmeldpagina moeten worden geleid.
3. Nadat je je hebt aangemeld, zou je terug naar de webapplicatie moeten worden geleid, en je zou "Is authenticated: True" en de "Log uit"-knop moeten zien.
4. Klik op de "Log uit"-knop, en je zou naar de Logto afmeldpagina moeten worden geleid, en vervolgens terug naar de webapplicatie worden geleid.

Als je problemen ondervindt tijdens de integratie, aarzel dan niet om contact met ons op te nemen via e-mail op [email protected] of word lid van onze Discord-server!

Verdere lectuur#

• Pas aanmeldervaring aan
• Configureer connectors
• Bescherm je API