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

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

В интернет-магазинах на WooCommerce увеличение конверсии напрямую зависит от удобства регистрации и входа пользователей. Стандартная форма регистрации может отпугнуть часть клиентов из-за лишних шагов. Авторизация через соцсети (Google, Facebook, ВКонтакте и др.) упрощает процесс, повышая лояльность и снижая барьеры для покупок.

Однако многие плагины для соцавторизации тяжеловесны, могут конфликтовать с другими решениями и увеличивают нагрузку на сайт. В этом руководстве разберём, как реализовать базовую авторизацию через Google и Facebook без плагинов, используя официальные OAuth API и собственный код.

Подготовка: что нужно для работы OAuth авторизации

• Зарегистрировать приложение в Google и Facebook для получения client_id и client_secret.
• Настроить редиректы и разрешённые URI для callback в настройках приложений.
• Подключить HTTPS, так как OAuth требует защищённого соединения.
• Иметь базовые знания PHP и WordPress/WooCommerce hooks для интеграции.

Пошаговое решение

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

Перейдите в консоли разработчиков Google (https://console.developers.google.com/apis/credentials) и Facebook (https://developers.facebook.com/apps/). Создайте новое приложение, задайте название, укажите URL сайта и в настройках OAuth добавьте URL редиректа, например, https://example.com/wp-login.php?action=oauth_callback.

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

В файле functions.php вашей дочерней темы или в собственном плагине добавьте код, который выведет кнопки входа:

add_action('woocommerce_login_form', 'add_social_login_buttons');
function add_social_login_buttons() {
    $redirect_uri = urlencode(site_url('/wp-login.php?action=oauth_callback'));
    $google_client_id = 'ВАШ_GOOGLE_CLIENT_ID';
    $fb_client_id = 'ВАШ_FACEBOOK_APP_ID';

    echo '<div class="social-login-buttons">';
    echo '<a href="https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=' . $google_client_id . '&redirect_uri=' . $redirect_uri . '&scope=openid%20email%20profile" class="button google-login">Войти через Google</a>';
    echo '<a href="https://www.facebook.com/v15.0/dialog/oauth?client_id=' . $fb_client_id . '&redirect_uri=' . $redirect_uri . '&scope=email" class="button facebook-login">Войти через Facebook</a>';
    echo '</div>';
}

3. Обработка callback и авторизация пользователя

Добавьте обработчик для wp-login.php?action=oauth_callback в functions.php или плагине:

add_action('init', 'handle_oauth_callback');
function handle_oauth_callback() {
    if (isset($_GET['action']) && $_GET['action'] === 'oauth_callback' && isset($_GET['code'])) {
        // Определяем провайдера по параметрам или сессии
        if (isset($_GET['state']) && $_GET['state'] === 'google') {
            $user_data = get_google_user_info($_GET['code']);
        } elseif (isset($_GET['state']) && $_GET['state'] === 'facebook') {
            $user_data = get_facebook_user_info($_GET['code']);
        } else {
            wp_redirect(wp_login_url());
            exit;
        }

        if ($user_data && isset($user_data['email'])) {
            $user = get_user_by('email', $user_data['email']);
            if (!$user) {
                $user_id = wp_create_user($user_data['email'], wp_generate_password(), $user_data['email']);
                wp_update_user(['ID' => $user_id, 'display_name' => $user_data['name']]);
                $user = get_user_by('ID', $user_id);
            }
            wp_set_auth_cookie($user->ID);
            wp_redirect(home_url());
            exit;
        } else {
            wp_redirect(wp_login_url());
            exit;
        }
    }
}

// Функция запроса данных пользователя Google
function get_google_user_info($code) {
    $client_id = 'ВАШ_GOOGLE_CLIENT_ID';
    $client_secret = 'ВАШ_GOOGLE_CLIENT_SECRET';
    $redirect_uri = site_url('/wp-login.php?action=oauth_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)) return false;

    $tokens = json_decode(wp_remote_retrieve_body($response), true);
    if (!isset($tokens['access_token'])) return false;

    $user_response = wp_remote_get('https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=' . $tokens['access_token']);
    if (is_wp_error($user_response)) return false;

    $user = json_decode(wp_remote_retrieve_body($user_response), true);
    return [
        'email' => $user['email'] ?? '',
        'name' => $user['name'] ?? '',
    ];
}

// Функция запроса данных пользователя Facebook
function get_facebook_user_info($code) {
    $client_id = 'ВАШ_FACEBOOK_APP_ID';
    $client_secret = 'ВАШ_FACEBOOK_APP_SECRET';
    $redirect_uri = site_url('/wp-login.php?action=oauth_callback');

    $token_response = wp_remote_get('https://graph.facebook.com/v15.0/oauth/access_token?client_id=' . $client_id . '&redirect_uri=' . urlencode($redirect_uri) . '&client_secret=' . $client_secret . '&code=' . $code);
    if (is_wp_error($token_response)) return false;

    $token_data = json_decode(wp_remote_retrieve_body($token_response), true);
    if (!isset($token_data['access_token'])) return false;

    $user_response = wp_remote_get('https://graph.facebook.com/me?fields=name,email&access_token=' . $token_data['access_token']);
    if (is_wp_error($user_response)) return false;

    $user = json_decode(wp_remote_retrieve_body($user_response), true);
    return [
        'email' => $user['email'] ?? '',
        'name' => $user['name'] ?? '',
    ];
}

4. Тестирование авторизации

Откройте страницу входа WooCommerce, нажмите на кнопку Google или Facebook, пройдите авторизацию. После успешного входа пользователь должен быть автоматически зарегистрирован (если нет аккаунта) и авторизован на сайте.

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

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

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

• Ошибка 400 или redirect_uri_mismatch: Проверьте, что URL редиректа в настройках Google/Facebook точно совпадает с https://ваш-сайт/wp-login.php?action=oauth_callback.
• Отсутствие email в ответе: Некоторые соцсети требуют одобрения дополнительных прав доступа. Проверьте, что scopes (права) указаны корректно и одобрены в консоли разработчика.
• Сессия сбрасывается после возврата: Убедитесь, что используете HTTPS и что нет конфликтов с кешированием страниц.
• Пользователь не создаётся: Проверьте, что функция wp_create_user вызывается корректно и сайт не блокирует создание новых пользователей.

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

• Храните client_secret в wp-config.php или в защищённых настройках, не в публичном коде.
• Используйте nonce и проверяйте параметр state для защиты от CSRF атак.
• Ограничьте scope только необходимыми правами: email и профиль.
• Кэшируйте токены и данные пользователя для снижения количества запросов к API.
• Обновляйте API вызовы согласно документации Google и Facebook, чтобы избежать устаревших вызовов.

Сравнение подходов: плагины vs собственная реализация