# Вход через социальные сети
# Процесс авторизации
Для авторизации через социальные сети вы можете использовать **БЕСПЛАТНОЕ** решение от Auth4App, интеграция максимально упрощает использование социальных сетей в вашем приложении или на сайте.
##### Поддерживаемые соц. сети
| [](https://support.auth4app.com/uploads/images/gallery/2024-05/ya.png) | [](https://support.auth4app.com/uploads/images/gallery/2024-05/vk.png) | [](https://support.auth4app.com/uploads/images/gallery/2024-05/google.png) |
| **yandex** | **vk** | **google** |
| [](https://support.auth4app.com/uploads/images/gallery/2024-05/ok.png) | [](https://support.auth4app.com/uploads/images/gallery/2024-05/mail.png) | Дополнительные соц. сети может добавить по запросу. |
| **ok** | **mailru** |
|
##### **Процесс авторизации**
Для авторизации через соц. сети следует вызвать ссылку вида
```
https://api.auth4app.com/auth?soc={КЛЮЧ СОЦ. СЕТИ}&key={ВАШ УНИКАЛЬНЫЙ КЛЮЧ}
```
Где soc это ключ социальной сети из таблицы выше, а уникальный ключ (минимум 256 символов) это уникальный ключ, по которому можно будет получить результат авторизации.
После успешной авторизации произойдет переход на страницу:
**[https://api.auth4app.com/callback/success](https://api.auth4app.com/callback/success)** Которая будет автоматически закрыта
[](https://support.auth4app.com/uploads/images/gallery/2024-05/snimok-ekrana-2024-05-18-v-03-26-15.png)
Если авторизация была отменена или прошла с ошибкой то будет переход на страницу:
**[https://api.auth4app.com/callback/error](https://api.auth4app.com/callback/error)**
Которая будет автоматически закрыта
[](https://support.auth4app.com/uploads/images/gallery/2024-05/snimok-ekrana-2024-05-18-v-03-26-23.png)
##### Получение результат авторизации
```
https://api.auth4app.com/hash?key={ВАШ УНИКАЛЬНЫЙ КЛЮЧ}
```
Сделав запрос с ключом авторизации который вы создавали для ссылки авторизации вы получите резаультат авторизации. А сам ключ действителен 1 минуту после авторизации.
**Ответ в случае если авторизация прошла с ошибкой или не была пройдена:**
```json
{
"type": "error",
"data": [ ]
}
```
**Успешная авторизация:**
```
{
"type": "success",
"data": {
"id": "406873ad05c4285______79a95da33a9a124d3",
"profile_id:: "11254______6136911",
"type": "google",
"mail": "mail@gmail.com",
"name": "Ivan",
"surname": "Ivanov",
"photo": "https://lh3.googleusercontent.com/a/ACg8________j=s96-c",
"userInfo": {
"id": "1125_______36911",
"email": "mail@gmail.com",
"verified_email": true,
"name": "Ivan Ivanov",
"given_name": "Ivan",
"family_name": "Ivanov",
"picture": "https://lh3.googleusercontent.com/a/ACg8o______=s96-c",
"locale": "ru"
},
}
}
```
Описание полей ответа:
| Поле | Описание |
| id | Уникальный ID ключ пользователя, будет постоянным при авторизации пользователя, можно использовать как уникальный ключ пользователя при сохранении способа авторизации. |
| profile\_id | ID из социальной сети в которой была авторизации |
| type | Ключ социальной сети, через которую была авторизация |
| mail | Email пользователя из социальной сети |
| name | Имя пользователя |
| surname | Фамилия пользователя |
| photo | Ссылка на фото профиля |
| userInfo | Оригинальный данные авторизации, которые были получены от социальной сети, отличаются в разных соц. сетях. |
Используйте поля name, surname, mail и photo для заполнения профиля пользователя, они статичны для всех социальных сетей и автоматически подставляются из userInfo, где ключи данных отличаются.
# Решение для Web приложения или сайта
Для реализации в Web можно использовать открытие страницы браузера и делать обработку на момент ее закрытия.
##### Алгоритм работы
1. Пользователь нажимаем войти через соц. сеть
2. Открывается окно с ссылкой на авторизацию
3. На событие закрытие окна авторизации (оно будет закрыто автоматически) делаем обработку с key для получения данных или запроса на сервер.
##### Пример JavaScript кода
```javascript
//Пример функции генерации уникального ключа
function getAlphaNumericRandom = (len){
if (len == undefined || len <= 0) {
len = 1;
}
var characters =
'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var result = '';
var iffirst = 0;
for (var i = 0; i < len; i++) {
if (i == 0) {
iffirst = 10;
} else {
iffirst = 0;
}
result +=
characters[Math.round(Math.random() * (characters.length - iffirst - 1))];
}
return result;
};
function generateUUID = (length) => {
var baseStr = '';
if (length) {
for (var i = 0; i < length; i++) baseStr += 'x';
} else {
baseStr = 'xxxxxxxxxx';
}
var d = new Date().getTime();
var uuid = baseStr.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
});
return uuid;
};
//-----------------------------------
let key = new Date().getTime() + '-' + generateUUID(256) + '-' + getAlphaNumericRandom(100);
let type = "vk";
let win = window.open(
`https://auth4app.com/auth?soc=${type}&key=${key}`,
'_blank'
);
const interval = setInterval(() => {
if (win && win.closed) {
clearInterval(interval);
//Делаем запрос на сервер с key, на котором получаем данные через метод /hash
//Или получаем данные локально через метод /hash
}
}, 500);
```
# Авторизация через социальные сети в CapacitorJS
Для авторизации через социальные сети в гибридном мобильном приложении CapacitorJS, используйте официальный плагин: [capacitor-simple-social-auth4app](https://www.npmjs.com/package/capacitor-simple-social-auth4app)
Он создает нативное WebView для авторизации, сам генерирует ключ и возвращает его и данные пользователя в случае успешной авторизации.
```javascript
SimpleSocialAuth4App.removeAllListeners();
SimpleSocialAuth4App.auth({ social: "vk" });
SimpleSocialAuth4App.addListener("authSuccess", (e) => {
let key = e.key;
//Логика работы с ключом для получения данных
//Или запрос на сервер для авторизации
});
SimpleSocialAuth4App.addListener("authError", (e) => {
//Ошибка авторизации
console.log(e);
});
```
# Авторизация через социальные сети в ReactNative
Для реализации авторизации через социальные сети в ReactNative можно использовать компонент WebView для отображения формы входа пользователю и получение результата авторизации по ссылкам редиректа.
```javascript
export const AuthScreen = () => {
const key = "{УНИКАЛЬНЫЙ КЛЮЧ АВТОРИЗАЦИИ}";
const soc = "vk"; //Ключ соц. сети
const onNavigationStateChange = (e) => {
if (e.url.indexOf('callback/error') > -1) {
//Ошибка авторизации
}
if (e.url.indexOf('callback/success') > -1) {
//Авторизация прошла успешно
//Логика работы с key для получения данных локально
//Или запрос на сервер
}
};
const initUrl = `https://api.auth4app.com/auth?soc=${soc}&key=${key}`;
return (
<>
);
}
```