Breng je eigen aanmeld-UI naar Logto Cloud

Achtergrond#

Logto biedt een kant-en-klare aanmeldervaring-UI die alle Logto-functies dekt, inclusief aanmelden, registratie, wachtwoordherstel, single sign-on (SSO) en meer. Gebruikers kunnen ook het uiterlijk van de aanmeldervaring-UI aanpassen met onze "Aangepaste CSS"-functie.

Echter, sommige gebruikers willen hun aanmeldervaring (zowel UI als verificatiestromen) nog dieper aanpassen om te voldoen aan hun merk en specifieke zakelijke vereisten. We hebben jullie gehoord! En we zijn verheugd aan te kondigen dat de "Breng je eigen UI"-functie nu beschikbaar is in Logto Cloud.

In deze handleiding leiden we je door de stappen om je eigen aangepaste aanmeld-UI naar Logto Cloud te maken en te implementeren.

Vereisten#

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

• Een Logto Cloud account met een abonnement
• Een applicatie geïntegreerd met Logto (Quick-starts)
• Logto tunnel CLI geïnstalleerd
• Basiskennis van HTML, CSS en JavaScript

Voor de eenvoud gebruiken we de klassieke "gebruikersnaam & wachtwoord" aanmeldmethode in de volgende stappen. Vergeet niet je aanmeldmethode in Logto Console te wijzigen.

Maak je aangepaste aanmeld-UI#

De minimale vereiste voor een aanmeld-UI is om een index.html bestand te hebben, met een aanmeldformulier dat ten minste een gebruikersnaamveld, een wachtwoordveld en een verzendknop bevat. Ik gebruikte ChatGPT om een voorbeeld HTML te genereren, en hier kom ik met deze roze mooie aanmeldpagina.

Ik heb de CSS-stijlen weggelaten voor eenvoud, en zo eenvoudig ziet de HTML eruit:

Je kunt ook beginnen met een sjabloon van je favoriete front-end framework, zoals Create React App, Next.js, of Vue CLI.

Aangezien Logto open source is, is een andere aanbeveling om het Logto Experience project te klonen en de code aan te passen aan je behoeften. Dit is de volledige functie Logto ingebouwde aanmeldervaring-UI, geschreven in React en TypeScript.

Logto tunnel CLI instellen#

Logto tunnel CLI is een tool die niet alleen je HTML-pagina's bedient, maar je ook toestaat om te communiceren met Logto's Experience API vanuit je HTML-pagina's in een lokale dev-omgeving.

Aangenomen dat je index.html pagina zich bevindt in /path/to/your/custom-ui en je Logto-tenant-ID foobar is, kun je de opdracht op deze manier uitvoeren:

Of, als je een UI-framework gebruikt met een ingebouwde ontwikkelserver, en je pagina wordt weergegeven op http://localhost:4000, kun je de opdracht op deze manier uitvoeren:

Na het uitvoeren van de opdracht, wordt de tunneldienst gestart op je lokale machine http://localhost:9000/.

Aanmelden starten vanuit je applicatie#

Ga naar de applicatie die je eerder hebt gemaakt, en wijzig het Logto-endpoint van https://foobar.logto.app/ naar http://localhost:9000/ in je Logto SDK-configuratie.

Laten we ons React-voorbeeldproject als voorbeeld nemen:

Klik op de "Aanmelden" knop in je applicatie. In plaats van de ingebouwde Logto aanmeld-UI te zien, zou je nu worden doorgestuurd naar je aangepaste aanmeldpagina.

Interactie met Logto Experience API#

In deze stap gaan we interageren met de Logto Experience API in je aangepaste UI. Laten we eerst een script.js bestand maken en de referentie toevoegen in je index.html.

Zet de volgende code in je script.js bestand.

Dit script zal de gebruikersnaam en wachtwoord aanmeldstroom voltooien met behulp van deze API's:

• PUT /api/experience - Start de aanmeldinteractie
• POST /api/experience/verification/password - Verifieer de gebruikersnaam en wachtwoord
• POST /api/experience/identification - Identificeer de gebruiker voor de huidige interactie
• POST /api/experience/submit - Dien de aanmeldinteractie in

Raadpleeg Logto Experience API docs voor meer details.

Test je aangepaste aanmeldpagina#

1. Ga naar je applicatie en klik op de "Aanmelden" knop.
2. Je zou moeten worden doorgestuurd naar je aangepaste aanmeldpagina op http://localhost:9000/.
3. Voer gebruikersnaam en wachtwoord in, en klik op de "Verzenden" knop.
4. Als alles correct is ingesteld, zou je moeten worden doorgestuurd naar je applicatie, met geauthenticeerde gebruikersinformatie.

Implementeer je aangepaste aanmeld-UI naar Logto Cloud#

Nadat je klaar bent met het ontwikkelen en testen van je aangepaste aanmeld-UI lokaal, kun je deze implementeren naar Logto Cloud. Maak eenvoudig een zip-bestand van je aangepaste UI-map en upload deze naar de "Aangepaste UI" sectie in je Logto Console.

Na het uploaden, sla de wijzigingen op, en je aangepaste aanmeld-UI zal live gaan in je Logto Cloud-tenant, en de ingebouwde Logto aanmeldervaring vervangen.

Ga ten slotte terug naar je applicatie en wijzig de endpoint-URI terug naar je Logto cloud endpoint: https://foobar.logto.app/. Dit keer kun je de Logto-tunnelsessie stoppen, en je applicatie zou nu direct met de online gehoste aangepaste UI moeten werken.

Conclusie#

In deze handleiding hebben we je door het proces geleid van het implementeren en implementeren van je eigen aangepaste aanmeld-UI naar Logto Cloud.

Met deze functie kun je nu je aanmeld-UI en verificatiestromen diepgaand aanpassen om te voldoen aan je merk en specifieke zakelijke vereisten.

Veel codeerplezier! 🚀