2 proste sposoby na włączenie logowania za pomocą numeru telefonu w WooCommerce

Logowanie za pomocą numeru telefonu to przydatna funkcja zaprojektowana w celu zwiększenia komfortu użytkownika oraz ułatwienia procesu logowania i rejestracji. Dlatego wielu użytkowników WooCommerce chce wdrożyć tę funkcję w swoich sklepach internetowych.

Jeśli jesteś jedną z tych osób, to trafiłeś na właściwą stronę internetową. Z tego artykułu dowiesz się, jak umożliwić użytkownikom logowanie się i rejestrację przy użyciu numeru telefonu WooCommerce na dwa sposoby.

Dlaczego warto włączyć logowanie za pomocą numeru telefonu WooCommerce w swoim sklepie?

Rejestracja telefonu i logowanie stały się niezwykle przydatne w sklepach WooCommerce, które w dużej mierze opierają się na numerach telefonów komórkowych klientów. Na przykład dostawa jedzenia, taksówki itp.

Oprócz tych konkretnych nisz, poniżej znajdują się niektóre zalety, które przynoszą korzyści każdej firmie.

• Kupujący mogą zalogować się i zarejestrować bezpośrednio przy użyciu swojego numeru telefonu w Twoim sklepie WooCommerce.
• Pozwala uniknąć spamu związanego z rejestracją klientów w Twoim sklepie internetowym.
• Kupujący mogą również logować się bez zapamiętywania swojej nazwy użytkownika i hasła.
• Numery telefonów klientów możesz zweryfikować za pomocą SMS-ów OTP.
• Wszyscy zweryfikowani klienci są autentyczni i dlatego zapobiegają fałszywym zamówieniom.
• Twoi klienci mogą być szybko powiadamiani za pomocą urządzeń mobilnych, nawet jeśli nie mają dostępu do Internetu.
• Możesz szybko dotrzeć do swoich klientów z promocjami i ofertami za pośrednictwem ich numerów telefonów.

Dzięki tym zaletom możesz z łatwością ulepszyć swoją strategię biznesową, a ostatecznie zwiększyć konsumpcję. Masz wszystko, czego potrzebujesz, aby komunikować się z klientami w najprostszy i najbardziej konkretny sposób.

#1: Włącz logowanie za pomocą numeru telefonu w swoim sklepie WooCommerce za pomocą wtyczki

Istnieje kilka wtyczek, które mogą Ci w tym pomóc. Na przykład:

• Rejestracja i logowanie za pomocą numeru telefonu komórkowego
• Cyfry: numer telefonu komórkowego WordPress Formularz rejestracji i logowania OTP
• Zaloguj się za pomocą numeru telefonu komórkowego dla WooCommerce

Ale w tym samouczku użyjemy wtyczki „Zaloguj się za pomocą numeru telefonu”, ponieważ jest to najpopularniejsza darmowa.

Zainstaluj wtyczkę „ Zaloguj się za pomocą numeru telefonu ” w swoim sklepie WooCommerce

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę „ Zaloguj się z numerem telefonu ” w swoim sklepie WooCommerce . Poniżej znajdują się instrukcje.

1. Po pierwsze, z pulpitu WordPress przejdź do strony Wtyczki> Dodaj nowy .

2. Wpisz „Zaloguj się za pomocą numeru telefonu” w polu wyszukiwania w prawym górnym rogu.
3. Wtyczka powinna pojawić się jako pierwsza na liście. Kliknij przycisk Zainstaluj teraz , który wyświetla się obok jego tytułu.
4. Następnie wtyczka zostanie pobrana. Po zakończeniu zobaczysz, że przycisk Zainstaluj teraz zmieni się w przycisk Aktywuj . Kliknij go.

Utwórz nową stronę logowania/rejestracji

Następnym krokiem jest wstawienie skróconego kodu wtyczki do nowej strony logowania/rejestracji.

1. Przejdź do Strona> Dodaj nowy z pulpitu WordPress.

2. Wybierz tytuł nowej strony, na przykład „ Strona logowania/rejestracji ”.

3. Umieść w nim krótki kod [idehweb_lwp].
4. Opublikuj stronę.

Otrzymuj 10 000 bezpłatnych SMS-ów OTP miesięcznie z Firebase

Gdy nowy użytkownik zarejestruje konto w Twoim sklepie WooCommerce, na jego numer telefonu komórkowego zostanie wysłany kod weryfikacyjny. W związku z tym, aby wtyczka działała poprawnie, musisz zapewnić bramkę SMS.

Możesz używać Firebase od Google. Zapewnia 10 000 SMS-ów OTP miesięcznie za darmo. Oto jak:

1. Zaloguj się do konsoli Firebase przy użyciu swojego konta Google.
2. Kliknij przycisk Utwórz projekt .

3. Teraz musisz wpisać nazwę nowego projektu, zaakceptować warunki Firebase i kliknąć przycisk Utwórz projekt .
4. Po pomyślnym utworzeniu projektu na lewym pasku bocznym przejdź do strony Kompilacja > Uwierzytelnianie .

5. Kliknij przycisk Rozpocznij .
6. Wybierz telefon jako dostawcę.

7. Przełącz przełącznik w prawym górnym rogu, aby włączyć tę opcję. Następnie kliknij przycisk Zapisz .

8. Przewiń w dół do sekcji Autoryzowane domeny . Kliknij przycisk Dodaj domenę i wprowadź nazwę domeny swojego sklepu WooCommerce. Następnie kliknij przycisk Dodaj .

9. Teraz przejdź do zakładki Szablony .

10. Kliknij ikonę ołówka obok tekstu Język szablonu . Następnie wybierz preferowany język do weryfikacji SMS-em.

11. Kliknij ikonę koła zębatego obok tekstu Przegląd projektu i wybierz Ustawienia projektu .

12. Przewiń w dół do sekcji Twoje aplikacje . Następnie kliknij ikonę sieci.

13. Wpisz pseudonim nowej aplikacji. Następnie kliknij przycisk Zarejestruj aplikację .

14. Wybierz opcję Użyj tagu <script> i skopiuj dostarczone skrypty.

15. Teraz przejdź do pulpitu WordPress swojego sklepu WooCommerce. Następnie odwiedź stronę „Ustawienia logowania”.

16. Wklej skrypty w polu tekstowym konfiguracji Firebase.
17. Wróć do okna Firebase, skopiuj klucz API podany w skryptach.

18. Wróć do okna WordPress, wklej klucz API w polu tekstowym Firebase api .

19. Na koniec przewiń w dół na dół strony i kliknij przycisk Zapisz zmiany .

Tutaj możesz również skonfigurować aplikację. Powinieneś sprawdzić ustawienia, aby zobaczyć, czy jest coś, co musisz zmienić.

#2: Włącz logowanie za pomocą numeru telefonu w swoim sklepie WooCommerce programowo

W tym samouczku dodamy jeszcze jedną opcję numeru telefonu w formularzu logowania do Twojego sklepu WooCommerce. Należy pamiętać, że nie powoduje to wysyłania SMS-ów OTP w celu weryfikacji użytkowników, jak w poprzednim samouczku.

Użytkownicy mogą wybrać, co jest dla nich wygodniejsze. Być może widziałeś to w formularzu logowania Amazon. Umożliwia użytkownikom logowanie się za pomocą adresu e-mail lub numeru telefonu.

Będziesz musiał dodać niestandardowy kod PHP do pliku „functions.php” aktualnie aktywnego motywu. Jeśli nie wiesz, jak to zrobić, postępuj zgodnie z poniższymi instrukcjami:

1. Przejdź do strony Wygląd > Edytor plików motywu z pulpitu WordPress.

2. Wybierz motyw, którego używasz w prawym górnym rogu.
3. Uzyskaj dostęp do pliku „functions.php” z prawego paska bocznego.

Dodaj wpis numeru telefonu

Aby włączyć logowanie za pomocą numeru telefonu WooCommerce w witrynie eCommerce WordPress, musisz przechowywać numery telefonów użytkowników w tabeli „wp_usermeta”.

Można to zrobić w momencie rejestracji użytkownika. Możesz użyć poniższego kodu, aby osiągnąć ten cel.

 <?php $user_id = 1; // pass user id $phone_number = 9999999999; add_user_meta( $user_id, 'user_phone', $phone_number);

Gdy masz meta_klucz „user_phone” z jego wartością, możesz sprawdzić poświadczenia użytkownika za pomocą numeru telefonu.

Utwórz formularz logowania

Teraz stwórzmy prosty formularz logowania, w którym użytkownicy będą mogli wprowadzić swoje dane logowania. Będzie zawierał następujące elementy:

• Pole tekstowe do wpisania nazwy użytkownika/e-maila/telefonu
• Pole tekstowe do wpisania hasła
• Jeden raz, aby uniknąć ataków CSRF (jest to ukryte pole)
• Przycisk przesyłania

 <?php $return = log_the_user_in(); if( is_wp_error( $return ) ) { echo $return->get_error_message(); } ?> <form method="post"> <p><input type="text" name="user_login" placeholder="Username, email or mobile" required /></p> <p><input type="password" name="user_password" placeholder="Password" required /></p> <input type="hidden" name="login_nonce" value="<?php echo wp_create_nonce('login_nonce'); ?>" /> <input type="submit" name="btn_login" value="Submit" /> </form>

W powyższych skryptach dodaliśmy kod HTML, zwany także metodą „log_the_user_in()”. Odpowiada za sprawdzanie poświadczeń użytkownika.

Jeśli po stronie serwera wystąpią jakieś błędy, poinformujemy użytkownika metodą „get_error_message()”.

W następnym kroku będziemy musieli zdefiniować metodę „log_the_user_in()” i zwrócić błąd.

Zaloguj się za pomocą numerów telefonów w WooCommerce

Gdy użytkownik wprowadzi poświadczenia i kliknie przycisk Prześlij, otrzymamy poświadczenia i zweryfikujemy je w bazie danych.

Jeśli wszystko się zgadza, zalogujemy ich i przekierujemy na stronę główną. W przypadku fałszywych logowań błędy będą rejestrowane przy użyciu klasy „WP_Error”. W zależności od potrzeb możesz zmienić ją na dowolną inną stronę, modyfikując kod.

Zdefiniujemy metodę „log_the_user_in()” w haku „init”. Ten hak jest uruchamiany po zakończeniu ładowania WordPressa, ale przed wysłaniem nagłówka. Jest to idealne rozwiązanie do przetwarzania formularza metodą POST.

Poniżej kod:

 add_action( 'init', 'log_the_user_in' ); function log_the_user_in() { if ( ! isset( $_POST['btn_login'] ) ) return; if ( ! wp_verify_nonce( $_POST['login_nonce'], 'login_nonce' ) ) { return new WP_Error('invalid_data', 'Invalid data.'); } if ( empty( $_POST['user_login'] ) || empty( $_POST['user_password'] ) ) { return new WP_Error('empty', 'Both fields are required.'); } if ( is_email( $_POST['user_login'] ) ) { // check user by email $user = get_user_by( 'email', $_POST['user_login'] ); } elseif ( is_numeric( $_POST['user_login'] ) ) { // check user by phone number global $wpdb; $tbl_usermeta = $wpdb->prefix.'usermeta'; $user_id = $wpdb->get_var( $wpdb->prepare( "SELECT user_id FROM $tbl_usermeta WHERE meta_key=%s AND meta_value=%s", 'user_phone', $_POST['user_login'] ) ); $user = get_user_by( 'ID', $user_id ); } else { // check user by username $user = get_user_by( 'login', $_POST['user_login'] ); } if ( ! $user ) { return new WP_Error('wrong_credentials', 'Invalid credentials.'); } // check the user's login with their password. if ( ! wp_check_password( $_POST['user_password'], $user->user_pass, $user->ID ) ) { return new WP_Error('wrong_credentials', 'Invalid password.'); } wp_clear_auth_cookie(); wp_set_current_user($user->ID); wp_set_auth_cookie($user->ID); wp_redirect(get_bloginfo('url')); exit; }

Tutaj najpierw zweryfikowaliśmy jednorazowy numer, aby chronić formularz przed niektórymi rodzajami niewłaściwego użycia, złośliwym kodem i atakami CSRF.

Następnie, w oparciu o metodę „is_email()” lub „is_numeric()”, WordPress sprawdzi poprawny adres e-mail lub numer telefonu. Jeśli wprowadzona wartość nie jest adresem e-mail lub numerem telefonu, sprawdzimy nazwę użytkownika.

Ostatnie słowa

To wszystko o dodaniu numeru logowania do numeru telefonu w Twoim sklepie WooCommerce. Mam nadzieję, że pomogło ci to w twoim projekcie.

Jeśli uznałeś ten artykuł za pomocny, podziel się swoimi przemyśleniami i sugestiami w sekcji komentarzy poniżej.