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

Firmy patrzące w przyszłość zawsze szukają sposobów na zwiększenie współczynników konwersji, dlatego dbają o wrażenia użytkownika na swojej stronie internetowej. Dlatego wiele firm używa w swoich witrynach 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 logowanie społecznościowe jest użyteczną 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 uwierzytelniania HivePress, 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 z Twoją witryną.

Zanim zaczniemy, ważne jest, aby pamiętać, że rozszerzenie Authentication jest oparte na HivePress, bezpłatnej wtyczce do katalogu WordPress i może być używane tylko w witrynach obsługiwanych przez HivePress. W tym przewodniku użyjemy wtyczki HivePress wraz z domyślnym motywem katalogu WordPress, ListingHive.

Zacznijmy!

Instalowanie dodatku do uwierzytelniania

Przede wszystkim musisz zainstalować rozszerzenie Authentication, przechodząc do sekcji HivePress > Rozszerzenia . Następnie wybierz niezbędny dodatek, zainstaluj go i kontynuuj aktywację rozszerzenia.

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

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

Dodawanie 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ę z Facebookiem i umożliwia zażądanie danych profilu na Facebooku (np. adresu e-mail) wymaganych do zalogowania użytkowników.

Przejdźmy więc do pierwszego kroku.

Rejestracja na Facebooku

Przed utworzeniem aplikacji na Facebooka musisz zarejestrować konto programisty Facebooka. Aby to zrobić, przejdź do strony Facebook dla programistów i kliknij przyciski 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 panelu 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. Mówiąc najprościej, określa to, jakie funkcje możesz dodać do panelu aplikacji. Ponieważ chcesz włączyć funkcję „Logowanie społecznościowe” w rozpatrywanej sprawie, musisz użyć aplikacji typu „Konsument”.

Następnie musisz ustawić nazwę aplikacji (np. nazwę swojej witryny) i wprowadzić prawidłowy adres e-mail, ponieważ będą tam wysyłane wszystkie powiadomienia dla programistów. Nie musisz wymieniać konta Business Manager, jeśli go nie masz. Na koniec kliknij przycisk Utwórz aplikację .

Po utworzeniu aplikacji nastąpi przekierowanie do panelu 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ę „Sieć”.

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 Facebooka, wystarczy wypełnić tylko pole Adres 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.
• Wskaż adres URL Polityki prywatności, aby użytkownicy mogli je przeczytać przed zalogowaniem.
• Określ instrukcje usuwania danych (strona z informacjami o tym, jak odwiedzający Twoją witrynę mogą usunąć swoje dane) .
• Na koniec wybierz kategorię, do której należy Twoja witryna.

Po dodaniu wszystkich wymaganych szczegółów zapisz zmiany.

Włączanie logowania społecznościowego

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

Na koniec przejdź do swojej witryny, przejdź do 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 Facebook, który umożliwia użytkownikom logowanie się do Twojej witryny za pośrednictwem ich kont na Facebooku. Może być jednak konieczne poczekanie kilku minut na wprowadzenie zmian.

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

Dodawanie przycisku logowania Google

Jeśli chcesz dodać przycisk „Zaloguj się przez Google” do swojej witryny internetowej opartej na 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 API Google i kliknij przycisk Utwórz projekt . Następnie musisz wpisać nazwę swojego projektu i kliknąć przycisk Utwórz .

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

Następnie zostaniesz przekierowany do formularza rejestracji aplikacji. W ramach tego formularza musisz:

• Ustaw nazwę aplikacji (np. nazwę swojej witryny) .
• Wskaż adres e-mail wsparcia 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 polityki 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 pulpitu nawigacyjnego.

Następnym krokiem jest utworzenie danych uwierzytelniających API, a mianowicie – identyfikator klienta OAuth. Możesz to zrobić, przechodząc do sekcji Poświadczenia > Utwórz poświadczenia > Identyfikator klienta OAuth .

W tej sekcji musisz wypełnić pole nazwy i wpisać adres URL swojej witryny w polu „Autoryzowane źródła JavaScript”. Opcjonalnie możesz wypełnić pole „Autoryzowane przekierowania”, jeśli chcesz określić ścieżkę, na którą użytkownicy będą przekierowywani po zalogowaniu się w Google.

Gdy skończysz, kliknij przycisk Zapisz .

Włączanie logowania społecznościowego

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

Wniosek

Otóż ​​to! Wykonując powyższe kroki, możesz łatwo skonfigurować rozszerzenie uwierzytelniania i zezwolić użytkownikom na logowanie się za pośrednictwem usług stron trzecich, takich jak Facebook i Google. Po wykonaniu wszystkich kroków w formularzu logowania pojawią się te same przyciski Facebooka i Google, 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 HivePress > Ustawienia > Użytkownicy i zapisałeś zmiany.

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