wplang.ru wordpress WP Lang

WooCommerce: как добавить авторизацию через социальные сети без плагинов

Диагностика задачи: зачем нужна соцавторизация без плагинов в WooCommerce

Многие магазины на WooCommerce хотят упростить регистрацию и вход для клиентов, используя авторизацию через социальные сети (Google, Facebook, VK и другие). Часто для этого устанавливают тяжелые плагины, что приводит к конфликтам, замедлению сайта и увеличению уязвимостей. Задача — реализовать соцавторизацию самостоятельно, без сторонних плагинов, чтобы сохранить контроль и оптимизировать производительность.

Как работает авторизация через социальные сети: базовые принципы

Авторизация через OAuth 2.0 — стандартный протокол, который позволяет пользователям входить на сайт, используя учётные записи соцсетей. Процесс включает:

  • Перенаправление пользователя на страницу авторизации соцсети;
  • Получение кода авторизации;
  • Обмен кода на access_token;
  • Запрос данных пользователя;
  • Создание или поиск пользователя WordPress по email;
  • Вход пользователя в систему.

Для WooCommerce это означает, что после успешного OAuth-входа клиент автоматически авторизуется в магазине.

Пошаговое решение: добавляем соцавторизацию для WooCommerce без плагинов

Шаг 1. Регистрация приложения в соцсети

Для каждой соцсети необходимо зарегистрировать приложение в её кабинете разработчика и получить client_id и client_secret. Например, для Google:

  • Перейдите в Google Cloud Console
  • Создайте OAuth 2.0 Client ID для веб-приложения.
  • Укажите URI перенаправления на ваш сайт, например: https://example.com/oauth2callback/google.

Шаг 2. Создаём роут для обработки callback

Добавьте в functions.php темы или в отдельный кастомный плагин код для обработки OAuth callback:

add_action('init', function() {
    if (isset($_GET['oauth2callback']) && isset($_GET['provider'])) {
        $provider = sanitize_text_field($_GET['provider']);
        if ($provider === 'google') {
            handle_google_oauth_callback();
        }
        // Аналогично для других провайдеров
        exit;
    }
});

function handle_google_oauth_callback() {
    if (!isset($_GET['code'])) {
        wp_die('Ошибка авторизации');
    }
    $code = sanitize_text_field($_GET['code']);

    $client_id = 'ВАШ_CLIENT_ID';
    $client_secret = 'ВАШ_CLIENT_SECRET';
    $redirect_uri = 'https://example.com/oauth2callback/google';

    $response = wp_remote_post('https://oauth2.googleapis.com/token', [
        'body' => [
            'code' => $code,
            'client_id' => $client_id,
            'client_secret' => $client_secret,
            'redirect_uri' => $redirect_uri,
            'grant_type' => 'authorization_code'
        ]
    ]);

    if (is_wp_error($response)) {
        wp_die('Ошибка при обмене кода на токен');
    }

    $body = json_decode(wp_remote_retrieve_body($response), true);
    if (empty($body['access_token'])) {
        wp_die('Токен не получен');
    }

    $token = $body['access_token'];
    $user_info_response = wp_remote_get('https://www.googleapis.com/oauth2/v2/userinfo', [
        'headers' => [
            'Authorization' => 'Bearer ' . $token
        ]
    ]);

    if (is_wp_error($user_info_response)) {
        wp_die('Не удалось получить данные пользователя');
    }

    $user_info = json_decode(wp_remote_retrieve_body($user_info_response), true);
    if (empty($user_info['email'])) {
        wp_die('Email пользователя отсутствует');
    }

    $user = get_user_by('email', $user_info['email']);
    if (!$user) {
        $random_password = wp_generate_password();
        $user_id = wp_create_user($user_info['email'], $random_password, $user_info['email']);
        if (is_wp_error($user_id)) {
            wp_die('Ошибка создания пользователя');
        }
        $user = get_user_by('ID', $user_id);
    }

    wp_set_current_user($user->ID);
    wp_set_auth_cookie($user->ID);

    wp_redirect(home_url());
    exit;
}

Шаг 3. Добавляем кнопку входа на страницу WooCommerce

В нужном месте шаблона (например, в woocommerce/myaccount/form-login.php) добавьте кнопку, которая ведёт на OAuth-авторизацию:

<a href="https://accounts.google.com/o/oauth2/v2/auth?scope=email%20profile&response_type=code&redirect_uri=https%3A%2F%2Fexample.com%2Foauth2callback%2Fgoogle&client_id=ВАШ_CLIENT_ID&access_type=offline" class="button google-login">Войти через Google</a>

Как проверить, что соцавторизация работает

  • Кликните по кнопке входа через соцсеть — должно произойти перенаправление на страницу авторизации соцсети.
  • После успешного входа вы должны вернуться на сайт и автоматически войти в свой аккаунт WooCommerce.
  • Проверьте в админке WordPress наличие пользователя с тем же email, что и в соцсети.
  • Для отладки используйте error_log() в функции callback, чтобы видеть ошибки обмена токенами.

Частые ошибки и как их исправить

  • Ошибка: «Токен не получен». Проверьте правильность client_id, client_secret и URI перенаправления.
  • Ошибка: «Email пользователя отсутствует». Убедитесь, что scope запроса OAuth содержит email.
  • Пользователь не создаётся. Проверьте права на создание пользователей и корректность email.
  • Перенаправление ведёт на 404. Проверьте, что URL callback добавлен как валидный редирект в настройках приложения соцсети.

Практические советы по безопасности и производительности

  • Храните client_secret только в защищённых настройках, не в открытом коде.
  • Используйте HTTPS для всех редиректов и обработки данных.
  • Добавьте nonce-проверки и валидацию входящих данных.
  • Кэшируйте ответы от соцсетей, если планируете частые запросы информации.
  • Регулярно обновляйте методы OAuth в соответствии с документацией провайдеров.

Сравнение вариантов реализации соцавторизации

МетодПлюсыМинусы
Готовые плагины (например, Nextend Social Login)Быстрая установка, поддержка многих соцсетей, готовый UIБольшой вес, возможные конфликты, зависимость от обновлений
Самописный код (OAuth вручную)Полный контроль, лёгкость, минимум зависимостейТребует знаний OAuth, ручная поддержка, больше времени на разработку
Использование внешних сервисов (Auth0 и др.)Отказоустойчивость, поддержка множества провайдеровСтоимость, зависимость от сторонних сервисов
×
WordPress
дай сайту суперсилу!

Скидки на топовые темы и плагины

Активировать суперсилу ⋙