## Wprowadzenie [Webflow](https://webflow.com/) 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](https://cloud.logto.io/). ## 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](https://www.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. ```html ``` ### Implementacja logowania Zakładamy, że Twoja strona Webflow jest uruchomiona na `https://twoja-wspaniała-strona.webflow.io`. 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

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

```html ``` 4. 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. ```html ``` 5. 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. ```js const signOutButton = document.getElementById('sign-out'); const onClickSignOut = () => logtoClient.signOut('https://twoja-wspaniała-strona.webflow.io'); signOutButton.addEventListener('click', onClickSignOut); ``` ### **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. ```js const isAuthenticated = await logtoClient.isAuthenticated(); signInButton.style.display = isAuthenticated ? 'none' : 'block'; signOutButton.style.display = isAuthenticated ? 'block' : 'none'; ``` ### 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. ```js const container = document.getElementById('container'); container.style.display = isAuthenticated ? 'flex' : 'none'; if (isAuthenticated) { (async () => { const user = await logtoClient.fetchUserInfo(); username.innerText = 'Witamy z powrotem: ' + user.name; })(); } ``` ### 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](https://docs.logto.io/quick-starts/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](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) w trybie tylko do odczytu, a wdrożona strona jest dostępna pod adresem [https://charless-trendy-site-f191c0.webflow.io/](https://charless-trendy-site-f191c0.webflow.io/).