2 простых способа включить вход по номеру телефона в WooCommerce

Вход по номеру телефона — это удобная функция, предназначенная для улучшения взаимодействия с пользователем и упрощения процесса входа и регистрации. Поэтому многие пользователи WooCommerce хотят внедрить эту функцию в свои интернет-магазины.

Если вы один из таких людей, то вы попали на нужную веб-страницу. В этой статье вы узнаете, как разрешить пользователям входить в систему и регистрироваться с помощью своего номера телефона WooCommerce двумя способами.

Почему вы должны включить вход по номеру телефона WooCommerce в свой магазин?

Регистрация по телефону и вход в систему стали чрезвычайно полезными для магазинов WooCommerce, которые в значительной степени зависят от мобильных номеров клиентов. Например, доставка еды, такси и т.д.

В дополнение к этим конкретным нишам ниже приведены некоторые преимущества, которые приносят пользу любому бизнесу.

• Покупатели могут войти и зарегистрироваться непосредственно со своим номером телефона в вашем магазине WooCommerce.
• Это позволяет избежать спама при регистрации клиентов в вашем интернет-магазине.
• Покупатели также могут войти в систему, не запоминая имя пользователя и пароль.
• Вы можете подтвердить номера телефонов клиентов с помощью OTP SMS.
• Все проверенные клиенты являются подлинными и поэтому предотвращают поддельные заказы.
• Ваши клиенты могут быстро получать уведомления через мобильные устройства, даже если у них нет доступа к Интернету.
• Вы можете быстро донести до своих клиентов рекламные акции и предложения по их номерам телефонов.

Благодаря этим преимуществам вы можете легко улучшить свою бизнес-стратегию и, в конечном итоге, увеличить потребление. У вас есть все необходимое для общения с вашими клиентами самым простым и конкретным способом.

# 1: Включите вход по номеру телефона в вашем магазине WooCommerce с помощью плагина

Есть несколько плагинов, которые могут помочь вам в этом. Например:

• Регистрация и вход с номером мобильного телефона
• Цифры: номер мобильного телефона WordPress OTP Регистрация и форма входа
• Войти с номером мобильного телефона для WooCommerce

Но в этом уроке мы воспользуемся плагином «Войти с номером телефона», так как он является самым популярным бесплатным.

Установите плагин «Активировать вход с номером телефона » в своем магазине WooCommerce.

Первое, что вам нужно сделать, это установить и активировать плагин « Войти с номером телефона » в вашем магазине WooCommerce . Ниже приведены инструкции.

1. Во-первых, на панели управления WordPress перейдите на страницу « Плагины» > «Добавить новый ».

2. Введите «Войти с номером телефона» в поле поиска в правом верхнем углу.
3. Плагин должен появиться первым в списке. Нажмите кнопку « Установить сейчас» , которая отображается рядом с ее заголовком.
4. После этого плагин будет загружен. После этого вы увидите, что кнопка « Установить сейчас» изменится на кнопку « Активировать ». Нажмите на нее.

Создать новую страницу входа/регистрации

Следующим шагом будет вставка шорткода плагина в новую страницу входа/регистрации.

1. Перейдите на страницу > Добавить новую на панели управления WordPress.

2. Выберите заголовок для новой страницы, например, « Страница входа/регистрации ».

3. Поместите в него шорткод [idehweb_lwp].
4. Опубликуйте страницу.

Получайте 10 000 бесплатных OTP SMS в месяц с Firebase

Когда новый пользователь регистрирует учетную запись в вашем магазине WooCommerce, на номер его мобильного телефона будет отправлен код подтверждения. Поэтому вам нужно будет предоставить SMS-шлюз для правильной работы плагина.

Вы можете использовать Firebase от Google. Он предоставляет 10 000 OTP SMS в месяц бесплатно. Вот как:

1. Войдите в консоль Firebase, используя свою учетную запись Google.
2. Нажмите кнопку Создать проект .

3. Теперь вам нужно будет ввести имя для нового проекта, принять условия Firebase и нажать кнопку « Создать проект» .
4. После успешного создания проекта на левой боковой панели перейдите на страницу « Сборка » > « Аутентификация ».

5. Нажмите кнопку « Начать ».
6. Выберите Телефон в качестве провайдера.

7. Переключите переключатель в правом верхнем углу, чтобы включить эту опцию. Затем нажмите кнопку Сохранить .

8. Прокрутите вниз до раздела Авторизованные домены . Нажмите кнопку « Добавить домен » и введите доменное имя вашего магазина WooCommerce. Затем нажмите кнопку Добавить .

9. Теперь перейдите на вкладку Шаблоны .

10. Нажмите на значок карандаша рядом с текстом Язык шаблона . Затем выберите язык, который вы предпочитаете использовать для проверки SMS.

11. Щелкните значок шестеренки рядом с текстом « Обзор проекта» и выберите «Настройки проекта» .

12. Прокрутите вниз до раздела « Ваши приложения ». Затем щелкните значок сети.

13. Введите псевдоним для вашего нового приложения. Затем нажмите кнопку Зарегистрировать приложение .

14. Выберите параметр Использовать тег <script> и скопируйте предоставленные сценарии.

15. Теперь перейдите на панель инструментов WordPress вашего магазина WooCommerce. Затем перейдите на страницу «Настройка входа».

16. Вставьте скрипты в текстовое поле конфигурации Firebase .
17. Вернитесь в окно Firebase, скопируйте ключ API, указанный в скриптах.

18. Вернитесь в окно WordPress, вставьте ключ API в текстовое поле API Firebase .

19. Наконец, прокрутите страницу вниз и нажмите кнопку Сохранить изменения .

Кроме того, здесь вы можете настроить приложение. Вы должны проверить настройки, чтобы увидеть, есть ли что-то еще, что вам нужно настроить.

# 2: Включите вход по номеру телефона в ваш магазин WooCommerce программно

В этом руководстве мы добавим еще один вариант номера телефона в форму входа в ваш магазин WooCommerce. Обратите внимание, что это не отправляет SMS-сообщения OTP для проверки пользователей, как в предыдущем руководстве.

Пользователи могут выбирать, что им удобнее. Возможно, вы видели это в форме входа в Amazon. Это позволяет пользователям входить в систему с электронной почтой или номером телефона.

Вам нужно будет добавить пользовательский код PHP в файл «functions.php» текущей активной темы. Если вы не знаете, как это сделать, следуйте инструкциям ниже:

1. Перейдите на страницу « Внешний вид» > «Редактор файла темы » на панели управления WordPress.

2. Выберите тему, которую вы используете, в правом верхнем углу.
3. Получите доступ к файлу «functions.php» с правой боковой панели.

Добавить запись номера телефона

Чтобы разрешить вход по номеру телефона WooCommerce на вашем сайте электронной коммерции WordPress, вам необходимо сохранить номера телефонов пользователей в таблице «wp_usermeta».

Это можно сделать во время регистрации пользователя. Вы можете использовать приведенный ниже код для достижения этой цели.

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

Когда у вас есть мета_ключ «user_phone» с его значением, вы можете проверить учетные данные пользователя по номеру телефона.

Создать форму входа

Теперь давайте создадим простую форму входа, в которой пользователи могут вводить свои данные для входа. В нем будут следующие элементы:

• Текстовое поле для ввода имени пользователя/электронной почты/телефона
• Текстовое поле для ввода пароля
• Одноразовый номер для предотвращения CSRF-атак (это скрытое поле)
• Кнопка отправки

 <?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>

В приведенных выше сценариях мы добавили HTML-код, а также вызвали метод «log_the_user_in()». Это отвечает за проверку учетных данных пользователя.

Если на стороне сервера возникнут какие-либо ошибки, мы сообщим об этом пользователю с помощью метода «get_error_message()».

На следующем шаге нам нужно будет определить метод «log_the_user_in()» и вернуть ошибку.

Войдите с телефонными номерами в WooCommerce

Когда пользователь вводит учетные данные и нажимает кнопку отправки, мы получаем учетные данные и проверяем их по базе данных.

Если все совпадает, мы войдем в систему и перенаправим их на домашнюю страницу. Для ложных входов ошибки будут регистрироваться с использованием класса «WP_Error». В зависимости от ваших потребностей вы можете изменить его на любую другую страницу, изменив код.

Мы определим метод «log_the_user_in()» в хуке «init». Этот хук срабатывает после завершения загрузки WordPress, но до отправки любого заголовка. Это идеально подходит для обработки формы методом POST.

Ниже приведен код:

 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; }

Здесь мы сначала проверили одноразовый номер, чтобы защитить форму от определенных типов неправильного использования, вредоносного кода и атак CSRF.

Далее, на основе метода «is_email()» или «is_numeric()», WordPress проверит действительный адрес электронной почты или номер телефона. Если введенное значение не является адресом электронной почты или номером телефона, мы проверим имя пользователя.

Заключительные слова

Это все о добавлении номера телефона для входа в ваш магазин WooCommerce. Я надеюсь, что это помогло вам с вашим проектом.

Если вы нашли эту статью полезной, не стесняйтесь делиться своими мыслями и предложениями в разделе комментариев ниже.