Jak dodać login społecznościowy do swojej witryny z katalogiem WordPress

Przyszłościowe firmy zawsze szukają sposobów na zwiększenie współczynników konwersji, dlatego dbają o wygodę użytkowników w swojej witrynie. Dlatego wiele firm korzysta na swoich stronach internetowych z logowania społecznościowego, znanego również jako funkcja logowania społecznościowego.

Dla odwiedzających witrynę, logowanie społecznościowe oznacza, że ​​mogą pominąć procedury rejestracji wymagane do utworzenia nowego konta i po prostu zalogować się jednym kliknięciem. To naprawdę wygodna alternatywa dla tradycyjnych formularzy rejestracyjnych, która poprawia UX.

Jednocześnie dla właścicieli witryn internetowych logowanie społecznościowe jest przydatną funkcją, która może uprościć weryfikację użytkownika, zapewniając jednocześnie bardziej niezawodny dostęp do danych użytkownika w celu personalizacji .

W tym krótkim samouczku pokażemy, jak skonfigurować rozszerzenie HivePress Social Login, aby umożliwić odwiedzającym Twoją witrynę logowanie się za pośrednictwem Facebooka i Google. Wyjaśnimy krok po kroku, jak uzyskać identyfikator aplikacji Facebook i identyfikator klienta Google oraz poprawnie zintegrować je ze swoją witryną.

Zanim zaczniemy, ważne jest, aby pamiętać, że rozszerzenie Social Login jest oparte na HivePress, bezpłatnej wtyczce katalogu WordPress i może być używane tylko na stronach internetowych obsługiwanych przez HivePress. W tym instruktażu użyjemy wtyczki HivePress wraz z jej domyślnym uniwersalnym motywem WordPress, ListingHive.

Zacznijmy!

Instalowanie dodatku do logowania społecznościowego

Przede wszystkim musisz zainstalować rozszerzenie Social Login, przechodząc do sekcji WP Dashboard > Wtyczki > Dodaj nowy > Prześlij wtyczkę . Następnie wybierz plik ZIP rozszerzenia, zainstaluj go i kontynuuj, aktywując rozszerzenie.

Po zainstalowaniu dodatku musisz wybrać metody uwierzytelniania dla swojej witryny. Aby to zrobić, przejdź do sekcji WP Dashboard > HivePress > Ustawienia > Użytkownicy i wybierz jedną z dostępnych metod. Jeśli chcesz zezwolić użytkownikom na logowanie się przez Facebook i Google, musisz wybrać obie metody i zapisać zmiany, jak pokazano na zrzucie ekranu poniżej.

Po wybraniu metod uwierzytelniania dla Twojej witryny możesz przejść do następnego kroku.

Dodanie przycisku logowania do Facebooka

Aby dodać przycisk „Zaloguj się przez Facebooka” do swojej witryny, musisz najpierw uzyskać unikalny identyfikator aplikacji z Facebooka. Ten identyfikator łączy Twoją witrynę internetową z Facebookiem i umożliwia zażądanie danych profilu na Facebooku (np. adresu e-mail) wymaganych do logowania użytkowników.

Przejdźmy więc do pierwszego kroku.

Rejestracja na Facebooku

Przed utworzeniem aplikacji na Facebooku musisz zarejestrować konto dewelopera na Facebooku. Aby to zrobić, przejdź do strony Facebook dla programistów i kliknij przycisk Zaloguj się lub Rozpocznij . Następnie musisz zalogować się na swoje konto FB, aby kontynuować. Po zweryfikowaniu konta możesz przejść do następnego kroku.

Tworzenie aplikacji

Po zakończeniu rejestracji możesz przejść do pulpitu nawigacyjnego aplikacji, aby utworzyć swoją pierwszą aplikację. Po prostu kliknij przycisk Utwórz aplikację .

Następnie musisz wybrać typ aplikacji. Typ aplikacji określa, które interfejsy API Facebooka są dostępne dla Twojej aplikacji. Po prostu mówiąc, określa, jakie funkcje będziesz mógł dodać do pulpitu nawigacyjnego aplikacji. Ponieważ chcesz włączyć funkcję „Logowanie społecznościowe” w omawianym przypadku, musisz użyć typu aplikacji „Konsument”.

Następnie musisz ustawić nazwę aplikacji (np. nazwę swojej witryny) i wprowadzić prawidłowy adres e-mail, ponieważ wszystkie powiadomienia programisty będą tam wysyłane. Nie musisz wspominać o koncie Menedżera firmy, jeśli go nie masz. Na koniec kliknij przycisk Utwórz aplikację .

Po utworzeniu aplikacji nastąpi przekierowanie do pulpitu nawigacyjnego aplikacji. Tutaj musisz wybrać funkcje, które chcesz dodać do swojej aplikacji. Po prostu kliknij przycisk Konfiguruj w sekcji Logowanie do Facebooka , a na następnej stronie wybierz platformę „Web”.

Następnie zobaczysz formularz konfiguracji, w którym możesz wprowadzić dane swojej witryny. Aby umożliwić użytkownikom logowanie się do Twojej witryny przez Facebook, wystarczy wypełnić tylko pole Adres URL witryny. Ale jeśli jesteś bardziej doświadczonym użytkownikiem, możesz również wypełnić inne pola.

Następnym krokiem jest przejście do sekcji Ustawienia> Podstawowe na lewym pasku bocznym.

Na stronie ustawień musisz:

• Wpisz domenę swojej witryny.
• Podaj adres URL polityki prywatności, aby użytkownicy mogli się z nią zapoznać przed zalogowaniem.
• Określ Instrukcje usuwania danych (strona z informacjami o tym, jak osoby odwiedzające Twoją witrynę mogą usunąć swoje dane) .
• Na koniec wybierz kategorię, do której należy Twoja witryna.

Po dodaniu wszystkich wymaganych informacji zapisz zmiany.

Włączanie logowania społecznościowego

Ok, właśnie utworzyłeś aplikację. Teraz musisz przełączyć tryb aplikacji na „Na żywo” i skopiować identyfikator aplikacji.

Na koniec przejdź do swojej witryny, przejdź do sekcji WP Dashboard > HivePress > Ustawienia > Integracje , wklej swój identyfikator aplikacji Facebook w polu Identyfikator aplikacji i zapisz zmiany.

Otóż ​​to! Teraz w formularzu logowania powinien znajdować się przycisk Facebooka, który umożliwia użytkownikom logowanie się do Twojej witryny za pośrednictwem ich kont na Facebooku. Jednak być może będziesz musiał poczekać kilka minut, zanim zmiany zostaną wprowadzone.

Przejdźmy teraz do następnej części tego samouczka, aby utworzyć i dodać przycisk logowania Google.

Dodanie przycisku logowania Google

Jeśli chcesz dodać przycisk „Zaloguj się przez Google” do swojej witryny obsługiwanej przez HivePress, musisz uzyskać unikalny identyfikator klienta od Google, który połączy Twoją witrynę z interfejsem API uwierzytelniania Google. Więc zróbmy to!

Tworzenie nowego projektu

Pierwszym krokiem jest utworzenie nowego projektu Google API (możesz użyć istniejącego projektu, jeśli już go masz). Aby to zrobić, przejdź do konsoli Google API i kliknij przycisk Utwórz projekt . Następnie musisz wprowadzić nazwę swojego projektu i kliknąć przycisk Utwórz .

Teraz musisz przejść do sekcji ekranu zgody OAuth i wybrać opcję ekranu zgody OAuth (wewnętrznej lub zewnętrznej) zgodnie z wymaganiami Twojej witryny. Na potrzeby tego samouczka wybierzemy opcję Zewnętrzna .

Następnie zostaniesz przekierowany do formularza rejestracji aplikacji. W ramach tego formularza należy:

• Ustaw nazwę aplikacji (np. nazwę swojej witryny) .
• Wskaż adres e-mail pomocy technicznej użytkownika i adres e-mail programisty dzięki czemu Google może powiadamiać Cię o wszelkich zmianach w Twoim projekcie.
• Podaj linki do swojej strony głównej, strony z polityką prywatności oraz link do strony z warunkami korzystania z usługi.
• Na koniec dodaj domenę swojej witryny.

Po zakończeniu kliknij przycisk Zapisz . Możesz pominąć pozostałe kroki w formularzu rejestracyjnym i wrócić do swojego Pulpitu nawigacyjnego.

Kolejnym krokiem jest utworzenie poświadczeń API, a mianowicie – OAuth Client ID. Możesz to zrobić, przechodząc do sekcji Poświadczenia > Utwórz dane uwierzytelniające > Identyfikator klienta OAuth .

W tej sekcji musisz wypełnić pole nazwy i wpisać adres URL swojej witryny w polu „Authorized JavaScript Origins”. Opcjonalnie możesz wypełnić pole „Adresy URL autoryzowanych przekierowań”, jeśli chcesz określić ścieżkę, do której użytkownicy będą przekierowywani po zalogowaniu się w Google.

Po zakończeniu kliknij przycisk Zapisz .

Włączanie logowania społecznościowego

Wreszcie masz unikalny identyfikator klienta. Teraz musisz go skopiować i wkleić w sekcji WP Dashboard > HivePress > Ustawienia > Integracje > Identyfikator klienta . Nie zapomnij zapisać zmian.

Wniosek

Otóż ​​to! Wykonując powyższe czynności, możesz łatwo skonfigurować rozszerzenie Social Login i umożliwić użytkownikom logowanie się za pośrednictwem usług stron trzecich, takich jak Facebook i Google. Po wykonaniu wszystkich kroków będziesz mieć te same przyciski Facebooka i Google w formularzu logowania, jak pokazano na zrzucie ekranu poniżej.

Jeśli masz problemy z dodaniem przycisków logowania społecznościowego, spróbuj wyłączyć wtyczki innych firm (może występować problem z buforowaniem lub konflikt z wtyczkami innych firm) . Upewnij się również, że włączyłeś metody uwierzytelniania w sekcji WP Dashboard > HivePress > Ustawienia > Użytkownicy i zapisz zmiany.

Dodatkowo, jeśli chcesz zoptymalizować swoją witrynę, zalecamy zapoznanie się z naszym samouczkiem, jak przyspieszyć witrynę zbudowaną w HivePress.

Możesz także sprawdzić inne nasze artykuły:

• Lista najlepszych wtyczek do katalogów WordPress;
• Lista najpopularniejszych darmowych motywów katalogów WordPress.