Авторизация через социальные сети — удобный способ повысить удобство пользователей сайта и увеличить конверсию регистрации в WordPress. В этой статье разберём, как реализовать вход через популярные соцсети, какие плагины использовать и как создать кастомное решение с помощью кода.
Зачем нужна авторизация через социальные сети в WordPress
Вход через соцсети упрощает жизнь посетителям — им не нужно запоминать ещё один логин и пароль. Это снижает порог входа и повышает доверие, особенно на сайтах с контентом или сообществами. Для владельцев сайтов — это меньше поддержки пользователей, упрощённая регистрация и возможность автоматически получать данные профиля пользователя.
Кроме того, социальная авторизация способствует сбору актуальных данных о пользователях и облегчает маркетинговые задачи.
Популярные плагины для социальной авторизации в WordPress
1. Nextend Social Login
Один из самых популярных бесплатных плагинов для входа через Facebook, Google и Twitter. Легко настраивается, поддерживает кастомизацию кнопок и интегрируется с WooCommerce и другими плагинами.
Преимущества:
- Быстрая установка и настройка
- Поддержка нескольких соцсетей
- Автоматическое создание пользователей
2. Social Login by miniOrange
Плагин с более широкими возможностями, включая поддержку LinkedIn, Instagram, Amazon и другие сети. Есть бесплатная и платная версии.
Отличается расширенными настройками безопасности, возможностью кастомизации форм и интеграции с плагинами для членства.
3. Super Socializer
Многофункциональный плагин, который объединяет социальную авторизацию, комментарии и шаринг. Поддерживает более 10 соцсетей, легко интегрируется с большинством тем и плагинов.
Как реализовать авторизацию через соцсети вручную: пример с Google OAuth 2.0
Если хочется сделать авторизацию через соцсети без плагинов, можно использовать API соцсетей. Рассмотрим пример реализации входа через Google на WordPress с помощью Google OAuth 2.0 и PHP.
Для начала необходимо создать проект в Google Cloud Console, получить Client ID и Client Secret, а затем реализовать логику авторизации.
Основные шаги реализации:
- Редирект пользователя на страницу авторизации Google с параметрами Client ID, redirect_uri и scope.
- Получение авторизационного кода после успешного входа.
- Обмен кода на access token через запрос к Google.
- Получение данных пользователя (email, имя и т.д.) через Google API.
- Проверка, существует ли пользователь в базе WordPress, и создание или авторизация пользователя.
Пример функции для обработки входа через Google в WordPress
function wpscan_handle_google_login() {
if (!isset($_GET['code'])) {
return;
}
$code = sanitize_text_field($_GET['code']);
$client_id = 'ВАШ_CLIENT_ID';
$client_secret = 'ВАШ_CLIENT_SECRET';
$redirect_uri = home_url('/google-login-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;
}
$body = json_decode(wp_remote_retrieve_body($response), true);
if (empty($body['access_token'])) {
return;
}
$access_token = $body['access_token'];
$user_info_response = wp_remote_get('https://www.googleapis.com/oauth2/v1/userinfo?access_token=' . $access_token);
if (is_wp_error($user_info_response)) {
return;
}
$user_info = json_decode(wp_remote_retrieve_body($user_info_response), true);
if (empty($user_info['email'])) {
return;
}
$user = get_user_by('email', $user_info['email']);
if (!$user) {
$user_id = wp_create_user($user_info['email'], wp_generate_password(), $user_info['email']);
wp_update_user([
'ID' => $user_id,
'display_name' => $user_info['name'],
]);
$user = get_user_by('ID', $user_id);
}
wp_set_current_user($user->ID);
wp_set_auth_cookie($user->ID);
wp_redirect(home_url());
exit;
}Данную функцию нужно вызвать на странице обратного вызова /google-login-callback/, зарегистрировав её в WordPress. Это позволит пользователю после авторизации в Google автоматически входить на сайт.
Настройка страницы входа и кнопок для соцсетей
Чтобы пользователь мог легко найти кнопку входа через соцсети, можно добавить их на стандартную страницу логина WordPress или создать отдельную страницу.
Например, для вывода кнопки Google login можно добавить в форму входа следующий HTML и JS:
<a href="https://accounts.google.com/o/oauth2/v2/auth?client_id=ВАШ_CLIENT_ID&redirect_uri=https%3A%2F%2Fвашсайт.ru%2Fgoogle-login-callback%2F&response_type=code&scope=email%20profile" class="google-login-button">Войти через Google</a>Для улучшения внешнего вида можно стилизовать кнопку через CSS или использовать готовые стили из плагинов.
Безопасность и нюансы при реализации социальной авторизации
Важно правильно обрабатывать все данные, полученные от соцсетей, использовать безопасные механизмы хранения токенов и не допускать повторного использования кода авторизации.
Также стоит настроить SSL на сайте — OAuth 2.0 требует защищённого соединения для callback URL.
Рекомендуется использовать nonce и проверять их в своих обработчиках для защиты от CSRF атак.
Если используете плагины, внимательно изучайте отзывы и обновления, чтобы избежать уязвимостей.
Интеграция с плагином Clearfy Pro для оптимизации и безопасности
Для дополнительной защиты и оптимизации авторизации через соцсети можно использовать плагин Clearfy Pro. Он позволяет отключать неиспользуемые REST API методы, блокировать автоматические запросы и оптимизировать работу сторонних скриптов, что повышает безопасность и скорость сайта.