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?

Posiadanie aktywowanego logowania Google jednym kliknięciem na Twoim formularzu logowania WordPress pozwala użytkownikom zaoszczędzić czas, szybko logując się za pomocą swojego konta Google. Zapobiega to konieczności każdorazowego wprowadzania danych logowania.

Jeśli prowadzisz prostego bloga, ta funkcja może okazać się nieprzydatna.

Ale jeśli Twoja organizacja korzysta z Google Workspace do profesjonalnych adresów e-mail firmowych, Twoi członkowie zespołu mogą używać kont Google swojej organizacji do logowania.

Funkcja pojedynczego logowania, taka jak logowanie do Google jednym kliknięciem, jest również bardzo pomocna dla każdej strony internetowej, która wymaga od użytkowników logowania, takiej jak strony wieloautorskie, strony członkowskie, i strony sprzedające kursy online.

Stwórz swoją idealną formę rejestracji użytkowników

WPForms to najlepszy kreator formularzy metodą przeciągnij i upuść dla WordPress. Chociaż logowania społecznościowe są świetne, WPForms pozwala tworzyć w pełni niestandardowe formularze rejestracji użytkowników, aby zbierać dokładnie te informacje, których potrzebujesz od swoich użytkowników.

Możesz również tworzyć formularze kontaktowe, formularze płatności, ankiety i inne w zaledwie kilka minut.

Zacznij korzystać z WPForms już dziś

Teraz przyjrzyjmy się, jak łatwo dodać logowanie Google jednym kliknięciem do Twojej strony WordPress.

Jak dodać logowanie Google jednym kliknięciem w WordPress

Najpierw musisz zainstalować i aktywować wtyczkę Nextend Social Login and Register. Więcej szczegółów znajdziesz w naszym przewodniku dla początkujących jak zainstalować wtyczkę WordPress.

W tym samouczku użyjemy bezpłatnej 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 WordPress a Google Developers Console. Dobrym pomysłem jest pozostawienie panelu WordPress otwartego w bieżącej karcie i otwarcie nowej karty przeglądarki.

Teraz możesz odwiedzić stronę Google Developers Console. Jeśli nie jesteś jeszcze zalogowany, zostaniesz poproszony o zalogowanie się za pomocą swojego konta Google.

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, z którym zalogowałeś się do Google. Pozwoli to użytkownikom na zadawanie pytań dotyczących ekranu logowania Google.

Po wykonaniu tej czynności przewiń w dół do sekcji „Domena aplikacji”. Tutaj musisz dodać linki do strony głównej Twojej witryny, strony z polityką prywatności oraz strony z warunkami korzystania z usługi.

Następnie musisz kliknąć przycisk „Dodaj domenę”, aby dodać nazwę domeny swojej witryny, taką jak „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 podsumowanie ustawień ekranu zgody na OAuth.

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 postępowałeś zgodnie z tym samouczkiem ostrożnie, status weryfikacji powinien teraz brzmieć „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 znajdziesz, klikając zakładkę „Użycie” 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. Darmowy plugin Nextend Social Login obsługuje również Facebooka i Twittera. 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 do e-commerce i członkostwa. Uproszczenie procesu realizacji zakupu i rejestracji może pomóc zmniejszyć liczbę porzuconych 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.