wpquiz.ru wordpress WPQuiz.ru

Как создать авторизацию через Google в WordPress с применением плагинов и кода

Зачем нужна авторизация через Google в WordPress

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

Кроме того, авторизация через Google позволяет получить доступ к дополнительным данным пользователя, например, имени, email и фотографии профиля, что облегчает персонализацию контента.

Рассмотрим, как реализовать такую авторизацию с помощью популярных плагинов и собственного кода.

Использование плагинов для быстрой интеграции Google Login

Плагин miniOrange Google Login

Это один из самых популярных плагинов для добавления входа через Google. Он прост в настройке и поддерживает OAuth 2.0.

  • Установка через админ-панель WordPress.
  • Подключение к Google API Console для создания OAuth-клиента.
  • Настройка Client ID и Client Secret в настройках плагина.
  • Автоматическое добавление кнопки «Войти через Google» на страницу входа и регистрации.

Плагин miniOrange также поддерживает вход через Facebook и другие соцсети, что расширяет функционал сайта.

Плагин Nextend Social Login

Еще один удобный вариант — Nextend Social Login. Он позволяет пользователям входить через Google, Facebook и Twitter. Плагин автоматически интегрируется с формами входа и регистрации WordPress.

Особенности:

  • Простая настройка через интерфейс плагина.
  • Кастомизация кнопок входа.
  • Поддержка привязки социальных аккаунтов к существующим пользователям.

Создание авторизации через Google вручную с помощью кода

Регистрация в Google API Console и получение OAuth данных

Для начала нужно создать проект в Google API Console и получить Client ID и Client Secret:

  1. Перейдите в консоль и создайте новый проект.
  2. В разделе "OAuth consent screen" добавьте необходимые данные (имя приложения, email и др.).
  3. В разделе Credentials создайте OAuth 2.0 Client ID, выбрав тип «Web application».
  4. В поле "Authorized redirect URIs" укажите URL для перенаправления после авторизации, например: https://ваш-сайт.ru/google-callback.

Добавление маршрута для обработки callback

В functions.php вашей темы или в плагине добавьте обработчик для URL редиректа. Вот пример простой реализации с использованием WordPress REST API:

add_action('rest_api_init', function() {
    register_rest_route('wpquiz/v1', '/google-callback/', array(
        'methods' => 'GET',
        'callback' => 'wpquiz_google_callback_handler',
        'permission_callback' => '__return_true',
    ));
});

function wpquiz_google_callback_handler(WP_REST_Request $request) {
    $code = $request->get_param('code');
    if (!$code) {
        return new WP_Error('no_code', 'Authorization code not provided', array('status' => 400));
    }

    $token_response = wpquiz_get_google_access_token($code);
    if (is_wp_error($token_response)) {
        return $token_response;
    }

    $user_info = wpquiz_get_google_user_info($token_response['access_token']);
    if (is_wp_error($user_info)) {
        return $user_info;
    }

    $user = wpquiz_authenticate_google_user($user_info);

    if (is_wp_error($user)) {
        return $user;
    }

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

    wp_redirect(home_url());
    exit;
}

function wpquiz_get_google_access_token($code) {
    $response = wp_remote_post('https://oauth2.googleapis.com/token', array(
        'body' => array(
            'code' => $code,
            'client_id' => 'ВАШ_CLIENT_ID',
            'client_secret' => 'ВАШ_CLIENT_SECRET',
            'redirect_uri' => home_url('/wp-json/wpquiz/v1/google-callback/'),
            'grant_type' => 'authorization_code',
        ),
    ));

    if (is_wp_error($response)) {
        return $response;
    }

    $body = json_decode(wp_remote_retrieve_body($response), true);
    if (isset($body['error'])) {
        return new WP_Error('token_error', $body['error_description']);
    }

    return $body;
}

function wpquiz_get_google_user_info($access_token) {
    $response = wp_remote_get('https://www.googleapis.com/oauth2/v2/userinfo', array(
        'headers' => array('Authorization' => 'Bearer ' . $access_token),
    ));

    if (is_wp_error($response)) {
        return $response;
    }

    $user_info = json_decode(wp_remote_retrieve_body($response), true);
    if (isset($user_info['error'])) {
        return new WP_Error('userinfo_error', $user_info['error']['message']);
    }

    return $user_info;
}

function wpquiz_authenticate_google_user($user_info) {
    if (empty($user_info['email'])) {
        return new WP_Error('no_email', 'Email not provided by Google');
    }

    $user = get_user_by('email', $user_info['email']);
    if (!$user) {
        $username = sanitize_user(current(explode('@', $user_info['email'])));
        $random_password = wp_generate_password(12, false);
        $user_id = wp_create_user($username, $random_password, $user_info['email']);
        if (is_wp_error($user_id)) {
            return $user_id;
        }
        $user = get_user_by('id', $user_id);
        update_user_meta($user_id, 'google_id', $user_info['id']);
    }
    return $user;
}

Добавление кнопки входа через Google

Чтобы пользователи могли начать процесс авторизации, добавим кнопку на страницу входа. Например, в файл functions.php можно подключить код для вывода кнопки:

function wpquiz_add_google_login_button() {
    $client_id = 'ВАШ_CLIENT_ID';
    $redirect_uri = urlencode(home_url('/wp-json/wpquiz/v1/google-callback/'));
    $scope = urlencode('email profile');
    $auth_url = "https://accounts.google.com/o/oauth2/v2/auth?client_id={$client_id}&redirect_uri={$redirect_uri}&response_type=code&scope={$scope}&access_type=offline";

    echo '<a href="' . esc_url($auth_url) . '" class="google-login-button">Войти через Google</a>';
}
add_action('login_form', 'wpquiz_add_google_login_button');

Также можно оформить кнопку в стиле вашей темы, добавить иконку Google и разместить на странице регистрации.

Советы по безопасности и улучшению UX

При реализации авторизации через Google важно учитывать безопасность:

  • Храните Client Secret в защищённом месте и не публикуйте его в открытом исходном коде.
  • Используйте HTTPS на сайте для защиты передачи данных.
  • Обрабатывайте ошибки корректно, информируя пользователя о проблемах.
  • Обновляйте токены доступа и реализуйте возможность выхода из аккаунта.

Для улучшения пользовательского опыта рекомендуем:

  • Добавить возможность привязки Google-аккаунта к существующему пользователю.
  • Реализовать кастомные редиректы после входа.
  • Использовать плагины кеширования и оптимизации, чтобы не замедлять процесс авторизации.

Заключение

Авторизация через Google — мощный инструмент для повышения удобства пользователей и безопасности сайта на WordPress. Использование готовых плагинов ускоряет внедрение, а собственная реализация даёт полный контроль и гибкость. В статье представлены как проверенные плагины miniOrange и Nextend Social Login, так и пример написания собственного кода с использованием REST API и OAuth 2.0.

Если хотите автоматизировать процесс или добавить расширенные возможности, рекомендуем ознакомиться с плагином WP GPT на WPSHOP — он содержит удобные функции для интеграции и расширения WordPress.

×
WordPress
дай сайту суперсилу!

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

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