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

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

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

Если ваша задача — добавить возможность входа через Google и Facebook без установки сторонних плагинов, в этой статье мы покажем, как это сделать, используя встроенные хуки WordPress и API OAuth 2.0 напрямую.

Обзор возможностей и ограничения

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

• Регистрации приложения в консоли разработчика Google и Facebook.
• Создания обработчиков в WordPress для OAuth 2.0.
• Настройки перенаправлений и безопасности (nonce, проверка state).
• Интеграции с WooCommerce (автоматическое создание пользователя или вход по email).

Главный минус — придётся писать больше кода и следить за обновлениями API соцсетей. Но вы получите лёгкое и кастомное решение без лишних зависимостей.

Пошаговое решение: настройка авторизации Google и Facebook

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

Для Google:

• Перейдите в Google Cloud Console.
• Создайте проект, получите Client ID и Client Secret.
• Добавьте URI перенаправления, например, https://ваш_сайт.ru/oauth2callback/google/.

Для Facebook:

• Перейдите в Facebook for Developers.
• Создайте приложение, получите App ID и App Secret.
• Укажите URL перенаправления, например, https://ваш_сайт.ru/oauth2callback/facebook/.

2. Создание маршрутов для обработки OAuth Callback

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

add_action('init', function() {
    if (isset($_GET['oauth2callback'])) {
        $provider = sanitize_text_field($_GET['oauth2callback']);
        if ($provider === 'google') {
            handle_google_callback();
        } elseif ($provider === 'facebook') {
            handle_facebook_callback();
        }
        exit;
    }
});

3. Реализация функций для обработки логики OAuth

Пример для Google:

function handle_google_callback() {
    if (!isset($_GET['code'])) {
        wp_die('Код авторизации не получен');
    }
    $code = sanitize_text_field($_GET['code']);
    $client_id = 'ВАШ_GOOGLE_CLIENT_ID';
    $client_secret = 'ВАШ_GOOGLE_CLIENT_SECRET';
    $redirect_uri = 'https://ваш_сайт.ru/?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('Ошибка запроса токена: ' . $response->get_error_message());
    }

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

    // Получение информации о пользователе
    $user_info_response = wp_remote_get('https://www.googleapis.com/oauth2/v2/userinfo', [
        'headers' => [
            'Authorization' => 'Bearer ' . $body['access_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 пользователя не получен');
    }

    wp_authenticate_oauth_user($user_info['email'], $user_info['name']);
}

Аналогично реализуйте handle_facebook_callback() с запросом к https://graph.facebook.com/me?fields=id,name,email используя токен.

4. Функция создания или входа пользователя по email

function wp_authenticate_oauth_user($email, $display_name) {
    if (!$email) {
        wp_die('Email обязателен для авторизации');
    }

    $user = get_user_by('email', $email);
    if (!$user) {
        // Создаём пользователя с случайным паролем
        $random_password = wp_generate_password(12, false);
        $user_id = wp_create_user($email, $random_password, $email);
        if (is_wp_error($user_id)) {
            wp_die('Ошибка создания пользователя: ' . $user_id->get_error_message());
        }
        wp_update_user([
            'ID' => $user_id,
            'display_name' => $display_name
        ]);
        $user = get_user_by('ID', $user_id);
    }

    // Входим под пользователем
    wp_set_current_user($user->ID);
    wp_set_auth_cookie($user->ID);

    // Перенаправляем на страницу аккаунта
    wp_safe_redirect(get_permalink(get_option('woocommerce_myaccount_page_id')));
    exit;
}

5. Добавление кнопок входа в форму WooCommerce

В файле шаблона входа WooCommerce вставьте ссылки на авторизацию:

<a href="https://ваш_сайт.ru/?oauth2callback=google" class="button google-login">Войти через Google</a>
<a href="https://ваш_сайт.ru/?oauth2callback=facebook" class="button facebook-login">Войти через Facebook</a>

Проверка результата: как убедиться, что всё работает

• Перейдите на страницу входа WooCommerce, проверьте отображение кнопок.
• Кликните по кнопке Google или Facebook — должно произойти перенаправление на страницу OAuth авторизации соцсети.
• После успешного входа вы должны попасть в личный кабинет WooCommerce как авторизованный пользователь.
• Проверьте, что пользователь создан в базе с правильным email и отображаемым именем.
• При повторном входе пользователь должен пройти аутентификацию без создания новой учётной записи.

Частые ошибки и способы их исправления

• Ошибка 400 или redirect_uri_mismatch: Проверьте, что в настройках приложения в Google/Facebook URI перенаправления совпадает с указанным в коде.
• Пользователь без email: Если соцсеть не передаёт email (например, Facebook требует подтверждённый email), авторизация не сможет пройти — добавьте проверку и вывод ошибки.
• Проблемы с куками и сессиями: Убедитесь, что сайт использует HTTPS, иначе куки авторизации могут не работать.
• Ошибка получения токена: Проверьте корректность client_id, client_secret и правильность параметров запроса.

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

• Используйте HTTPS на сайте для защиты данных и корректной работы OAuth.
• Храните client_id и client_secret вне публичных файлов (лучше через wp-config.php или переменные окружения).
• Добавьте проверку параметра state для защиты от CSRF-атак в OAuth.
• Кешируйте запросы к API соцсетей на короткий срок, если реализуете дополнительные запросы.
• Регулярно проверяйте обновления API Google и Facebook на предмет изменений в эндпоинтах и параметрах.

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