WebAuthn — современный стандарт для безопасной аутентификации пользователей без паролей, основанный на криптографических ключах. В эпоху постоянных атак на пароли и утечек данных, внедрение WebAuthn в WordPress позволяет повысить безопасность и упростить процесс входа для пользователей.
Что такое WebAuthn и почему он важен для WordPress
WebAuthn (Web Authentication) — это спецификация, разработанная консорциумом FIDO Alliance и W3C, которая позволяет веб-приложениям проводить аутентификацию с помощью аппаратных ключей, биометрии или других криптографических методов, минуя традиционные пароли.
В WordPress использование WebAuthn позволит:
- Повысить уровень безопасности за счёт сильной криптографии и отсутствия передачи пароля;
- Упростить вход для пользователей, используя биометрию или аппаратные ключи (например, YubiKey);
- Снизить риски фишинга и атак с перехватом паролей.
В данной статье мы рассмотрим, как добавить поддержку WebAuthn в WordPress, приведём примеры плагинов и реализуем простой код для регистрации и входа с использованием WebAuthn API.
Использование плагинов для интеграции WebAuthn в WordPress
Для быстрого внедрения WebAuthn в WordPress есть готовые решения:
- WP WebAuthn — плагин, который добавляет поддержку WebAuthn для входа и регистрации. Позволяет пользователям добавлять аппаратные ключи и биометрию.
- Two Factor Authentication by WP White Security — поддерживает WebAuthn как один из методов двухфакторной аутентификации.
Преимущества использования плагина:
- Минимум кода и настройки;
- Поддержка разных методов аутентификации (ключи, отпечатки пальцев);
- Регулярные обновления и поддержка от разработчиков.
Для установки плагина WP WebAuthn:
- Перейдите в админку WordPress → Плагины → Добавить новый.
- Введите в поиске «WP WebAuthn».
- Установите и активируйте плагин.
- Перейдите в настройки плагина и настройте регистрацию ключей и политики безопасности.
Основные настройки и рекомендации
Проверьте, что ваш хостинг поддерживает HTTPS, так как WebAuthn требует защищённого соединения.
Рекомендуется разрешить пользователям регистрировать несколько ключей на случай потери основного устройства.
Обязательно настройте fallback-методы аутентификации (например, пароль) на случай проблем с WebAuthn.
Пример собственной реализации WebAuthn в WordPress с использованием JavaScript и PHP
Если вы хотите глубже понять процесс и создать кастомное решение, рассмотрим упрощённый пример реализации регистрации и входа с WebAuthn.
1. Регистрация пользователя с WebAuthn
Принцип работы регистрации состоит в следующем:
- Клиент запрашивает у сервера параметры для создания ключа (
challengeи настройки); - Клиент создаёт ключ с помощью WebAuthn API;
- Отправляет публичный ключ и данные обратно на сервер для сохранения.
JavaScript-код для запроса регистрации:
async function wpauthStartRegistration() {
const response = await fetch('/wp-json/wpauth/v1/registration-options', { method: 'POST' });
const options = await response.json();
options.challenge = Uint8Array.from(atob(options.challenge), c => c.charCodeAt(0));
options.user.id = Uint8Array.from(atob(options.user.id), c => c.charCodeAt(0));
const credential = await navigator.credentials.create({ publicKey: options });
// Отправляем данные на сервер
const attestationResponse = {
id: credential.id,
rawId: btoa(String.fromCharCode(...new Uint8Array(credential.rawId))),
response: {
clientDataJSON: btoa(String.fromCharCode(...new Uint8Array(credential.response.clientDataJSON))),
attestationObject: btoa(String.fromCharCode(...new Uint8Array(credential.response.attestationObject)))
},
type: credential.type
};
await fetch('/wp-json/wpauth/v1/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(attestationResponse)
});
}PHP обработчик для выдачи опций регистрации:
add_action('rest_api_init', function() {
register_rest_route('wpauth/v1', '/registration-options', [
'methods' => 'POST',
'callback' => 'wpauth_get_registration_options',
'permission_callback' => '__return_true',
]);
});
function wpauth_get_registration_options() {
$user_id = get_current_user_id();
$challenge = random_bytes(32);
$options = [
'challenge' => base64_encode($challenge),
'rp' => ['name' => 'Example WordPress Site'],
'user' => [
'id' => base64_encode((string)$user_id),
'name' => wp_get_current_user()->user_login,
'displayName' => wp_get_current_user()->display_name,
],
'pubKeyCredParams' => [
['type' => 'public-key', 'alg' => -7], // ES256
['type' => 'public-key', 'alg' => -257], // RS256
],
'timeout' => 60000,
'attestation' => 'direct',
];
// Сохраняем challenge в сессии или базе для проверки при регистрации
$_SESSION['wpauth_challenge'] = $challenge;
return $options;
}2. Вход пользователя с WebAuthn
Вход похож по логике — сначала сервер выдаёт challenge, затем клиент подписывает его приватным ключом и отправляет обратно.
JavaScript-код для входа:
async function wpauthStartLogin() {
const response = await fetch('/wp-json/wpauth/v1/login-options', { method: 'POST' });
const options = await response.json();
options.challenge = Uint8Array.from(atob(options.challenge), c => c.charCodeAt(0));
options.allowCredentials = options.allowCredentials.map(cred => ({
...cred,
id: Uint8Array.from(atob(cred.id), c => c.charCodeAt(0))
}));
const assertion = await navigator.credentials.get({ publicKey: options });
const assertionResponse = {
id: assertion.id,
rawId: btoa(String.fromCharCode(...new Uint8Array(assertion.rawId))),
response: {
clientDataJSON: btoa(String.fromCharCode(...new Uint8Array(assertion.response.clientDataJSON))),
authenticatorData: btoa(String.fromCharCode(...new Uint8Array(assertion.response.authenticatorData))),
signature: btoa(String.fromCharCode(...new Uint8Array(assertion.response.signature))),
userHandle: assertion.response.userHandle ? btoa(String.fromCharCode(...new Uint8Array(assertion.response.userHandle))) : null
},
type: assertion.type
};
await fetch('/wp-json/wpauth/v1/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(assertionResponse)
});
}PHP обработчик для выдачи challenge на вход:
add_action('rest_api_init', function() {
register_rest_route('wpauth/v1', '/login-options', [
'methods' => 'POST',
'callback' => 'wpauth_get_login_options',
'permission_callback' => '__return_true',
]);
});
function wpauth_get_login_options() {
// Получаем список зарегистрированных ключей пользователя из базы
$user_id = get_current_user_id();
$credentials = wpauth_get_user_credentials($user_id); // реализуйте эту функцию
$challenge = random_bytes(32);
$_SESSION['wpauth_challenge'] = $challenge;
$allowCredentials = array_map(function($cred) {
return [
'type' => 'public-key',
'id' => base64_encode($cred['credential_id']),
];
}, $credentials);
return [
'challenge' => base64_encode($challenge),
'allowCredentials' => $allowCredentials,
'timeout' => 60000,
'userVerification' => 'preferred',
];
}Советы по внедрению и рекомендации
1. Обязательно используйте HTTPS, иначе WebAuthn не будет работать.
2. Используйте сессии или безопасное хранилище для challenge, чтобы проверить ответ от клиента.
3. Храните публичные ключи и id ключей пользователя в базе данных, например, в отдельной таблице или мета-полях пользователя.
4. Тестируйте на разных браузерах и устройствах — поддержка WebAuthn может различаться.
5. Обеспечьте резервный способ входа (пароль, двухфакторка), чтобы пользователь не потерял доступ при проблемах с ключами.
Заключение
Интеграция WebAuthn в WordPress — отличный способ повысить безопасность и удобство аутентификации. Для быстрого старта можно использовать готовые плагины, а для полного контроля — реализовать собственное решение на базе REST API. Важно внимательно проработать хранение ключей и проверку challenge, а также обеспечить поддержку резервных методов входа.
Если хотите готовые решения, рекомендуем ознакомиться с плагином WP WebAuthn на WPSHOP — это надёжный инструмент с поддержкой современных стандартов безопасности.