Tuo oma kirjautumisen käyttöliittymäsi Logto Cloudiin

Taustaa#

Logto tarjoaa valmiin kirjautumiskokemuksen käyttöliittymän, joka kattaa kaikki Logton ominaisuudet, mukaan lukien kirjautuminen, rekisteröinti, salasanan palautus, kertakirjautuminen (SSO) ja paljon muuta. Käyttäjät voivat myös mukauttaa kirjautumiskokemuksen käyttöliittymän ulkoasua "Mukautettu CSS" -ominaisuudellamme.

Kuitenkin, jotkut käyttäjät haluavat silti syvällisesti mukauttaa omaa kirjautumiskokemuksiaan (sekä käyttöliittymää että todennusvirtoja) vastaamaan omaa brändäystä ja erityisiä liiketoiminnan vaatimuksiaan. Olemme kuulleet teitä! Ja olemme innoissamme ilmoittaa, että "Tuo oma käyttöliittymä" -ominaisuus on nyt saatavilla Logto Cloudissa.

Tässä oppaassa ohjaamme sinut läpi vaiheet oman mukautetun kirjautumisen käyttöliittymän luomiseksi ja asentamiseksi Logto Cloudiin.

Ennakkovaatimukset#

Ennen kuin aloitat, varmista, että sinulla on seuraavat asiat:

• Logto Cloud -tili, jossa on tilauspaketti
• Logtoon integroitu sovellus (Pika-aloitukset)
• Asennettuna Logto tunnel CLI
• Perustiedot HTML:stä, CSS:stä ja JavaScriptistä

Yksinkertaisuuden vuoksi käytämme seuraavissa vaiheissa klassista "käyttäjänimi & salasana" -kirjautumistapaa. Muista vaihtaa kirjautumismenetelmäsi Logto-konsolissa.

Luo mukautettu kirjautumiskäyttöliittymäsi#

Kirjautumiskäyttöliittymän vähimmäisvaatimus on, että siinä on index.html-tiedosto, joka sisältää kirjautumislomakkeen, jossa on vähintään käyttäjänimi-syöte, salasana-syöte ja lähetyspainike. Käytin ChatGPT:tä luomaan esimerkkisivun HTML:n, ja tässä on tämä vaaleanpunainen ihana kirjautumissivu.

Olen yksinkertaisuuden vuoksi jättänyt pois CSS-tyylit ja tässä on, kuinka yksinkertaiselta HTML näyttää:

Voit myös aloittaa alustalla suosikkikehitystyökalustasi, kuten Create React App, Next.js tai Vue CLI.

Koska Logto on avoimen lähdekoodin, toinen suositus on kloonata Logto Experience -projekti ja muokata koodia tarpeidesi mukaan. Tämä on täydellinen ominaisuus Logton sisäänrakennetusta kirjautumiskokemuksesta, kirjoitettu Reactilla ja TypeScriptillä.

Aseta Logto tunnel CLI#

Logto tunnel CLI on työkalu, joka ei ainoastaan palvele HTML-sivujasi, vaan myös mahdollistaa interaktiot Logton Experience API:n kanssa HTML-sivuistasi paikallisessa kehitysympäristössä.

Oletetaan, että index.html-sivusi sijaitsee ./path/to/your/custom-ui-hakemistossa ja Logto tenant ID:si on foobar, voit suorittaa komennon tällä tavalla:

Tai, jos käytät käyttöliittymäkehystä, jossa on sisäänrakennettu kehityspalvelin, ja sivusi palvellaan osoitteessa http://localhost:4000, voit suorittaa komennon näin:

Komennon suorittamisen jälkeen tunneli-palvelu käynnistyy paikallisessa koneessasi osoitteessa http://localhost:9000/.

Käynnistä kirjautuminen sovelluksestasi#

Mene sovellukseen, jonka loit aikaisemmin, ja muuta Logto-päätepistettä https://foobar.logto.app/ arvosta http://localhost:9000/ Logto SDK-konfiguraatiossasi.

Otamme esimerkkinä React-malliprojektimme:

Klikkaa "Kirjaudu sisään" -painiketta sovelluksessasi. Sen sijaan että näkisit sisäänrakennetun Logto-kirjautumiskäyttöliittymän, sinut pitäisi nyt ohjata mukautetulle kirjautumissivullesi.

Interaktiot Logto Experience API:n kanssa#

Tässä vaiheessa tulemme tekemään interaktioita Logto Experience API:n kanssa mukautetussa käyttöliittymässäsi. Luo ensin script.js-tiedosto ja lisää viite index.html-tiedostoon.

Aseta seuraava koodi script.js-tiedostoosi.

Tämä skripti suorittaa käyttäjänimen ja salasanan kirjautumisvirtauksen näiden API:iden avulla:

• PUT /api/experience - Käynnistä kirjautumisinteraktio
• POST /api/experience/verification/password - Vahvista käyttäjänimi ja salasana
• POST /api/experience/identification - Tunnista käyttäjä nykyiselle interaktiolle
• POST /api/experience/submit - Lähetä kirjautumisinteraktio

Katso Logto Experience API -dokumentaatio lisätietoja.

Testaa mukautettua kirjautumissivuasi#

1. Mene sovellukseesi ja klikkaa "Kirjaudu sisään" -painiketta.
2. Sinut pitäisi ohjata mukautetulle kirjautumissivullesi osoitteessa http://localhost:9000/.
3. Syötä käyttäjänimi ja salasana ja klikkaa "Lähetä"-painiketta.
4. Jos kaikki on asetettu oikein, sinut pitäisi ohjata takaisin sovellukseesi, käyttäjän tiedot todennettuina.

Asenna mukautettu kirjautumisen käyttöliittymäsi Logto Cloudiin#

Kun olet kehittänyt ja testannut mukautettua kirjautumisen käyttöliittymääsi paikallisesti, voit asentaa sen Logto Cloudiin. Luo yksinkertaisesti zip-tiedosto mukautetusta käyttöliittymäkansiostasi ja lataa se "Mukautettu käyttöliittymä" -osioon Logto-konsolissasi.

Latauksen jälkeen tallenna muutokset ja mukautettu kirjautumisen käyttöliittymäsi menee live-tilaan Logto Cloud -vuokraamossasi, korvaten sisäänrakennetun Logto-kirjautumiskokemuksen.

Lopuksi, palaa sovellukseesi ja muuta päätepisteen URI takaisin Logto Cloud -päätepisteeseesi: https://foobar.logto.app/. Tällä kertaa voit pysäyttää Logto tunnel -palvelun, ja sovelluksesi tulisi toimia suoraan verkossa isännöidyn mukautetun käyttöliittymän kanssa.

Yhteenveto#

Tässä oppaassa olemme ohjanneet sinut prosessin läpi oman mukautetun kirjautumisen käyttöliittymän toteuttamiseksi ja asentamiseksi Logto Cloudiin.

Tämän ominaisuuden avulla voit nyt syvällisesti mukauttaa kirjautumiskäyttöliittymääsi ja todennusvirtojasi vastaamaan omaa brändäystäsi ja erityisiä liiketoiminnan vaatimuksiasi.

Onnea koodaukseen! 🚀