Suomi
  • oidc
  • webflow
  • autentikointi

Integrointi Webflow'n kanssa

Step-by-step opas, joka auttaa sinua integroimaan Webflow'n Logtoon kanssa.

Charles
Charles
Developer

Johdanto

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.

Esivaatimukset

  1. Webflow-tili, jonka mukautetun koodin ominaisuus on aktivoitu (vaatii vähintään "Basic"-suunnitelman).
  2. Käytössä oleva Logto-instanssi, joko itse isännöity tai käytössä Logto Cloud.

Integraatiovaiheet

Valmistelu

  1. Siirry Logto-konsoliin, luo sovellus käyttäen "Vanilla JS" -mallia tai "Luo ilman kehystä" ja valitse "Yhden sivun sovellus" sovellustyyppinä.
  2. Luo uusi sivusto Webflow-hallintapaneelissa.

Integroi JS SDK

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.

  1. Webflow-hallintapaneelissa, vie hiiri juuri luodun sivuston päälle ja napsauta oikeassa yläkulmassa olevaa "Hammasrattaan" kuvaketta.
  2. 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.

Toteuta kirjautuminen

  1. 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".
  2. 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.
Sisäänkirjautumispainikkeen asetukset
  1. 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.
Muokkaa sivuasetuksia
  1. Luo uusi "Callback"-sivu Webflowssa ja lisää yksinkertaisesti "Ohjataan..." -teksti. Käsittelemme sisäänkirjautumisen palautuslogiikan tällä sivulla seuraavalla mukautetulla koodilla.
  1. 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.

Toteuta uloskirjautuminen

  1. Logto-konsolissa, etsi "Uloskirjautumisen jälkeiset ohjaus-URI:t" sovelluksen asetuksista ja syötä Webflow-sivustosi URL https://your-awesome-site.webflow.io.
  2. 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.

Käsittele autentikointitila

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.

Hae käyttäjänimi ja näytä tervetuloviesti

  1. Lisää kotisivulle joustava säiliö, jonka ID on "container", ja sijoita sen sisälle "Heading 1" -elementti, jonka ID on "username".
  2. 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.

Tarkistuspiste: Testaa sovellustasi

Nyt testaa Webflow-sivustoasi:

  1. Julkaise ja käy sivustosi URL-osoitteessa, sisäänkirjautumispainikkeen tulisi olla näkyvissä.
  2. Napsauta sisäänkirjautumispainiketta, SDK aloittaa sisäänkirjautumisprosessin, ohjaten sinut Logto-sisäänkirjautumissivulle.
  3. Sisäänkirjautumisen jälkeen sinut ohjataan takaisin sivustollesi, näet käyttäjänimen ja uloskirjautumispainikkeen.
  4. Napsauta uloskirjautumispainiketta kirjautuaksesi ulos.

Yhteenveto

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.

Webflow-demo löytyy täältä vain-luku-tilassa ja julkaistu sivusto on saatavilla osoitteessa https://charless-trendy-site-f191c0.webflow.io/.