Logowanie przez Google w WooCommerce (i przez Facebooka) krok po kroku

WooCommerce nie ma w ustawieniach kont opcji logowania kontem Google ani Facebooka — potrzebna jest wtyczka, na przykład WooCommerce Social Login. Potem w Google Cloud i w Meta for Developers zakładasz własną aplikację dla swojego sklepu, wklejasz jej identyfikator i sekret w ustawieniach wtyczki i publikujesz aplikację, żeby mógł z niej korzystać każdy klient, a nie tylko Ty. To jednorazowa praca dla każdego serwisu.

Niżej prowadzimy przez cały proces: co przygotować w sklepie, kroki w Google i na Facebooku z nazwami pól, gdzie pokazać przyciski, co stanie się z kontami obecnych klientów i jak sprawdzić, że wszystko działa.

Jak działa logowanie przez Google w sklepie

Klient na stronie logowania albo w kasie widzi przycisk „Zaloguj przez Google” (lub Facebooka). Klika, potwierdza w okienku Google, że zgadza się udostępnić sklepowi swoje dane, i wraca do sklepu już zalogowany. Jeśli nie miał jeszcze konta, konto zakłada się samo przy pierwszym logowaniu. Dostaje ono losowe hasło, a loginem jest zwykle adres e-mail — klient nie musi niczego wymyślać ani zapamiętywać.

Dla sklepu oznacza to krótszą rejestrację i mniej próśb o reset zapomnianego hasła. Inne sposoby na szybszy zakup, na przykład krótszy formularz zamówienia, opisaliśmy w poradniku o upraszczaniu kasy w WooCommerce. A jeśli pokazujesz ceny tylko zalogowanym klientom (jak ukryć ceny w WooCommerce), logowanie kontem Google skraca drogę do ceny.

Dwa pojęcia, które pojawią się w każdym kroku:

• Aplikacja — wpis o Twoim sklepie w Google albo na Facebooku. Dzięki niemu Google wie, który sklep prosi klienta o zalogowanie.
• Identyfikator i sekret aplikacji (w Google: Client ID i Client Secret, na Facebooku: App ID i App Secret) — coś jak login i hasło Twojego sklepu do usługi logowania. Sekret wklejasz tylko w ustawieniach wtyczki i nikomu go nie wysyłasz.

To są dane Twojej aplikacji w Google i na Facebooku, zakładanej na Twoim koncie — nie mają nic wspólnego z zakupem wtyczki.

Zanim zaczniesz: co musi mieć sklep

Sprawdź pięć rzeczy, bo każda z nich potrafi zatrzymać logowanie:

1. HTTPS i domena. Google przyjmuje tylko adresy zaczynające się od https, a Facebook pozwala logować się tylko na stronach https. Sklep musi działać pod domeną, nie pod samym adresem IP.
2. „Ładne” linki. W WordPressie w Ustawienia > Bezpośrednie odnośniki wybierz dowolny układ inny niż „Prosty”. Bez tego logowanie może kończyć się błędem 404.
3. Polityka prywatności i regulamin. Facebook prosi o adresy obu stron w ustawieniach aplikacji.
4. Pamięć podręczna (cache). Wtyczki przyspieszające stronę i niektóre hostingi potrafią zepsuć logowanie. Adres, pod którym wtyczka obsługuje logowanie (zawiera wc-api), trzeba wyłączyć z cache.
5. Konta. Potrzebujesz konta Google (do Google Cloud) i konta na Facebooku (do Meta for Developers). Przy pierwszym wejściu do Meta for Developers zarejestrujesz się i zweryfikujesz jako deweloper.

Przy okazji zajrzyj do ustawień kont w WooCommerce (WooCommerce > Settings > Accounts and Privacy). Ustalisz tam, czy klient może kupić bez konta, zalogować się w kasie i założyć konto w kasie, na stronie „Moje konto” albo po zamówieniu. Szybka rejestracja w sklepie WooCommerce przez Google lub Facebooka działa obok tych opcji: klient, który woli zwykłe konto z hasłem, nadal może je założyć. Jeśli wyłączyłeś zakładanie kont przez klientów, w teście na końcu sprawdź, czy logowanie przez Google tworzy nowe konto.

Krok 1: wtyczka i adres przekierowania

Zacznij od wtyczki, a nie od Google — dopiero jej ustawienia pokazują adres przekierowania, który wkleisz w Google i na Facebooku. Adres przekierowania to adres w Twoim sklepie, na który Google odsyła klienta po zalogowaniu.

1. Zainstaluj i włącz WooCommerce Social Login.
2. Wejdź w WooCommerce > Settings > Social Login. Każdy serwis ma tu osobną podstronę z polami: Enable (włącz), ID, Secret, Login Button Text (napis na przycisku logowania) i Link Button Text (napis na przycisku łączenia konta).
3. Otwórz podstronę Google i skopiuj adres przekierowania. To samo zrobisz później dla Facebooka.

Panel wtyczki jest po angielsku. Wtyczka działa zarówno z klasycznym formularzem zamówienia, jak i z nową kasą zbudowaną z bloków.

Krok 2: logowanie przez Google (Google Cloud)

Ekrany Google i Facebooka często się zmieniają — nazwy przycisków mogą się nieco różnić od opisanych niżej. Pracujesz w Google Cloud Console.

1. Utwórz projekt. Jego nazwę klienci zobaczą przy zatwierdzaniu logowania, więc nazwij go jak sklep.
2. W projekcie wejdź w APIs & Services > OAuth consent screen (ekran zgody) i kliknij Get Started. Uzupełnij cztery części: App Information, Audience, Contact Information i Finish, a potem kliknij Create.
3. W części Audience wybierz External — wtedy zalogować się może każdy, kto ma konto Google. Opcja Internal działa tylko dla członków jednej organizacji w Google Workspace, więc klienci sklepu by się nie zalogowali.
4. Kliknij Create OAuth client i wybierz typ Web application.
5. W polu Authorized JavaScript origins wpisz adres sklepu, na przykład https://twojsklep.pl.
6. W polu Authorized redirect URIs wklej adres przekierowania skopiowany z ustawień wtyczki. Nie przepisuj go z przykładów w internecie — w Twoim sklepie może wyglądać inaczej.
7. Kliknij Create i od razu skopiuj Client ID oraz Client Secret — sekret Google pokazuje tylko po utworzeniu klienta.
8. Wklej oba w WooCommerce > Settings > Social Login > Google, zaznacz Enable i zapisz.

Najczęstsza pułapka: aplikacja w trybie testowym

Nowa aplikacja w Google jest w stanie „Testing”. Wtedy zalogować się może najwyżej 100 osób, które sam wpiszesz na listę testerów. Ty testujesz — działa. Klient próbuje — nie wpuszcza go. Żeby logowanie działało dla każdego, w ustawieniach odbiorców aplikacji kliknij Publish app; stan zmieni się na „In production”. Instrukcje wtyczki tego kroku nie opisują.

Krok 3: logowanie przez Facebook w WooCommerce (Meta for Developers)

Pracujesz na stronie Meta for Developers.

1. Wejdź w My Apps. Jeśli to Twoja pierwsza wizyta, najpierw zarejestruj się i zweryfikuj konto dewelopera.
2. Utwórz aplikację: podaj nazwę i e-mail kontaktowy, jako przypadek użycia (use case) wybierz Other, jako typ aplikacji Consumer. Portfolio firmowe (Business portfolio) nie jest potrzebne.
3. W App Settings > Basic uzupełnij nazwę, App domains (domenę sklepu), e-mail kontaktowy oraz adresy polityki prywatności i regulaminu (Terms of Service).
4. W Facebook Login > Settings, w polu Valid OAuth Redirect URIs, wklej adres przekierowania z WooCommerce > Settings > Social Login > Facebook.
5. Z App Settings > Basic skopiuj App ID i App Secret i wklej je w ustawieniach Facebooka we wtyczce. Sprawdź, czy w ustawieniach wtyczki włączona jest opcja Force SSL for all providers — Facebook jej wymaga.
6. Przełącz aplikację na Live (przełącznik u góry ekranu).

Ostatni krok jest odpowiednikiem publikacji w Google. Dopóki aplikacja jest w trybie deweloperskim, zalogują się tylko osoby, które mają w niej rolę — Ty i dodani testerzy. Klienci nie.

Do samego logowania wystarczą podstawowe uprawnienia (profil publiczny i e-mail). Meta przyznaje je bez przeglądu aplikacji (App Review), więc nie musisz o nic wnioskować.

Jeśli Facebook żąda dodatkowych pól albo pokazuje błędy, sprawdź, czy w aplikacji dodana jest platforma (Platform); gdy to nie pomaga, producent wtyczki radzi usunąć aplikację i założyć ją od nowa. Błąd domeny zwykle znika po włączeniu Force SSL i wpisaniu domeny w App domains. Jeśli używasz iThemes Security, wyłącz w nim opcję „Filter Long URL Strings”.

Krok 4: gdzie pokazać przyciski

Wróć do WooCommerce > Settings > Social Login. W ustawieniach wyświetlania wybierasz, gdzie pojawią się przyciski:

• na stronie logowania „Moje konto”,
• w kasie, przy logowaniu,
• w osobnym komunikacie w kasie.

W kasie wybierz jedno z dwóch miejsc, nie oba — tak radzi producent wtyczki.

Klient, który jest już zalogowany, nie widzi przycisków w kasie. Możesz też pokazać zalogowanemu klientowi na stronie podziękowania po zamówieniu przycisk połączenia konta z Google lub Facebookiem.

W tych samych ustawieniach zmienisz tekst nad przyciskami (osobno dla kasy i dla pozostałych miejsc), napisy na przyciskach i ich kolejność — przeciągając serwisy na liście. Przyciski możesz też wstawić w dowolne miejsce strony kodem krótkim [woocommerce_social_login_buttons] albo widżetem. Jeśli klient ma po zalogowaniu trafić na konkretną stronę, dopisz w kodzie krótkim adres w opcji return_url — w ustawieniach ogólnych takiej opcji nie ma.

Oprócz Google i Facebooka wtyczka obsługuje X (dawniej Twitter), Amazon, LinkedIn, PayPal i Disqus; włączasz tylko te, których chcesz. Każdy z nich ma własne wymagania (na przykład PayPal tylko dla konta firmowego lub Premier, LinkedIn z weryfikacją aplikacji). Logowania przez Instagram nie ma.

Co się stanie z kontami Twoich klientów

Jeśli sklep działa od dawna i ma już klientów z kontami, ten fragment jest dla Ciebie najważniejszy. Zasady są proste:

• Klient ma już konto z tym samym e-mailem co w Google lub na Facebooku — wtyczka łączy je automatycznie. Nie powstaje drugie konto, a zamówienia zostają tam, gdzie były, bo to wciąż to samo konto.
• Administrator i kierownik sklepu są wyjątkiem: ich konta nie łączą się automatycznie po e-mailu. Muszą zalogować się zwykłym hasłem i połączyć konto w „Moim koncie”.
• X (Twitter) nie podaje adresu e-mail, więc nie połączy się z istniejącym kontem — to dobry powód, by w sklepie postawić na Google i Facebooka.
• Klient może odmówić udostępnienia e-maila. Wtyczka poprosi go wtedy o adres, ale logowanie może się nie udać.
• Zalogowany klient może w „Moim koncie” podłączyć kolejne serwisy albo je odłączyć. Odłączenie nie usuwa konta, ale klient może potrzebować resetu hasła, bo jego hasło było losowe.
• Wyłączenie wtyczki nie usuwa kont. Klienci zalogują się zwykłym loginem po zresetowaniu hasła.

Ile osób rejestruje się przez każdy serwis, zobaczysz w WooCommerce > Reports > Customers > Social Registration, a na liście użytkowników w kolumnie Social Profiles.

Fałszywe rejestracje i boty to osobny problem — opisaliśmy go w poradniku jak zabezpieczyć sklep WooCommerce przed spamem i botami.

Dopisz w polityce prywatności, że klient może zalogować się kontem Google lub Facebooka — co dokładnie, oceni prawnik; to nie jest porada prawna.

Sprawdź, czy działa

Testuj w oknie prywatnym przeglądarki, jako gość — zalogowany administrator nie zobaczy przycisków w kasie. Przejdź po kolei:

1. Jako gość wejdź na „Moje konto” i zaloguj się przez Google. Powinno powstać nowe konto.
2. Wyloguj się i zaloguj przez Google jeszcze raz. Powinieneś trafić na to samo konto, a nie na nowe.
3. Weź drugie konto Google, którego jeszcze nie używałeś w sklepie. Załóż w sklepie zwykłe konto klienta z jego adresem e-mail, wyloguj się i zaloguj przez Google tym drugim kontem. Powinieneś trafić do konta założonego chwilę wcześniej, a nie do nowego.
4. Wejdź do kasy jako gość i sprawdź, czy przyciski są w miejscu wybranym w ustawieniach.
5. Poproś kogoś, kto nie jest testerem Twojej aplikacji, o logowanie przez Facebooka (i przez Google).
6. Zajrzyj do raportu Social Registration.

Gdy coś nie działa:

Wtyczka i pomoc przy wdrożeniu

WooCommerce Social Login kupisz u nas za 123 zł. Dostajesz dostęp do plików i aktualizacji przez 365 dni; aktualizacje wgrywasz ręcznie, a wtyczka nie ma wsparcia autorów — zasady zakupu opisaliśmy na stronie Wtyczki GPL.

Wolisz zlecić wdrożenie? Każdą wtyczkę z naszej oferty możemy zainstalować i skonfigurować w ramach usługi Instalacja i konfiguracja wtyczek — 250 zł netto (307,50 zł brutto) za godzinę pracy.

Jeśli potrzebujesz więcej wtyczek, pakiet wszystkich wtyczek i motywów daje dostęp do całego katalogu na rok za 999 zł.