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.
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.
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.
W dashboardzie Webflow najedź na swoją nowo utworzoną stronę i kliknij ikonę „Gear” w prawym górnym rogu.
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.
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”.
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().
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.
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.
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ą.
W Logto Console znajdź „Post logout redirect URIs” w ustawieniach aplikacji i wpisz URL swojej strony Webflow https://twoja-wspaniała-strona.webflow.io.
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.
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ą#
Dodaj kontener flex z ID „container” na stronie głównej i wstaw w nim element „Heading 1” z ID „username”.
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.
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.
