Breng je eigen aanmeld-UI naar Logto Cloud

Achtergrond#

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

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

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

Vereisten#

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

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

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

Maak je aangepaste aanmeld-UI#

De minimale vereiste voor een aanmeld-UI is een index.html bestand, met een aanmeldformulier dat minimaal een gebruikersnaam invoer, een wachtwoord invoer en een verzendknop bevat. Ik gebruikte ChatGPT om een voorbeeld HTML te genereren, en hier is deze schattige roze aanmeldpagina.

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

Je kunt ook beginnen met een startpunt 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 jouw behoeften. Dit is de volledige Logto ingebouwde aanmeldervaring-UI, geschreven in React en TypeScript.

Stel Logto tunnel CLI in#

Logto tunnel CLI is een tool die niet alleen je HTML-pagina's serveert, maar je ook in staat stelt om te communiceren met de Logto Experience API vanuit je HTML-pagina's in een lokale ontwikkelomgeving.

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

Of, als je een UI-framework gebruikt dat een ingebouwde ontwikkelserver heeft, en je pagina wordt bediend via http://localhost:4000, kun je het commando als volgt uitvoeren:

Na het uitvoeren van het commando, zal de tunnelservice worden gestart op je lokale machine http://localhost:9000/.

Start aanmelding vanaf 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 knop "Aanmelden" in je applicatie. In plaats van de ingebouwde Logto aanmeld-UI te zien, zou je nu moeten worden doorgestuurd naar je aangepaste aanmeldpagina.

Interactie met Logto Experience API#

In deze stap gaan we communiceren 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.

Plaats de volgende code in je script.js bestand.

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

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

Raadpleeg de Logto Experience API-documentatie voor meer details.

Test je aangepaste aanmeldpagina#

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

Implementeer je aangepaste aanmeld-UI naar Logto Cloud#

Zodra je klaar bent met het ontwikkelen en testen van je aangepaste aanmeld-UI lokaal, kun je het implementeren naar Logto Cloud. Maak simpelweg een zip-bestand van je aangepaste UI-map en upload het naar het "Custom UI" gedeelte in je Logto Console.

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

Ten slotte, ga terug naar je applicatie en wijzig de endpoint-URI terug naar je Logto cloud endpoint: https://foobar.logto.app/. Deze keer kun je de Logto tunnel service stoppen, en je applicatie zou nu direct moeten werken met de online gehoste aangepaste UI.

Conclusie#

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

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

Veel programmeerplezier! 🚀