Tämä opas opastaa sinua oman mukautetun kirjautumis-UI:n luomisessa ja julkaisemisessa Logto Cloudille.
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.
Ennen kuin aloitat, varmista, että sinulla on seuraavat:
Yksinkertaisuuden vuoksi käytämme klassista "käyttäjänimi & salasana" -kirjautumistapaa seuraavissa vaiheissa. Muista vaihtaa kirjautumismenetelmäsi Logto Consolessa.
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ä.
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/.
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.
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 kirjautumisvuorovaikutusPOST /api/experience/verification/password - Vahvista käyttäjänimi ja salasanaPOST /api/experience/identification - Tunnista käyttäjä nykyistä vuorovaikutusta vartenPOST /api/experience/submit - Lähetä kirjautumisvuorovaikutusKatso Logto Experience API -dokumentaatio saadaksesi lisätietoja.
http://localhost:9000/.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.
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! 🚀