Ta med din egen inloggnings-UI till Logto Cloud

Bakgrund#

Logto tillhandahåller en färdig inloggningsupplevelse-UI som täcker alla Logtos funktioner, inklusive inloggning, registrering, återställning av lösenord, single sign-on (SSO), och mer. Användare kan också anpassa utseendet och känslan av inloggningsupplevelsen-UI med vår "Anpassad CSS"-funktion.

Men vissa användare vill fortfarande djupt anpassa sin inloggningsupplevelse (både UI och autentiseringsflöden) för att matcha deras varumärke och specifika affärskrav. Vi har hört er! Och vi är glada att meddela att funktionen "Ta med din egen UI" 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örutsättningar#

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

• Ett Logto Cloud konto med en prenumerationsplan
• En applikation integrerad med Logto (Snabbstartsguider)
• Logto tunnel CLI installerad
• Grundläggande kunskap om HTML, CSS och JavaScript

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

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 innehåller minst ett användarnamn-input, ett lösenord-input och en inlämningsknapp. Jag använde ChatGPT för att generera ett exempel-HTML, och här kommer jag med denna rosa, älskvärda inloggningssida.

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

Du kan också börja med en grundläggande mall från ditt favoritfront-end-ramverk, 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 funktionen Logto inbyggd inloggningsupplevelse-UI, skriven i React och TypeScript.

Ställ in Logto tunnel CLI#

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

Förutsatt att din index.html-sida är placerad i /path/to/your/custom-ui, och din Logto hyresgäst-ID är foobar, kan du köra kommandot på detta sätt:

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 på detta sätt:

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

Starta inloggning från din applikation#

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

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

Klicka på "Logga in"-knappen i din applikation. Istället för att se den inbyggda Logto inloggnings-UI, 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. Låt oss först skapa en script.js-fil och lägga till referensen i din index.html.

Sätt följande kod i din script.js-fil.

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

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

Se Logto Experience API dokumentation för mer information.

Testa din anpassade inloggningssida#

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

Distribuera din anpassade inloggnings-UI till Logto Cloud#

När du har slutfört utvecklingen och testning 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 "Anpassad UI"-sektionen i din Logto Console.

Efter att ha laddat upp, spara ändringarna, och din anpassade inloggnings-UI kommer att gå live i din Logto Cloud-hyresgäst och ersätta den inbyggda Logto inloggningsupplevelsen.

Slutligen, gå tillbaka till din applikation och ändra endpoint-URI tillbaka till din Logto moln-endpoint: https://foobar.logto.app/. Denna gång kan du stoppa Logto tunnel-servicen, och din applikation bör nu fungera direkt med den anpassade UI som är värd online.

Slutsats#

I den här handledningen har vi gått igenom processen att implementera och distribuera din egen anpassade inloggnings-UI till Logto Cloud.

Med den här funktionen kan du nu djupt anpassa din inloggnings-UI och autentiseringsflöden för att matcha ditt varumärke och specifika affärskrav.

Lycka till med kodningen! 🚀