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

Почему стоит добавить авторизацию через социальные сети в WooCommerce

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

Диагностика задачи: что нужно и какие сложности возникают

Основная задача — получить от соцсети подтверждение личности пользователя и связать его с учетной записью WooCommerce. При этом нужно учитывать:

• Обработку OAuth 2.0 авторизации;
• Обеспечение безопасности передачи данных;
• Связывание аккаунта соцсети с пользователем WordPress;
• Обработка ошибок и отказов в авторизации;
• Минимальное влияние на производительность.

Какие соцсети чаще всего нужны

Чаще всего — Google, Facebook и ВКонтакте. В этой статье остановимся на Google как примере, остальные сервисы интегрируются по аналогии.

Пошаговое решение: реализация OAuth 2.0 для Google в WooCommerce

1. Создание проекта и получение данных OAuth в Google Cloud Console

- Перейдите в Google Cloud Console и создайте новый проект.
- В разделе "Учетные данные" создайте OAuth 2.0 Client ID, выбрав тип "Веб-приложение".
- В поле "Авторизованные URI перенаправления" укажите URL вашего сайта, например: https://your-site.com/google-callback.

2. Добавление кнопки входа и обработка запроса

Добавьте кнопку на страницу входа WooCommerce с ссылкой на URL авторизации Google:

<?php
$client_id = 'ВАШ_CLIENT_ID';
$redirect_uri = urlencode('https://your-site.com/google-callback');
$scope = urlencode('email profile');
$auth_url = "https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id={$client_id}&redirect_uri={$redirect_uri}&scope={$scope}&access_type=offline";
?>

<a href="<?php echo $auth_url; ?>" class="button google-login">Войти через Google</a>

3. Обработка callback и обмен кода на токен

Создайте обработчик по адресу /google-callback. Пример функции, вызываемой при попадании на этот URL (можно реализовать через rewrite rules или отдельный шаблон):

function handle_google_callback() {
    if (!isset($_GET['code'])) {
        wp_die('Код авторизации не получен');
    }
    $code = sanitize_text_field($_GET['code']);

    $client_id = 'ВАШ_CLIENT_ID';
    $client_secret = 'ВАШ_CLIENT_SECRET';
    $redirect_uri = 'https://your-site.com/google-callback';

    $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 (empty($body['access_token'])) {
        wp_die('Токен не получен');
    }

    $access_token = $body['access_token'];

    // Получаем информацию о пользователе
    $user_response = wp_remote_get('https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=' . $access_token);
    if (is_wp_error($user_response)) {
        wp_die('Ошибка получения данных пользователя');
    }
    $user_info = json_decode(wp_remote_retrieve_body($user_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(12, false);
        $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_auth_cookie($user->ID);
    wp_set_current_user($user->ID);

    wp_redirect(home_url());
    exit;
}

4. Регистрация rewrite rule для callback URL

Чтобы WordPress понимал запрос /google-callback, добавьте в functions.php или плагин:

function add_google_callback_rewrite() {
    add_rewrite_rule('^google-callback/?$', 'index.php?google_callback=1', 'top');
}
add_action('init', 'add_google_callback_rewrite');

function add_google_callback_query_var($vars) {
    $vars[] = 'google_callback';
    return $vars;
}
add_filter('query_vars', 'add_google_callback_query_var');

function google_callback_template_redirect() {
    if (get_query_var('google_callback')) {
        handle_google_callback();
        exit;
    }
}
add_action('template_redirect', 'google_callback_template_redirect');

Проверка результата после внедрения

• На странице входа WooCommerce появилась кнопка "Войти через Google".
• При клике происходит переход на Google с запросом разрешений.
• После успешного входа пользователь автоматически авторизуется на сайте.
• Если пользователь новый — создается учетная запись с его email.
• В случае ошибок выводятся понятные сообщения.

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

• Ошибка "redirect_uri_mismatch": Убедитесь, что URL в Google Cloud Console и в коде совпадают полностью, включая протокол и слеши.
• Пользователь не создается: Проверьте права PHP и корректность email, используемого при создании.
• Ошибка запроса токена: Проверьте правильность client_id и client_secret, а также наличие интернета на сервере.
• Кнопка авторизации не видна: Проверьте, что код вставлен в правильное место шаблона WooCommerce.

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

• Всегда используйте sanitize_text_field() и другие функции очистки данных от пользователей.
• Храните client_secret вне публичной части сайта, например, в wp-config.php.
• Ограничьте разрешения OAuth необходимым минимумом (email profile).
• Кэшируйте данные пользователя, если делаете дополнительные запросы к API соцсети.
• По возможности добавьте nonce и проверку сессии для предотвращения CSRF.

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