Polski
  • oidc
  • webflow
  • uwierzytelnianie

Integracja z Webflow

Przewodnik krok po kroku, który pomoże Ci zintegrować Webflow z Logto.

Charles
Charles
Developer

Wprowadzenie

Webflow to platforma SaaS do budowania i hostowania stron internetowych, oferująca internetowy edytor wizualny, który upraszcza proces projektowania, budowania i uruchamiania stron internetowych przy minimalnym użyciu kodu.

Ten artykuł przeprowadzi Cię przez integrację Logto z Twoimi projektami Webflow, umożliwiając bezproblemową autoryzację użytkownika.

Wymagania wstępne

  1. Konto Webflow z włączoną funkcją niestandardowego kodu (wymagany jest co najmniej plan „Basic”).
  2. Działająca instancja Logto, w wersji samodzielnie hostowanej lub za pomocą Logto Cloud.

Kroki integracji

Przygotowanie

  1. Przejdź do Logto Console, utwórz aplikację, używając szablonu „Vanilla JS” lub „Utwórz bez frameworka”, i wybierz „Single page application” jako typ aplikacji.
  2. W dashboardzie Webflow utwórz nową stronę.

Integracja z JS SDK

W tym kroku dodamy niestandardowy kod na poziomie globalnym do Twojej strony. Ponieważ Webflow jest statyczną stroną internetową, wykorzystamy SDK @logto/browser (Vanilla JS) do uwierzytelniania użytkowników. Ponieważ NPM nie może być używany, zaimportujemy nasze SDK za pośrednictwem usługi CDN, takiej jak jsdelivr.com.

  1. W dashboardzie Webflow najedź na swoją nowo utworzoną stronę i kliknij ikonę „Gear” w prawym górnym rogu.
  2. Na stronie ustawień, która się otworzy, znajdź „Custom code” w lewym menu nawigacyjnym i wklej poniższy kod JavaScript w sekcji „Head code”. Możesz znaleźć swój identyfikator aplikacji i URL endpointa w szczegółach aplikacji Logto.

Implementacja logowania

  1. Przejdź do Logto Console, w ustawieniach aplikacji znajdź pole „Redirect URIs” i wpisz https://twoja-wspaniała-strona.webflow.io/callback, a następnie kliknij „Zapisz zmiany”.
  2. Wróć do Webflow designer i dodaj przycisk „Zaloguj się” na stronie głównej. Dla uproszczenia tego przewodnika przypiszemy również ID „sign-in” do przycisku, aby później można było odwołać się do niego za pomocą getElementById().
Ustawienia przycisku logowania
  1. Teraz dodajmy trochę niestandardowego kodu na poziomie strony do strony głównej. Kliknij ikonę koła zębatego w menu strony, a następnie znajdź sekcję niestandardowego kodu na dole. Wklej poniższy kod, aby powiązać handler kliknięcia dla przycisku logowania.
Edytuj ustawienia strony
  1. Utwórz nową stronę „Callback” w Webflow i po prostu dodaj trochę statycznego tekstu „Przekierowywanie...”. Będziemy obsługiwać logikę callbacku logowania na tej stronie za pomocą poniższego niestandardowego kodu.
  1. Teraz możesz przetestować proces logowania, wdrażając swoją stronę Webflow. Po wdrożeniu, przycisk „Zaloguj się” powinien pojawić się na stronie głównej. Kliknij go, aby przejść do strony logowania hostowanej przez Logto. Po zalogowaniu zostaniesz najpierw przekierowany na stronę „Callback”, gdzie zobaczysz tekst „Przekierowywanie...”, a następnie na powrót na stronę główną.

Implementacja wylogowania

  1. W Logto Console znajdź „Post logout redirect URIs” w ustawieniach aplikacji i wpisz URL swojej strony Webflow https://twoja-wspaniała-strona.webflow.io.
  2. Wróć do Webflow designer i dodaj przycisk „Wyloguj się” na swojej stronie głównej. Podobnie, przypisz ID „sign-out” do przycisku i dodaj poniższy kod do „Custom code” na poziomie strony.

Obsługa statusu uwierzytelnienia

W SDK Logto, zazwyczaj możemy użyć metody logtoClient.isAuthenticated(), aby sprawdzić status uwierzytelnienia; jeśli użytkownik jest zalogowany, wartość będzie true; w przeciwnym razie będzie to false.

Na Twojej stronie Webflow możesz również używać tej metody do programowego wyświetlania i ukrywania przycisków logowania i wylogowania. Zastosuj poniższy niestandardowy kod, aby odpowiednio dostosować CSS przycisków.

Pobierz nazwę użytkownika i wyświetl wiadomość powitalną

  1. Dodaj kontener flex z ID „container” na stronie głównej i wstaw w nim element „Heading 1” z ID „username”.
  2. Automatycznie pobierz informacje o użytkowniku po pomyślnym zalogowaniu, zastąp nazwę użytkownika w elemencie „Heading 1” i wyświetl kontener. Możemy to zrobić za pomocą poniższego niestandardowego kodu.

Punkt kontrolny: Przetestuj swoją aplikację

Teraz przetestuj swoją stronę Webflow:

  1. Wdróż i odwiedź URL swojej strony, przycisk logowania powinien być widoczny.
  2. Kliknij przycisk logowania, SDK rozpocznie proces logowania, przekierowując Cię na stronę logowania Logto.
  3. Po zalogowaniu zostaniesz przekierowany z powrotem na swoją stronę, gdzie zobaczysz nazwę użytkownika i przycisk wylogowania.
  4. Kliknij przycisk wylogowania, aby się wylogować.

Podsumowanie

Ten tutorial poprowadził Cię przez integrację Webflow z Logto. Dzięki wykorzystaniu SDK @logto/browser możesz łatwo zintegrować uwierzytelnianie użytkowników z dowolną stroną Webflow za pomocą kilku prostych kroków.

Więcej szczegółów znajdziesz w pełnym przewodniku integracji z Webflow na naszej stronie dokumentacji, na przykład o pobieraniu tokena dostępu JWT i obsłudze RBAC (kontrola dostępu oparta na rolach) itp.

Demo Webflow można znaleźć tutaj w trybie tylko do odczytu, a wdrożona strona jest dostępna pod adresem https://charless-trendy-site-f191c0.webflow.io/.