Integrera med Webflow

Introduktion#

Webflow är en SaaS-plattform för webbplatsbyggande och hosting, som erbjuder en online visuell redigerare som förenklar processen att designa, bygga och lansera webbplatser med minimal kod.

Den här artikeln kommer att guida dig genom att integrera Logto med dina Webflow-projekt, vilket möjliggör sömlös användarautentisering.

Förutsättningar#

1. Ett Webflow-konto med funktionen för anpassad kod aktiverad (kräver åtminstone “Basic”-planen).
2. En körande Logto-instans, antingen självhostad eller med Logto Cloud.

Integrationssteg#

Förberedelse#

1. Navigera till Logto-konsolen, skapa en applikation med hjälp av ”Vanilla JS”-mallen eller ”Skapa utan ramverk” och välj ”Ensidig applikation” som app-typ.
2. I Webflow-dashbordet, skapa en ny webbplats.

Integrera JS SDK#

I detta steg kommer vi att lägga till global anpassad kod till din webbplats. Eftersom Webflow är en statisk webbplats, kommer vi att använda @logto/browser (Vanilla JS) SDK för användarautentisering. Eftersom NPM inte kan användas, kommer vi att importera vår SDK via en CDN-tjänst som jsdelivr.com.

1. På Webflow-dashbordet, sväva över din nyss skapade webbplats och klicka på “Kugghjul”-ikonen i det övre högra hörnet.
2. På inställningssidan som öppnas, hitta ”Anpassad kod” i den vänstra navigeringsmenyn, och klistra in följande JavaScript-kod i avsnittet ”Head code”. Du kan hitta ditt app-ID och endpoint-URL i Logto-applikationens detaljer.

Implementera inloggning#

1. Gå till Logto-konsolen, i applikationsinställningar, hitta fältet ”Omdirigerings-URI:er” och ange https://your-awesome-site.webflow.io/callback, klicka sedan på ”Spara ändringar”.
2. Återvänd till Webflow-designern och lägg till en ”Logga in”-knapp på startsidan. För enkelhets skull i denna handledning, tilldelar vi också ett ID ”sign-in” till knappen för senare referens med getElementById().

3. Nu lägger vi till lite sidnivåanpassad kod på startsidan. Klicka på kugghjulsikonen i sidmenyn och hitta avsnittet för anpassad kod längst ner. Klistra in koden nedan för att binda klickhanteraren till inloggningsknappen.

4. Skapa en ny ”Callback”-sida i Webflow och placera helt enkelt lite statisk text “Omdirigerar…” på den. Vi ska hantera inloggningsåterkopplingslogiken på denna sida med följande anpassade kod.

5. Nu kan du testa inloggningsflödet genom att distribuera din Webflow-webbplats. Efter distributionen bör ”Logga in”-knappen visas på din startsida. Klicka på den för att navigera till inloggningssidan som hostas av Logto. Efter att ha loggat in, kommer du först att omdirigeras till ”Callback”-sidan, där du kan se texten “Omdirigerar…”, och sedan tillbaka till din startsida.

Implementera utloggning#

1. I Logto-konsolen, lokalisera ”Omdirigera URI:er efter utloggning” i applikationsinställningarna, och ange din Webflow-webbplats URL https://your-awesome-site.webflow.io.
2. Återvänd till Webflow-designern och lägg till en ”Logga ut”-knapp på din startsida. På liknande sätt, tilldela ett ID ”sign-out” till knappen och lägg till följande kod på sidnivåkoden för ”Anpassad kod”.

Hantera autentiseringsstatus#

I Logto SDK kan vi generellt använda metoden logtoClient.isAuthenticated() för att kontrollera autentiseringsstatusen. Om användaren är inloggad kommer värdet att vara true; annars kommer det att vara false.

På din Webflow-webbplats kan du också använda den för att programmatiskt visa och gömma inloggnings- och utloggningsknapparna. Tillämpa följande anpassade kod för att justera knappens CSS i enlighet därmed.

Hämta användarnamn och visa ett välkomstmeddelande#

1. Lägg till en flex-container med ID ”container” på startsidan, och infoga ett ”Rubrik 1”-element inom containern med ID ”username”.
2. Hämta automatiskt användarinfo efter en lyckad inloggning, byt ut namnet i ”Rubrik 1”-elementet och visa containern. Vi kan göra detta med följande anpassade kod.

Kontrollpunkt: Testa din applikation#

Nu, testa din Webflow-webbplats:

1. Distribuera och besök din webbplats URL, inloggningsknappen bör vara synlig.
2. Klicka på inloggningsknappen, SDK kommer att initiera inloggningsprocessen och omdirigera dig till Logto-inloggningssidan.
3. Efter att ha loggat in, kommer du att omdirigeras tillbaka till din webbplats och se användarnamnet och utloggningsknappen.
4. Klicka på utloggningsknappen för att logga ut.

Sammanfattning#

Denna handledning har lett dig genom att integrera Webflow med Logto. Genom att använda @logto/browser SDK kan du enkelt integrera användarautentisering i någon av dina Webflow-webbplatser med bara några få steg.

Vänligen hänvisa till den fullständiga Webflow-integrationsguiden på vår dokumentationssajt för ytterligare detaljer, såsom att hämta JWT-access-token och hantera RBAC (Rollbaserad åtkomstkontroll) etc.

Webflow-demot kan hittas här i skrivskyddat läge, och den distribuerade webbplatsen finns tillgänglig på https://charless-trendy-site-f191c0.webflow.io/.