Porta la tua interfaccia di accesso personalizzata su Logto Cloud

Informazioni generali#

Logto offre un'esperienza di accesso pronta all'uso che copre tutte le funzionalità di Logto, inclusi accesso, registrazione, recupero password, single sign-on (SSO) e altro. Gli utenti possono anche personalizzare l'aspetto e lo stile dell'interfaccia di accesso utilizzando la nostra funzionalità "CSS personalizzato".

Tuttavia, alcuni utenti desiderano ancora personalizzare profondamente la loro esperienza di accesso (sia l'interfaccia che i flussi di autenticazione) per adattarsi al loro marchio e ai requisiti specifici del loro business. Ti abbiamo ascoltato! E siamo entusiasti di annunciare che la funzionalità "Porta la tua UI" è ora disponibile su Logto Cloud.

In questo tutorial, ti guideremo attraverso i passaggi per creare e distribuire la tua interfaccia di accesso personalizzata su Logto Cloud.

Prerequisiti#

Prima di iniziare, assicurati di avere quanto segue:

• Un account Logto Cloud con un piano di abbonamento
• Un'applicazione integrata con Logto (Quick-starts)
• Logto tunnel CLI installato
• Conoscenze di base di HTML, CSS e JavaScript

Per semplicità, utilizzeremo il metodo classico di accesso "username & password" nei passaggi seguenti. Ricorda di modificare il tuo metodo di accesso in Logto Console.

Crea la tua interfaccia di accesso personalizzata#

Il requisito minimo per un'interfaccia di accesso è avere un file index.html, con un modulo di accesso che includa almeno un campo di input per il nome utente, un campo di input per la password e un pulsante di invio. Ho utilizzato ChatGPT per generare un esempio di HTML e sono arrivato a questa adorabile pagina di accesso rosa.

Ho omesso gli stili CSS per semplicità, ed ecco com'è semplice l'HTML:

Puoi anche iniziare con un modello dal tuo framework front-end preferito, come Create React App, Next.js o Vue CLI.

Poiché Logto è open source, un'altra raccomandazione è clonare il progetto Logto Experience e modificare il codice per adattarlo alle tue esigenze. Questa è l'interfaccia utente di accesso integrata di Logto a tutte le funzionalità, scritta in React e TypeScript.

Configura Logto tunnel CLI#

Logto tunnel CLI è uno strumento che non solo serve le tue pagine HTML, ma ti permette anche di interagire con l'API di Experience di Logto dalle tue pagine HTML in un ambiente di sviluppo locale.

Supponendo che la tua pagina index.html sia situata in /path/to/your/custom-ui, e il tuo ID di tenant di Logto sia foobar, puoi eseguire il comando in questo modo:

Oppure, se stai utilizzando un framework UI che ha un server di sviluppo integrato, e la tua pagina è servita in http://localhost:4000, puoi eseguire il comando in questo modo:

Dopo aver eseguito il comando, il servizio del tunnel verrà avviato sulla tua macchina locale http://localhost:9000/.

Innesca l'accesso dalla tua applicazione#

Vai all'applicazione che hai creato in precedenza e cambia l'endpoint di Logto da https://foobar.logto.app/ a http://localhost:9000/ nella configurazione del tuo SDK di Logto.

Prendiamo come esempio il nostro progetto di esempio React:

Clicca sul pulsante "Accedi" nella tua applicazione. Invece di vedere l'interfaccia utente di accesso integrata di Logto, dovresti ora essere reindirizzato alla tua pagina di accesso personalizzata.

Interagisci con l'API di Experience di Logto#

In questo passaggio, interagiremo con l'API di Experience di Logto nella tua UI personalizzata. Prima, creiamo un file script.js e aggiungiamo il riferimento nel tuo index.html.

Metti il seguente codice nel tuo file script.js.

Questo script completerà il flusso di accesso con nome utente e password con l'aiuto di queste API:

• PUT /api/experience - Avvia l'interazione di accesso
• POST /api/experience/verification/password - Verifica il nome utente e la password
• POST /api/experience/identification - Identifica l'utente per l'interazione corrente
• POST /api/experience/submit - Invia l'interazione di accesso

Riferisciti alla documentazione dell'API di Experience di Logto per maggiori dettagli.

Testa la tua pagina di accesso personalizzata#

1. Vai alla tua applicazione e clicca sul pulsante "Accedi".
2. Dovresti essere reindirizzato alla tua pagina di accesso personalizzata su http://localhost:9000/.
3. Inserisci nome utente e password, e clicca sul pulsante "Invia".
4. Se tutto è configurato correttamente, dovresti essere reindirizzato indietro alla tua applicazione, con le informazioni utente autenticate.

Distribuisci la tua interfaccia di accesso personalizzata su Logto Cloud#

Una volta completato lo sviluppo e il test della tua interfaccia di accesso personalizzata in locale, puoi distribuirla su Logto Cloud. Crea semplicemente un file zip della tua cartella UI personalizzata e caricalo nella sezione "UI personalizzata" nel tuo Logto Console.

Dopo aver caricato, salva le modifiche, e la tua interfaccia di accesso personalizzata sarà attiva nel tuo tenant Logto Cloud, sostituendo l'esperienza di accesso integrata di Logto.

Infine, torna alla tua applicazione e cambia l'URL dell'endpoint al tuo endpoint cloud di Logto: https://foobar.logto.app/. Questa volta, puoi fermare il servizio di tunnel Logto, e la tua applicazione dovrebbe ora funzionare direttamente con l'UI personalizzata ospitata online.

Conclusione#

In questo tutorial, ti abbiamo guidato attraverso il processo di implementazione e distribuzione della tua interfaccia di accesso personalizzata su Logto Cloud.

Con questa funzionalità, puoi ora personalizzare profondamente la tua interfaccia di accesso e i flussi di autenticazione per adattarsi al tuo marchio e alle esigenze specifiche del tuo business.

Buona programmazione! 🚀