Для реализации авторизации с использованием Яндекс ID в приложении на React, можно воспользоваться библиотекой `passport-yandex` для Node.js, которая позволяет работать с Яндекс Passport API.
Вот пример реализации авторизации с Яндекс ID в приложении на React:
1. Установите библиотеки `passport-yandex` и `express`:
```
npm install passport-yandex express
```
2. Создайте файл `passport-yandex-auth.js` для настройки авторизации с Яндекс ID:
```js
const passport = require('passport');
const YandexStrategy = require('passport-yandex').Strategy;
// Настройки для Яндекс Passport API
const yandexStrategy = new YandexStrategy({
clientID: YOUR_CLIENT_ID,
clientSecret: YOUR_CLIENT_SECRET,
callbackURL: 'http://localhost:3000/auth/yandex/callback'
}, (accessToken, refreshToken, profile, done) => {
// Здесь можно обработать полученные данные о пользователе
return done(null, profile);
});
passport.use(yandexStrategy);
passport.serializeUser((user, done) => {
done(null, user);
});
passport.deserializeUser((user, done) => {
done(null, user);
});
```
3. Добавьте маршруты в ваш файл `app.js` для обработки авторизации:
```js
const express = require('express');
const passport = require('passport');
const app = express();
app.get('/auth/yandex',
passport.authenticate('yandex', { scope: ['profile'] })
);
app.get('/auth/yandex/callback',
passport.authenticate('yandex', { failureRedirect: '/login' }),
(req, res) => {
res.redirect('/');
}
);
```
4. В вашем компоненте React создайте кнопку для авторизации через Яндекс ID, которая будет перенаправлять на `/auth/yandex`:
```jsx
import React from 'react';
const Login = () => {
return (
<a href="http://localhost:3000/auth/yandex">Login with Yandex</a>
);
}
export default Login;
```
Теперь при клике на кнопку "Login with Yandex" пользователь будет авторизован через Яндекс ID.
Что касается параметра `redirect_uri` при работе с разными API, то его нужно указывать в соответствии с требованиями конкретного API. Например, при работе с ВКонтакте, вы должны указать ссылку на сервер для обработки ответа после авторизации. А при работе с Яндекс Passport API, вы должны указать ссылку на страницу, на которую пользователь будет перенаправлен после успешной авторизации. В обоих случаях параметр `redirect_uri` должен указывать на серверную часть приложения для обработки полученных данных и сохраниения сессии аутентификации.