Сторонние сервисы на страже вашего приложения. Регистрация и авторизация
Во время первого опыта разработки веб приложения столкнулся с проблемой регистрации пользователя, а именно:
Необходимость отправки пользователю на почту, которую он указывал при регистрации, ссылки для подтверждения почты. Для реализации такого функционала в проекте необходимо было настраивать SMTP (почтовый протокол) и настраивать свою почту для рассылки таких сообщений;
Необходимость хранения и шифрования паролей пользователей, а также реализация функционала авторизации пользователя, когда сравниваются почта и пароль, указанные пользователей при авторизации, с почтой и паролем, сохраненные в базе данных.
На момент реализации такого функционала, у меня совершенно не было опыта работы с фреймворком Spring Boot, который позволяет реализовать бэкенд на языке программирования Java, поэтому на реализацию у меня ушло сильно больше времени, чем я хотел. Да, сейчас есть опыт и для других проектов можно просто использовать готовые куски кода, что сильно упрощает разработку, даже с использованием другого фреймворка для бэкенда.
Но, есть альтернативный вариант, а именно, использование сторонних сервисов (гугл, яндекс и даже телеграм) для регистрации и авторизации пользователей. Именно такой вариант я решил реализовать для браузерной версии своего мини-приложения в ТГ t.me/Socionyx_Bot/socionyx, который реализует простой функционал чат-рулетки, присоединяйтесь и общайтесь с случайными людьми.
Давайте на примере яндекса расскажу про все этапы.
Необходимо выполнить следующие этапы:
Иметь аккаунт на яндексе;
По ссылке https://oauth.yandex.ru/ зарегистрировать приложение и сохранить ClientID и Client secret, которые в дальнейшем понадобятся на бэкендовской части проекта.
Зарегистрированные мною приложения
В самом приложении заходите в настройки (справа с верху рисунок ручки/карандаша), где в первую очередь настраиваем Redirect URI (адрес, куда будет стучаться почтовый сервис, в моем случае https://socionyx.ru/yandex-callback).
Можно указывать несколько адресов
Ниже указываем информацию, которую у почтового сервиса хотим получить.
Нам обязательно нужен login:email и login:info
Сохраняем.
Дальше уже идет настройка фронтовской и бэкендовской части вашего приложения. На фронте вы просто добавляете кнопку, которая стучится на бэкенд и где реализуется вся магия.
Вот как реализовано у меня в браузерной версии приложения
На бэке мы стучимся, через кнопку на фронте, на этот метод контроллера:
@Get('/yandex-url')
getYandexAuthUrl() {
const scope = "login:email login:info";
const yandexAuthUrl = `https://oauth.yandex.ru/authorize?client_id=%24%7Bthis.YANDE...}` +
`&redirect_uri=${this.REDIRECT_URI_YANDEX}` +
`&response_type=code` +
`&scope=${encodeURIComponent(scope)}` +
`&access_type=offline`;
return { url: yandexAuthUrl };
}
В методе, кроме YANDEX_CLIENT_ID, обязательно необходимо указать REDIRECT_URI_YANDEX, совпадает с тем, что указывали в настройках приложения. Непосредственно метод, который принимает ответ от почтового сервиса яндекс, выглядит следующим образом:
@Get('/yandex-callback')
async handleYandexCallback(@Query('code') code: string) {
try {
const params = new URLSearchParams();
params.append('code', code);
params.append('client_id', this.YANDEX_CLIENT_ID);
params.append('client_secret', this.YANDEX_CLIENT_SECRET);
params.append('redirect_uri', this.REDIRECT_URI_YANDEX);
params.append('grant_type', 'authorization_code');
const tokenResponse = await firstValueFrom(
this.httpService.post(this.YANDEX_TOKEN_URL, params.toString(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, }), );
if (tokenResponse.status !== HttpStatus.OK) { throw new HttpException({ error: 'Invalid token response' }, HttpStatus.UNAUTHORIZED); }
const accessToken = tokenResponse.data.access_token;
if (!accessToken) { throw new HttpException({ error: 'Access token not found' }, HttpStatus.UNAUTHORIZED); }
const userInfoResponse = await firstValueFrom(
this.httpService.get(this.YANDEX_USER_INFO_URL, {
headers: { Authorization: `Bearer ${accessToken}`, }, }),);
if (userInfoResponse.status !== HttpStatus.OK) {throw new HttpException({ error: 'Unable to fetch user info' }, HttpStatus.UNAUTHORIZED);}
const email = userInfoResponse.data.default_email;
const username = userInfoResponse.data.real_name;
if (!email) { throw new HttpException({ error: 'Email not found in user info' }, HttpStatus.UNAUTHORIZED); }
const existingUser = await this.userService.findUserByEmail(email);
let token: string;
if (existingUser) {
token = this.jwtTokenUtil.generateToken(existingUser, 8); } else {
const newUser = {email: email,username:username};
await this.userService.createUserFromAnotherServiceAccount(newUser.email, newUser.username);
token = this.jwtTokenUtil.generateToken(newUser, 8);}
return { token };
} catch (error) {
throw new HttpException(
{ error: 'Authorization failed: ' + error.message },
HttpStatus.INTERNAL_SERVER_ERROR,
);}}
Для YANDEX_USER_INFO_URL у меня указано 'https://login.yandex.ru/info'.
Непосредственно именно этот метод (handleYandexCallback) создает пользователя, если его еще нет, и отправляет на фронтенд токен, из которого уже достается вся необходимая информация.
Непосредственно вот так это выглядит после того, как все сделано. После нажатия на кнопку «Войти через Yandex» вы увидите следующую картинку и просто выполняете авторизацию через вашу почту яндекс.
Не обязательно указывать номер, можно и другие варианты выбрать
И все, теперь в вашем приложении можно регистрироваться и авторизовываться через существующую почту яндекс. Для гугла все абсолютно аналогично, только процедура настройки и получение ClientID и Client secret выглядит по-другому. В самом мини-приложении регистрация и авторизация реализуются уже через саму телегу, о чем, и не только, я уже расскажу в следующем посте.
Если интересно, you are welcome в мой тг канал t.me/socionyxchannel, где я пишу о разработке мини приложения и в целом делюсь мыслями о буднях разработчика.
