Luo oma kirjautumis-UI Logto Cloudille

Tausta#

Logto tarjoaa valmiina kirjautumiskokemuksen UI:n, joka kattaa kaikki Logton ominaisuudet, kuten kirjautumisen, rekisteröitymisen, salasanan palautuksen, kertakirjautumisen (SSO) ja paljon muuta. Käyttäjät voivat myös mukauttaa kirjautumiskokemuksen UI:n ulkoasua käyttämällä "Mukautettu CSS" -ominaisuuttamme.

Jotkut käyttäjät haluavat kuitenkin syvästi mukauttaa kirjautumiskokemustaan (sekä UI:n että autentikointivirtaukset) vastaamaan heidän brändäystään ja erityisiä liiketoimintavaatimuksiaan. Olemme kuulleet sinut! Ja olemme innoissamme ilmoittaessamme, että "Luo oma UI" -ominaisuus on nyt saatavilla Logto Cloudissa.

Tässä oppaassa opastamme sinut askel askeleelta oman mukautetun kirjautumis-UI:n luomisessa ja julkaisemisessa Logto Cloudille.

Esivaatimukset#

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

• Logto Cloud -tili, jossa on tilaus
• Sovellus, joka on integroitu Logtoon (Pika-aloitukset)
• Asennettu Logto tunnel CLI
• Perustiedot HTML:stä, CSS:stä ja JavaScriptistä

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

Luo mukautettu kirjautumis-UI#

Minimivaatimus kirjautumis-UI:lle on, että sillä on index.html-tiedosto, jossa on kirjautumislomake, joka sisältää vähintään käyttäjänimen syötteen, salasanasyötteen ja lähetä-painikkeen. Käytin ChatGPT:ta luodakseni esimerkin HTML:n, ja tässä on tämä söpö vaaleanpunainen kirjautumissivu.

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

Voit myös aloittaa suosikkisi front-end-kehityskehyksen boilerplate-ohjelmalla, kuten Create React Appilla, Next.js:llä tai Vue CLI:lla.

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äänrakennettu kirjautumiskokemuksen UI, kirjoitettu Reactilla ja TypeScriptillä.

Asenna Logto tunnel CLI#

Logto tunnel CLI on työkalu, joka ei vain palvelisi HTML-sivujasi, vaan myös antaa sinun olla vuorovaikutuksessa Logton Experience API:n kanssa HTML-sivuillasi paikallisessa kehitysympäristössä.

Oletetaan, että index.html-sivusi sijaitsee /path/to/your/custom-ui, ja Logto-tenant-tunnuksesi on foobar, voit suorittaa komennon näin:

Tai, jos käytät kehityskehystä, jolla on sisäänrakennettu kehityspalvelin, ja sivusi palvellaan osoitteessa http://localhost:4000, voit suorittaa komennon näin:

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

Laukaise kirjautuminen sovelluksestasi#

Mene aiemmin luomaasi sovellukseen ja vaihda Logto-päätepisteestä https://foobar.logto.app/ osoitteeseen http://localhost:9000/ Logto SDK -määrittelyssäsi.

Otetaan esimerkkinä React-näyteprojektimme:

Klikkaa "Kirjaudu sisään" -painiketta sovelluksessasi. Sen sijaan, että näet sisäänrakennetun Logto-kirjautumis-UI:n, sinut pitäisi nyt ohjata mukautetulle kirjautumissivullesi.

Vuorovaikutus Logto Experience API:n kanssa#

Tässä vaiheessa olemme vuorovaikutuksessa Logto Experience API:n kanssa mukautetussa UI:ssasi. Ensin luodaan script.js-tiedosto ja lisätään viite index.html-tiedostoosi.

Laita seuraava koodi script.js-tiedostoosi.

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

• PUT /api/experience - Aloita kirjautumisvuorovaikutus
• POST /api/experience/verification/password - Vahvista käyttäjänimi ja salasana
• POST /api/experience/identification - Tunnista käyttäjä nykyistä vuorovaikutusta varten
• POST /api/experience/submit - Lähetä kirjautumisvuorovaikutus

Katso Logto Experience API -dokumentaatio saadaksesi lisätietoja.

Testaa mukautettu kirjautumissivusi#

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ä".
4. Jos kaikki on asetettu oikein, sinut pitäisi ohjata takaisin sovellukseesi, josta löytyy todennettu käyttäjätieto.

Julkaise mukautettu kirjautumis-UI Logto Cloudille#

Kun olet lopettanut mukautetun kirjautumis-UI:n kehittämisen ja testaamisen paikallisesti, voit julkaista sen Logto Cloudille. Luo yksinkertaisesti zip-tiedosto mukautetusta UI-kansiostasi ja lataa se "Mukautettu UI" -osioon Logto Consolessa.

Latauksen jälkeen tallenna muutokset, ja mukautettu kirjautumis-UI menee verkkoon Logto Cloud -vuokralaisessa, korvaten sisäänrakennetun Logto-kirjautumiskokemuksen.

Lopuksi, mene takaisin sovellukseesi ja vaihda päätepiste URI takaisin Logto cloud -päätepisteeseesi: https://foobar.logto.app/. Tällä kertaa voit pysäyttää Logto tunnel -palvelun, ja sovelluksesi toimii nyt suoraan mukautetun verkossa isännöidyn UI:n kanssa.

Yhteenveto#

Tässä oppaassa kävimme läpi oman mukautetun kirjautumis-UI:n toteutuksen ja julkaisemisen Logto Cloudille.

Tämän ominaisuuden avulla voit nyt syvästi mukauttaa kirjautumis-UI:ta ja autentikointivirtauksia vastaamaan brändäystäsi ja erityisiä liiketoimintavaatimuksiasi.

Hauskoja koodauksia! 🚀