Ta med din egen inloggnings-UI till Logto Cloud

Bakgrund#

Logto erbjuder en färdig inloggningsupplevelse-UI som täcker alla Logto-funktioner, inklusive inloggning, registrering, lösenordsåterställning, single sign-on (SSO) och mer. Användare kan också anpassa utseendet och upplevelsen av inloggnings-UI:t med vår "Custom CSS"-funktion.

Men vissa användare vill fortfarande djupt anpassa sin inloggningsupplevelse (både UI och autentiseringsflöden) för att matcha deras branding och specifika affärskrav. Vi har hört dig! Och vi är glada att meddela att "Ta med din egen UI"-funktionen nu är tillgänglig i Logto Cloud.

I denna handledning kommer vi att guida dig genom stegen för att skapa och distribuera din egen anpassade inloggnings-UI till Logto Cloud.

Förkunskaper#

Innan du börjar, se till att du har följande:

• Ett Logto Cloud-konto med en prenumerationsplan
• En applikation integrerad med Logto (Snabbstartsguide)
• Logto tunnel CLI installerad
• Grundläggande kunskaper i HTML, CSS och JavaScript

För enkelhetens skull kommer vi att använda den klassiska metoden "användarnamn & lösenord" för inloggning i de följande stegen. Kom ihåg att ändra din inloggningsmetod i Logto-konsolen.

Skapa din anpassade inloggnings-UI#

Det minsta kravet för en inloggnings-UI är att ha en index.html-fil, med ett inloggningsformulär som inkluderar åtminstone ett användarnamn-inmatningsfällt, ett lösenord-inmatningsfällt och en skicka-knapp. Jag använde ChatGPT för att generera ett exempels-HTML, och här har jag denna rosa nyanserade inloggningssida.

Jag har utelämnat CSS-stilarna för enkelhetens skull, och här är hur enkel HTML:en ser ut:

Du kan också börja med ett startpaket från ditt favorit frontend-ramverk, såsom Create React App, Next.js eller Vue CLI.

Eftersom Logto är öppen källkod är en annan rekommendation att klona Logto Experience-projektet, och ändra koden för att passa dina behov. Detta är den fullständiga Logto inbyggda inloggningsupplevelse-UI:n, skriven i React och TypeScript.

Sätt upp Logto tunnel CLI#

Logto tunnel CLI är ett verktyg som inte bara serverar dina HTML-sidor, utan också låter dig interagera med Logtos Experience API från dina HTML-sidor i lokal utvecklingsmiljö.

Anta att din index.html-sida är placerad i /path/to/your/custom-ui, och din Logto-tenant-ID är foobar, du kan köra kommandot på det här sättet:

Eller, om du använder ett UI-ramverk som har en inbyggd utvecklingsserver, och din sida serveras på http://localhost:4000, kan du köra kommandot så här:

Efter att ha kört kommandot kommer tunneltjänsten startas på din lokala maskin http://localhost:9000/.

Utlös inloggning från din applikation#

Gå till applikationen du skapade tidigare och ändra Logto-endpointen från https://foobar.logto.app/ till http://localhost:9000/ i din Logto SDK-konfig.

Låt oss ta vårt React-exempelprojekt som ett exempel:

Klicka på "Logga in"-knappen i din applikation. Istället för att se den inbyggda Logto-inloggnings-UI:n, bör du nu omdirigeras till din anpassade inloggningssida.

Interagera med Logto Experience API#

I detta steg kommer vi att interagera med Logto Experience API i din anpassade UI. Först, låt oss skapa en script.js-fil och lägga till referensen i din index.html.

Placera följande kod i din script.js-fil.

Detta skript kommer att slutföra inloggningsflödet med användarnamn och lösenord med hjälp av dessa API:er:

• PUT /api/experience - Starta inloggningsinteraktionen
• POST /api/experience/verification/password - Verifiera användarnamn och lösenord
• POST /api/experience/identification - Identifera användare för den aktuella interaktionen
• POST /api/experience/submit - Skicka in inloggningsinteraktionen

Se Logto Experience API-dokumentationen för mer detaljer.

Testa din anpassade inloggningssida#

1. Gå till din applikation och klicka på "Logga in"-knappen.
2. Du bör bli omdirigerad till din anpassade inloggningssida på http://localhost:9000/.
3. Ange användarnamn och lösenord, och klicka på "Skicka"-knappen.
4. Om allt är korrekt inställt bör du bli omdirigerad tillbaka till din applikation, med autentiserad användarinformation.

Distribuera din anpassade inloggnings-UI till Logto Cloud#

När du har avslutat utvecklingen och testningen av din anpassade inloggnings-UI lokalt kan du distribuera den till Logto Cloud. Skapa helt enkelt en zip-fil av din anpassade UI-mapp och ladda upp den till sektionen "Custom UI" i din Logto-konsol.

Efter att ha laddat upp, spara ändringarna, och din anpassade inloggnings-UI kommer att bli live i din Logto Cloud-tenant, och ersätter den inbyggda Logto-inloggningsupplevelsen.

Slutligen, gå tillbaka till din applikation och ändra endpoint-URI:n tillbaka till din Logto cloud-endpoint: https://foobar.logto.app/. Den här gången kan du stoppa Logto-tunneltjänsten, och din applikation bör nu fungera direkt med den anpassade UI:n som är värd online.

Slutsats#

I denna handledning har vi guidat dig genom processen att implementera och distribuera din egen anpassade inloggnings-UI till Logto Cloud.

Med denna funktion kan du nu djupt anpassa din inloggnings-UI och autentiseringsflöden för att matcha din branding och specifika affärskrav.

Trevligt kodande! 🚀