## Johdanto [Webflow](https://webflow.com/) 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](https://cloud.logto.io/). ## 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](https://www.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. ```html ``` ### Toteuta kirjautuminen Oletamme, että Webflow-sivustosi toimii osoitteessa `https://your-awesome-site.webflow.io`. 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

3. 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

```html ``` 4. Luo uusi "Callback"-sivu Webflowssa ja lisää yksinkertaisesti "Ohjataan..." -teksti. Käsittelemme sisäänkirjautumisen palautuslogiikan tällä sivulla seuraavalla mukautetulla koodilla. ```html ``` 5. 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. ```js const signOutButton = document.getElementById('sign-out'); const onClickSignOut = () => logtoClient.signOut('https://your-awesome-site.webflow.io'); signOutButton.addEventListener('click', onClickSignOut); ``` ### **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. ```js const isAuthenticated = await logtoClient.isAuthenticated(); signInButton.style.display = isAuthenticated ? 'none' : 'block'; signOutButton.style.display = isAuthenticated ? 'block' : 'none'; ``` ### 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. ```js const container = document.getElementById('container'); container.style.display = isAuthenticated ? 'flex' : 'none'; if (isAuthenticated) { (async () => { const user = await logtoClient.fetchUserInfo(); username.innerText = 'Tervetuloa takaisin: ' + user.name; })(); } ``` ### 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](https://docs.logto.io/quick-starts/webflow/) dokumentaatiosivustoltamme, kuten JWT henkilökohtaisen tokenin hakeminen ja RBAC (roolipohjainen pääsynhallinta) käsittely. Webflow-demo löytyy [täältä](https://preview.webflow.com/preview/charless-trendy-site-f191c0?utm_medium=preview_link&utm_source=designer&utm_content=charless-trendy-site-f191c0&preview=0eae5f73661a8a5791787f0438bc29de&workflow=preview) vain-luku-tilassa ja julkaistu sivusto on saatavilla osoitteessa [https://charless-trendy-site-f191c0.webflow.io/](https://charless-trendy-site-f191c0.webflow.io/).