Webflow on SaaS-alusta verkkosivustojen rakentamiseen ja isännöintiin. Se tarjoaa online-visuaalisen editorin, joka yksinkertaistaa verkkosivustojen suunnittelua, rakentamista ja julkaisemista vähäisellä koodilla.
Tässä artikkelissa käymme läpi Logton integroinnin Webflow-projektiisi, jolloin käyttäjän autentikointi toteutuu saumattomasti.
Tässä vaiheessa lisäämme globaalin tason mukautetun koodin sivustollesi. Koska Webflow on staattinen verkkosivusto, käytämme käyttäjän autentikointiin @logto/browser (Vanilla JS) SDK:ta. Koska NPM:ää ei voida käyttää, tuomme SDK:mme CDN-palvelun, kuten jsdelivr.com, kautta.
Webflow-hallintapaneelissa, vie hiiri juuri luodun sivuston päälle ja napsauta oikeassa yläkulmassa olevaa "Hammasrattaan" kuvaketta.
Asetukset-sivulta löydä "Mukautettu koodi" vasemmanpuoleisesta valikosta ja liitä seuraava JavaScript-koodi "Head code" -osioon. Löydät sovelluksesi tunnuksen ja päätepisteen URL-osoitteen Logto-sovelluksen tiedoista.
Siirry Logto-konsoliin, sovelluksen asetuksissa, löydä "Ohjaus-URI:t" -kenttä ja syötä https://your-awesome-site.webflow.io/callback, sen jälkeen napsauta "Tallenna muutokset".
Palaa Webflow-suunnittelijaan ja lisää "Kirjaudu sisään" -painike kotisivulle. Tämän opetusohjelman yksinkertaisuuden vuoksi annamme myös tunnuksen "sign-in" painikkeelle, jota viittaamme myöhemmin getElementById() avulla.
Nyt lisäämme joitakin sivutasoisia mukautettuja koodeja kotisivulle. Napsauta sivuvalikon hammasrattaan kuvaketta ja löydä mukautetun koodin osio alhaalta. Liitä alla oleva koodi sitomaan klikkaustiedon käsittelijän sisäänkirjautumispainikkeelle.
Luo uusi "Callback"-sivu Webflowssa ja lisää yksinkertaisesti "Ohjataan..." -teksti. Käsittelemme sisäänkirjautumisen palautuslogiikan tällä sivulla seuraavalla mukautetulla koodilla.
Nyt voit testata sisäänkirjautumisprosessia julkaisemalla Webflow-sivustosi. Julkaisun jälkeen "Kirjaudu sisään" -painikkeen tulisi näkyä kotisivulla. Napsauta sitä siirtyäksesi Logton isännöimälle sisäänkirjautumissivulle. Sisäänkirjautumisen jälkeen sinut ohjataan ensin "Callback"-sivulle, jossa näet "Ohjataan..." -tekstin, ja sitten takaisin kotisivulle.
Logto-konsolissa, etsi "Uloskirjautumisen jälkeiset ohjaus-URI:t" sovelluksen asetuksista ja syötä Webflow-sivustosi URL https://your-awesome-site.webflow.io.
Palaa Webflow-suunnittelijaan ja lisää "Kirjaudu ulos" -painike kotisivullesi. Määritä jälleen ID "sign-out" painikkeelle ja lisää seuraava koodi sivutason "Mukautettu koodi" -osioon.
Logto SDK:ssa voimme yleensä käyttää logtoClient.isAuthenticated()-metodia tarkistaaksemme autentikointitilan, jos käyttäjä on kirjautunut sisään, arvo on true; muuten, se on false.
Webflow-sivustossasi voit myös käyttää sitä ohjelmallisesti näyttämään ja piilottamaan sisään- ja uloskirjautumispainikkeet. Sovella seuraavaa mukautettua koodia säätämään painikkeiden CSS-tyyliä vastaavasti.
Lisää kotisivulle joustava säiliö, jonka ID on "container", ja sijoita sen sisälle "Heading 1" -elementti, jonka ID on "username".
Hae automaattisesti käyttäjätiedot onnistuneen sisäänkirjautumisen jälkeen, korvaa käyttäjänimi "Heading 1" -elementissä ja näytä säiliö. Teemme tämän seuraavalla mukautetulla koodilla.
Tämä opetusohjelma on opastanut sinut Webflow'n ja Logton integroinnissa. Käyttämällä @logto/browser SDK:ta, voit helposti integroida käyttäjän autentikoinnin mihin tahansa Webflow-sivustoosi vain muutamalla vaiheella.
Katso lisätietoja täydellisestä Webflow-integraatio-oppaasta dokumentaatiosivustoltamme, kuten JWT henkilökohtaisen tokenin hakeminen ja RBAC (roolipohjainen pääsynhallinta) käsittely.
