Программирование

Давайте на примере яндекса расскажу про все этапы.

Необходимо выполнить следующие этапы:

• Иметь аккаунт на яндексе;

• По ссылке https://oauth.yandex.ru/ зарегистрировать приложение и сохранить ClientID и Client secret, которые в дальнейшем понадобятся на бэкендовской части проекта.

В самом приложении заходите в настройки (справа с верху рисунок ручки/карандаша), где в первую очередь настраиваем Redirect URI (адрес, куда будет стучаться почтовый сервис, в моем случае https://socionyx.ru/yandex-callback).

Ниже указываем информацию, которую у почтового сервиса хотим получить.

Сохраняем.

Дальше уже идет настройка фронтовской и бэкендовской части вашего приложения. На фронте вы просто добавляете кнопку, которая стучится на бэкенд и где реализуется вся магия.

На бэке мы стучимся, через кнопку на фронте, на этот метод контроллера:

@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, где я пишу о разработке мини приложения и в целом делюсь мыслями о буднях разработчика.

В первой лабе надо было подключиться к устройству (оно создаёт точку WiFi) и через веб-интерфейса устройства зажечь светодиод

Во второй надо было подключить к устройству кнопку, подключиться опять по WiFi и в веб-интерфейсе увидеть, что при нажатии на кнопку, отображается информация, что она нажата.

В третьей надо было подключить к устройству джойстик, в веб-интерфейсе можно смотреть положение джойстика.

В четвёртой лабе подключали динамик к устройству, заходили в веб-интерфейс и включали оттуда мелодию на динамике))

И в пятой взяли два устройства. Одно запрограммировали как сервер. Другое как клиент. Сервер раздаёт WiFi. Клиент автоматически к нему подключается. На клиенте есть кнопка. Если на неё нажать, то на сервере зажигается лампочка)