Jak dodać logowanie jednym kliknięciem za pomocą Google w WordPress

Logowanie Google jednym kliknięciem pozwala odwiedzającym zarejestrować się lub zalogować na Twojej stronie za pomocą konta, które już posiadają. Zamiast tworzyć kolejne nazwy użytkownika i hasło, mogą uzyskać dostęp do Twoich treści lub sklepu internetowego jednym kliknięciem.

Odkryliśmy, że użytkownicy doceniają tego rodzaju prostotę. Oferowanie logowania Google nie tylko sprawia, że proces jest szybszy i łatwiejszy, ale może również poprawić doświadczenie użytkownika, zwiększyć konwersje i zmniejszyć liczbę porzuceń koszyka.

W tym przewodniku krok po kroku pokażemy Ci, jak dodać logowanie Google jednym kliknięciem do swojej witryny WordPress, aby usprawnić całą ścieżkę użytkownika. 🚀

Dlaczego warto dodać logowanie Google jednym kliknięciem w WordPressie?

Logowanie jednym kliknięciem z Google pozwala użytkownikom natychmiast logować się na Twoją stronę WordPress, korzystając z ich konta Google. Oznacza to, że nie muszą oni pamiętać ani wpisywać swojego loginu i hasła za każdym razem.

Ta funkcja może sprawić, że logowanie będzie szybsze i łatwiejsze zarówno dla Ciebie, jak i dla Twoich użytkowników. Oto kilka sytuacji, w których może być szczególnie pomocna:

• Zespoły korzystające z Google Workspace: Członkowie zespołu mogą logować się za pomocą swoich służbowych kont Google zamiast tworzyć oddzielne dane logowania do WordPress.
• Witryny z wieloma autorami: Pisarze i redaktorzy mogą szybko uzyskać dostęp do panelu administracyjnego bez konieczności zarządzania dodatkowymi hasłami.
• Witryny członkowskie: Członkowie mogą logować się szybciej, co poprawia ogólne wrażenia użytkownika.
• Witryny z kursami online : Studenci mogą łatwo się logować i uzyskiwać dostęp do materiałów edukacyjnych bez żadnych przeszkód.

Jeśli prowadzisz prostego bloga osobistego z niewielką liczbą użytkowników, możesz nie potrzebować tej funkcji. Ale w przypadku stron internetowych, na które ludzie logują się regularnie, logowanie jednym kliknięciem z Google może znacznie ułatwić ten proces.

Teraz zobaczmy, jak łatwo dodać logowanie jednym kliknięciem z Google do Twojej witryny WordPress.

Jak dodać logowanie Google jednym kliknięciem w WordPress

Najpierw musisz zainstalować i aktywować wtyczkę Nextend Social Login and Register. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem dla początkujących na temat jak zainstalować wtyczkę WordPress.

W tym samouczku użyjemy darmowej wtyczki, która obsługuje logowanie przez Google, Twitter i Facebook. Istnieje również płatna wersja Nextend Social Login, która dodaje logowanie społecznościowe dla wielu różnych stron, w tym PayPal, Slack i TikTok.

Po aktywacji musisz przejść do Ustawienia » Nextend Social Login w obszarze administracyjnym WordPress. Na tym ekranie zobaczysz różne dostępne opcje logowania społecznościowego.

Aby dodać logowanie Google do swojej witryny WordPress, musisz kliknąć przycisk „Rozpocznij” pod logo Google.

Tutaj zobaczysz, że pierwszym krokiem będzie utworzenie aplikacji Google.

Tworzenie aplikacji Google brzmi technicznie, ale nie martw się. Nie musisz znać żadnego kodu, a przeprowadzimy Cię przez wszystkie kroki.

Tworzenie aplikacji Google

Aby utworzyć tę aplikację, będziesz musiał przełączać się między panelem administracyjnym WordPress a Google Cloud Console. Dobrym pomysłem jest pozostawienie panelu administracyjnego WordPress otwartego w bieżącej karcie i otwarcie nowej karty przeglądarki.

Następnie musisz kliknąć „Wybierz projekt” w górnym menu. Otworzy się okno podręczne, w którym musisz kliknąć przycisk „Nowy projekt”, aby kontynuować.

Spowoduje to otwarcie strony Nowy projekt. Będziesz musiał dodać nazwę projektu i wybrać lokalizację. Nazwa projektu może być dowolna, na przykład „Logowanie Google”.

Jeśli zalogowałeś się przy użyciu konta Google Workspace, lokalizacja zostanie automatycznie wypełniona nazwą Twojej organizacji. Jeśli nie, powinieneś pozostawić ją jako „Brak organizacji”.

Następnie kliknij przycisk „Utwórz”, aby kontynuować.

Zostaniesz teraz przekierowany do panelu „API i usługi”. Na tej stronie musisz kliknąć „Ekran zgody OAuth” w menu po lewej stronie.

Tutaj musisz wybrać typ użytkownika, któremu zezwalasz na logowanie.

Wybierz „Wewnętrzny”, jeśli będą się logować tylko użytkownicy z kontem Google Twojej organizacji. Alternatywnie, wybierz „Zewnętrzny”, jeśli Twoi użytkownicy mają adresy e-mail spoza Twojej organizacji.

Na przykład, każdy z kontem @gmail.com w porównaniu z adresem @twojadomena.com.

Kiedy będziesz gotowy do kontynuowania, kliknij przycisk „Utwórz”. Teraz możesz zacząć dodawać informacje o swojej aplikacji.

Najpierw powinieneś wprowadzić nazwę swojej firmy w polu nazwy aplikacji. Zostanie ona wyświetlona użytkownikowi podczas logowania, na przykład: „Smith Training Services chce dostępu do Twojego konta Google”.

Musisz również dodać adres e-mail, na który zalogowałeś się do Google. Ten adres e-mail będzie wyświetlany na ekranie zgody i pozwoli Twoim użytkownikom zadawać pytania dotyczące ekranu logowania Google.

Gdy to zrobisz, przewiń w dół do sekcji „App domain”. Tutaj musisz dodać linki do strony głównej Twojej witryny, strony z polityką prywatności i strony z warunkami korzystania z usługi.

Następnie musisz kliknąć przycisk „Add Domain”, aby dodać nazwę domeny Twojej witryny, na przykład „example.com”.

Jeśli chcesz dodać logowanie Google jednym kliknięciem do więcej niż jednej witryny, możesz kliknąć przycisk „+ Dodaj domenę”, aby dodać kolejną domenę.

Na koniec musisz dodać jeden lub więcej adresów e-mail, aby Google mogło powiadamiać Cię o wszelkich zmianach w Twoim projekcie.

Po zakończeniu upewnij się, że klikniesz przycisk „Zapisz i kontynuuj”.

Następnie przejdziesz do stron Zakresy i Użytkownicy testowi. Na obu tych stronach po prostu przewiń na dół i kliknij przycisk „Zapisz i kontynuuj”.

Ostatnia strona tego kroku pokaże Ci podsumowanie ustawień Twojego ekranu OAuth zgody.

Następnym zadaniem jest utworzenie kluczy, których Twój wtyczka logowania będzie potrzebować do połączenia z Google Cloud.

Powinieneś kliknąć „Dane uwierzytelniające” w menu po lewej stronie, a następnie kliknąć przycisk „+ Utwórz dane uwierzytelniające” u góry ekranu. Musisz wybrać opcję „Identyfikator klienta OAuth”.

Spowoduje to przejście do strony „Utwórz identyfikator klienta OAuth”.

Powinieneś wybrać „Aplikacja internetowa” z listy rozwijanej „Typ aplikacji”.

Niektóre ustawienia zostaną dodane do strony. Musisz przewinąć w dół do sekcji „Autoryzowane adresy URI przekierowania” i kliknąć przycisk „+ Dodaj URI”.

Teraz musisz wprowadzić następujący adres URL w polu.

Bardzo ważne jest, aby ten adres URL zaczynał się od „https://”, ponieważ Google wymaga bezpiecznego połączenia, aby ta funkcja działała poprawnie.

https://example.com/wp-login.php?loginSocial=google

Pamiętaj tylko, aby zastąpić „example.com” nazwą domeny swojej witryny.

Po wykonaniu tej czynności kliknij przycisk „Utwórz”, aby zapisać ustawienia. Zastosowanie ustawień może potrwać od 5 minut do kilku godzin.

Twój klient OAuth został właśnie utworzony!

Zobaczysz wyskakujące okienko zawierające „Twój identyfikator klienta” i „Twój klucz klienta”. Będziesz musiał wkleić te klucze na stronie ustawień wtyczki z powrotem w obszarze administracyjnym WordPress.

Możesz po prostu kliknąć ikonę „kopiuj” po prawej stronie, aby skopiować klucze pojedynczo.

Dodawanie kluczy Google do wtyczki

Teraz po prostu przełącz się z powrotem na kartę przeglądarki Twojej strony internetowej i kliknij kartę „Ustawienia” w sekcji Ustawienia » Nextend Social Login. Tutaj zobaczysz pola na Identyfikator klienta i Klucz klienta.

Musisz skopiować swoje klucze z Google Cloud Console i wkleić je w te pola.

Po wykonaniu tej czynności upewnij się, że kliknąłeś przycisk „Zapisz zmiany”, aby zapisać swoje ustawienia.

Teraz musisz przetestować, czy ustawienia działają poprawnie. Jest to ważne, ponieważ nie chcesz, aby prawdziwi użytkownicy napotkali błędy podczas próby zalogowania się do Twojej witryny.

Po prostu kliknij przycisk „Zweryfikuj ustawienia”, a wtyczka upewni się, że utworzona aplikacja Google działa poprawnie.

Jeśli postępowałeś zgodnie z krokami, powinieneś zobaczyć powiadomienie „Działa poprawnie – Wyłączony”.

Ta wiadomość może wydawać się myląca, ale to w rzeczywistości dobra wiadomość. „Działa poprawnie” potwierdza, że Twoje ustawienia są poprawne, a połączenie z Google jest udane.

„Wyłączony” oznacza po prostu, że przycisk logowania nie jest jeszcze aktywny na Twojej stronie internetowej.

Możesz teraz kliknąć przycisk „Włącz”, aby logowanie Google było dostępne dla Twoich użytkowników.

Po wykonaniu tej czynności pojawi się komunikat potwierdzający, że logowanie przez Google jest teraz włączone.

Wybór stylu i etykiet przycisku

Domyślny styl i etykieta przycisku Nextend są dość standardowe i będą działać dla większości stron internetowych. Możesz je jednak dostosować, klikając zakładkę „Przyciski” u góry ekranu.

Zobaczysz teraz wszystkie dostępne style przycisku logowania społecznościowego. Aby użyć innego stylu, po prostu kliknij, aby zaznaczyć jego przycisk radiowy.

Po wykonaniu tej czynności możesz również zmienić tekst przycisku, edytując tekst w polu „Etykieta logowania”.

Jeśli chcesz, możesz zastosować podstawowe formatowanie do etykiety logowania za pomocą HTML. Na przykład, możesz pogrubić tekst za pomocą tagów <b> i </b>.

Możesz również edytować pola „Etykieta linku” i „Etykieta odlinkowania”, które pozwalają użytkownikom połączyć i odlinkować Twoją witrynę z ich kontami Google.

Jeśli chcesz umieścić przycisk logowania w innych miejscach swojej witryny, na przykład w widżecie paska bocznego lub na konkretnej stronie, możesz to łatwo zrobić, korzystając z krótkich kodów wtyczki.

Pamiętaj, aby kliknąć przycisk „Zapisz zmiany”, aby zapisać swoje ustawienia.

Wyjście Twojej aplikacji Google z trybu testowego

Teraz pozostała ostatnia rzecz, którą musisz zrobić na karcie przeglądarki Google Cloud. Powinieneś nadal widzieć wyskakujące okienko z Twoim identyfikatorem klienta i kluczem klienta. Możesz zamknąć wyskakujące okienko, klikając „OK” na dole okienka.

Następnie musisz kliknąć „Ekran zgody OAuth” w menu po lewej stronie.

Możesz zobaczyć, że Twoja aplikacja Google jest w trybie „Testowanie”. Pozwala to na testowanie aplikacji z ograniczoną liczbą użytkowników. Teraz, gdy otrzymałeś powiadomienie „Działa dobrze” podczas weryfikacji ustawień za pomocą wtyczki, możesz przenieść ją do trybu „Produkcja”.

Robisz to, klikając przycisk „Opublikuj aplikację”. Następnie zobaczysz wyskakujące okienko z tytułem „Przenieść do produkcji?”

Po prostu kliknij „Potwierdź”, aby umożliwić wszystkim korzystanie z jednostopniowego logowania Google na Twojej stronie.

Jeśli dokładnie postępowałeś zgodnie z tym samouczkiem, to dla większości podstawowych konfiguracji status weryfikacji powinien być teraz ustawiony na „Weryfikacja nie jest wymagana”. 

Twoja aplikacja będzie teraz działać ze wszystkimi użytkownikami Google.

Teraz, gdy użytkownicy logują się do Twojej witryny, będą mieli opcję logowania się za pomocą Google.

Jednakże, jeśli wolą, nadal mogą zalogować się przy użyciu swojej standardowej nazwy użytkownika i hasła WordPress.

Oto jak logowanie Google działa dla Twoich odwiedzających.

Nowi odwiedzający mogą użyć przycisku, aby natychmiast zarejestrować konto na Twojej stronie. Istniejący użytkownicy mogą użyć przycisku do zalogowania się, o ile ich adres e-mail konta jest taki sam jak ich adres e-mail w Google.

Jeśli chcesz dodać przycisk logowania Google w dowolnym innym miejscu na swojej stronie internetowej, możesz to zrobić za pomocą shortcode. Więcej informacji można znaleźć, klikając zakładkę „Usage” w Nextend.

Często zadawane pytania dotyczące logowania Google

Oto lista pytań, które nasi czytelnicy często zadają na temat dodawania logowania Google do swojej strony internetowej.

Czy dodanie logowania przez Google do mojej witryny WordPress jest bezpieczne?

Tak, jest to bardzo bezpieczne. Proces wykorzystuje standardowy protokół OAuth 2.0 firmy Google. Oznacza to, że Twoja witryna nigdy nie obsługuje ani nie przechowuje hasła użytkownika do Google, zapewniając bezpieczeństwo jego danych uwierzytelniających.

Twoja witryna otrzymuje od Google tylko bezpieczny token do weryfikacji tożsamości użytkownika.

Czy mogę dodać opcje logowania dla innych platform mediów społecznościowych?

Absolutnie. Darmowa wtyczka Nextend Social Login obsługuje również Facebook i Twitter. Jeśli zaktualizujesz do ich płatnej wersji, możesz dodać wiele innych platform, takich jak LinkedIn, PayPal, Slack i TikTok.

Co jeśli odwiedzający nie ma konta Google?

Standardowy formularz logowania WordPress pozostaje w pełni funkcjonalny. Dodanie przycisku logowania Google zapewnia dodatkową, wygodną opcję, ale nie usuwa domyślnych pól nazwy użytkownika i hasła.

Czy ta funkcja spowolni moją stronę internetową?

Nie, nie powinno. Wtyczka Nextend Social Login jest lekka i zoptymalizowana pod kątem wydajności. Proces uwierzytelniania odbywa się na szybkich serwerach Google, więc nie będzie miał zauważalnego wpływu na szybkość Twojej witryny.

Czy logowanie przez Google działa z WooCommerce lub stronami członkowskimi?

Tak, świetnie współpracuje z popularnymi wtyczkami eCommerce i członkowskimi. Uproszczenie procesu realizacji zakupu i rejestracji może pomóc zmniejszyć porzucanie koszyków w sklepach WooCommerce i zwiększyć liczbę rejestracji na stronach korzystających z wtyczek takich jak MemberPress.

Dodatkowe zasoby do dostosowywania strony logowania

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać logowanie jednym kliknięciem z Google w WordPress.

Możesz również zapoznać się z innymi przewodnikami na temat dostosowywania doświadczenia logowania na swojej stronie internetowej:

• Jak dodać logowanie przez Facebooka w WordPressie
• Jak dodać logowanie społecznościowe do WordPressa (łatwy sposób)
• Najlepsze wtyczki do strony logowania WordPress (bezpieczne i konfigurowalne)
• Jak dodać logowanie bez hasła w WordPress za pomocą Magic Links
• Jak dodać logowanie numerem telefonu przez OTP w WordPress
• Jak stworzyć niestandardową stronę logowania WordPress (kompletny przewodnik)
• Dlaczego i jak powinieneś ograniczyć próby logowania w WordPress
• Jak dodać niestandardowy adres URL logowania w WordPress (krok po kroku)
• Jak dodać CAPTCHA do formularza logowania i rejestracji w WordPress
• Jak wymagać logowania do wyświetlania strony w WordPress
• Przewodnik dla początkujących: Jak dodać uwierzytelnianie dwuskładnikowe w WordPressie (metoda darmowa)
• Jak ograniczyć logowanie użytkownika do jednego urządzenia w WordPress

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.