Den här handledningen guider dig genom processen att skapa och distribuera din egen anpassade inloggnings-UI till Logto Cloud.
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.
Innan du börjar, se till att du har följande:
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.
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.
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/.
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.
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 inloggningsinteraktionenPOST /api/experience/verification/password - Verifiera användarnamn och lösenordPOST /api/experience/identification - Identifera användare för den aktuella interaktionenPOST /api/experience/submit - Skicka in inloggningsinteraktionenSe Logto Experience API-dokumentationen för mer detaljer.
http://localhost:9000/.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.
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! 🚀