Современные пользователи ценят скорость и удобство. Никто не хочет запоминать десятки паролей от разных сайтов. Именно поэтому авторизация через социальные сети (OAuth-авторизация) стала стандартом для большинства веб-ресурсов. В этой статье мы подробно разберём, как работает такой вход, какие преимущества он даёт и как настроить его на собственном сайте.

Что такое вход через социальные сети

Авторизация через социальные сети позволяет пользователям входить на сайт, используя уже существующие аккаунты в популярных сервисах — Google, ВКонтакте, Яндекс, Discord, GitHub, Steam и других. Вместо того чтобы придумывать новый пароль, пользователь просто нажимает кнопку «Войти через…» и подтверждает вход в знакомом ему сервисе.

Преимущества для пользователей и владельцев сайтов

• Удобство для пользователей — не нужно запоминать ещё один пароль.
• Быстрая регистрация — вход в пару кликов вместо заполнения длинной формы.
• Безопасность — пароли пользователей не хранятся на вашем сайте, а авторизация проходит через защищённые серверы крупных компаний;
• Снижение процента отказов — чем проще регистрация, тем больше посетителей становятся зарегистрированными пользователями.

Как работает процесс авторизации

Когда пользователь нажимает «Войти через Google» (или другой сервис), происходит следующее:

1. Пользователь перенаправляется на сайт сервиса (например, Google).
2. Сервис спрашивает: «Вы разрешаете сайту X получить ваш email и имя?»
3. Пользователь нажимает «Разрешить».
4. Сервис перенаправляет пользователя обратно на ваш сайт и передаёт специальный код.
5. Ваш сайт использует этот код, чтобы получить данные пользователя и создать (или найти) его учётную запись.

Ключи приложения: Client ID и Client Secret

Чтобы этот механизм работал, необходимо зарегистрировать своё приложение в каждом сервисе и получить два ключа:

• Client ID (идентификатор приложения) — публичный ключ, который говорит сервису: «Это сайт X»; Пример: 123456789.
• Client Secret (секретный ключ), приватный ключ, подтверждающий, что вы действительно владелец приложения. Пример: abcxyz. Никому его не показывайте!

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

• Discord — популярен среди геймеров, идеален для игровых сообществ.
• Steam — для игровых сообществ (работает по-другому, через OpenID).
• Google, универсальный вариант, есть у большинства пользователей.
• GitHub, для сообществ разработчиков.
• ВКонтакте — популярен в России и СНГ.
• Яндекс — популярен в России и СНГ.

Что нужно перед настройкой

Прежде чем приступить к настройке, убедитесь, что:

• HTTPS настроен — подавляющее большинство сервисов требуют, чтобы сайт работал по защищённому протоколу HTTPS. Без SSL-сертификата авторизация не заработает (исключение — localhost для тестирования).
• У вас есть реальный домен — большинство сервисов не принимают IP-адреса или localhost в качестве адреса сайта.
• Домен везде одинаковый, используйте один и тот же вариант домена (с www или без) и в настройках сервиса, и в настройках вашей CMS.

Настройка на примере Flute CMS

Страница управления социальными сетями находится в админ-панели. Путь: Админ-панель → Интеграции → Социальные сети. Для настройки потребуются права admin.social или admin.boss.

На этой странице отображается таблица со всеми доступными сервисами. У каждого сервиса есть:

• Соц.сеть — название сервиса;
• Время ожидания — таймаут подключения;
• Регистрация — разрешена ли регистрация через этот сервис;
• Статус — включён или выключен сервис;
• Действия, кнопки для настройки и управления.

Чтобы добавить новый сервис, нажмите кнопку «Добавить» в правом верхнем углу страницы. Для настройки уже добавленного сервиса нажмите на иконку настроек (шестерёнку) рядом с ним.

Redirect URI

При регистрации приложения в каждом сервисе потребуется указать Redirect URI — адреса, на которые сервис будет перенаправлять пользователя после авторизации. Обычно используются два адреса для каждого сервиса, например:

• https://ваш-сайт./auth/social/discord
• https://ваш-сайт./auth/social/discord/callback

Рекомендации по безопасности

• Никогда не публикуйте Client Secret в открытом доступе и не вставляйте его в клиентский код.
• Регулярно проверяйте список разрешённых Redirect URI — лишние адреса удаляйте.
• Используйте только официальные страницы разработчиков сервисов для регистрации приложений.
• При компрометации ключей немедленно сгенерируйте новые.

Вход через социальные сети — это простой и безопасный способ упростить жизнь пользователям и повысить конверсию регистраций на сайте. Настройка занимает немного времени: достаточно зарегистрировать приложение в нужных сервисах, получить ключи и указать их в админ-панели вашей CMS. Главное — соблюдать правила безопасности и следить за корректностью доменов и Redirect URI.