РАЙТ ДЖОЙНt

Авторизация через социальные сети

ЗАКАЗ

Привязка сайта к социальным сетям часть 1. Вход на сайт через Одноклассники, ВКонтакте, Фэйсбук

Опубликовано:2018-07-19

Обновлено:2018-08-29

Задачи социальной интеграции

Сейчас большинство пользователей интернета имеют аккаунты в социальных сетях (одноклассники, фэйсбук, вконтаке и другие). Эти социальные сети предоставляют свой api для авторизации на сторонних сайтах. Получается очень удобно имея один аккаунт в социальной сети, им же подписываться на других ресурсах и постить понравившийся контент. Привязка вашего сайта к социальным сетям сделает его более 'дружелюбным' к пользователям, избавит их от утомительной процедуры регистрации и подтверждения E-Mail.

Под api (application programming interface) следует понимать набор команд (запросов, методов) и формат ответов, предоставляемых соц. сетью разработчикам и описанных в документации.

Авторизация через социальные сети

Существует несколько способов авторизации через социальные сети.

С использованием api сторонних разработчиков

Можно использовать виджеты сторонних разработчиков, например uLogin или другие.

Виджет uLogin позволяет авторизовать пользователей почти через любую социальную сеть

Преимущества такого подхода:

Широкий выбор социальных сетей для авторизации. Нет необходимости собственноручно регистрировать и настраивать ваше приложение в социальной сети, можно даже не заводить собственный аккаунт
Формат ответа при авторизации будет содержать набор стандартных заголовков полей, нет необходимости кастомизировать скрипт авторизации для каждой социальной сети. Вам не придется изучать документацию по методами работы с api

Недостатками будут:

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

С использование api социальных сетей

Принцип авторизации примерно одинаков для всех социальных сетей:

При регистрации вашего приложения на Одноклассниках, Фэйсбуке, ВКонтакте ему будет назначен client_id приложения и специальные ключи доступа client_secret. В настройках необходимо указать redirect_uri - адрес страницы, которая будет обрабатывать code подтверждения.
На любой странице вашего сайта вы размещаете ссылку с client_id, как в документации на api. При клике на ссылку, api соответствующей социальной сети загрузит виджет (окно) на javascript с предложением к пользователю авторизоваться и разрешить доступ вашему приложению к его профилю. Важно, что вводимые логин и пароль не передаются вашему приложению, они будут переданы к соц. сети. Сам client_id приложения, как и ссылка авторизации, не являются секретными.
После того как пользователь введет логин и пароль и разрешит авторизацию, на страницу, которую вы указали в настройках своего приложения в параметре redirect_uri, api социальной сети выполнит запрос с параметром code методом GET. Этот параметр обрабатывается и служит вашему приложению сигналом для начала авторизации и получения access_token
Далее, в целях безопасности, ваше приложение должно выполнить запрос на получение access_token с использованием специального ключа доступа client_secret и кода подтверждения code полученного на предыдущем шаге. client_secret должен храниться в секрете и быть известен только вам. Ответ вернется в формате json, легко парсится на php, позволяет определить возникшие на этом этапе ошибки
Если процесс получения access_token прошел успешно, используя его вы можете совершать запросы к методам api социальной сети для получения данных пользователя. Ответ также возвращается в формате json, содержит данные или коды ошибок.

socialConf

Настройки приложения сохраним в ассоциативном массиве $socialConf следующего вида:

$socialConf['client_id'] = YOUR_CLIENT_ID;
$socialConf['application_key'] = YOUR_APPLICATION_KEY;
$socialConf['client_secret'] = YOUR_CLIENT_SECRET;
$socialConf['redirect_uri'] = YOUR_REDIRECT_URI;

Далее $usrArr - ассоциативный массив данных пользователя.

Авторизация через odnoklassniki

Переходим по ссылке https://apiok.ru/dev/app/create и регистрируем свое приложение (заполняем форму), получаем client_id приложения и ключи доступа.
Размещаем ссылку для авторизации пользователя на вашем сайте.
href='https://connect.ok.ru/oauth/authorize?client_id='.$socialConf['client_id'].
'&scope=VALUABLE_ACCESS&response_type=code&redirect_uri='.$socialConf['redirect_uri'].'&layout=w&state=ok'
После клика на ссылку и разрешения пользователя авторизоваться у вас на сайте, api odnoklassniki выполнят запрос методом GET с параметром state и code на redirect_uri, который вы указали в настройках вашего приложения
Далее выполняем запрос на получение access_token и обрабатываем ошибки следующим образом:
$postReq = http_build_query(
array(
'code' => $_GET['code'],
'client_id' => $socialConf['client_id'],
'client_secret' => $socialConf['client_secret'],
"redirect_uri" => $socialConf['redirect_uri'],
"grant_type" => "authorization_code"
)
);
$opts = array('http' =>
array(
'method' => 'POST',
'header' => 'Content-type: application/x-www-form-urlencoded',
'content' => $postReq
)
);
$context = stream_context_create($opts);
$tokenReq = file_get_contents('https://api.ok.ru/oauth/token.do?', false, $context);
$tokenArr = json_decode($tokenReq, true);
//Обрабатываем ошибки
if(isset($tokenArr['access_token']) and $tokenArr['access_token']!=null){
//получаем данные пользователя
}
После получаем данные пользователя:
$secret_key = MD5($tokenArr['access_token'] . $socialConf['client_secret']);
$sig = MD5("application_key=" . $socialConf['application_key'] . "format=jsonmethod=users.getCurrentUser" . $secret_key);
$usrReq = file_get_contents("https://api.ok.ru/fb.do?
application_key=" . $socialConf['application_key'] . "&format=json" .
"&method=users.getCurrentUser&sig=" . $sig . "&access_token=" . $tokenArr['access_token']);
$usrArr = json_decode($usrReq, true);
//Обрабатываем ошибки
if(isset($usrArr['uid']) and $usrArr['uid']!=null){
}

Авторизация через facebook

Переходим по ссылке https://developers.facebook.com/apps/ и регистрируем свое приложение (заполняем форму), получаем client_id приложения и ключи доступа.

Размещаем ссылку для авторизации пользователя на вашем сайте.

href='https://www.facebook.com/dialog/oauth?client_id='.$socialConf['client_id'].
'&redirect_uri='.$socialConf['redirect_uri'].'&response_type=code'

После клика на ссылку и разрешения пользователя авторизоваться у вас на сайте, api facebook выполнят запрос методом GET с параметром code на redirect_uri, который вы указали в настройках вашего приложения

Далее выполняем запрос на получение access_token и обрабатываем ошибки следующим образом:

$tokenReq = file_get_contents("https://graph.facebook.com/oauth/access_token?client_id=".$socialConf['client_id'].
"&redirect_uri=".$socialConf["redirect_uri"]."&client_secret=".
$socialConf['client_secret']."&code=".$_GET['code']);
$tokenArr = json_decode($tokenReq, true);
//Обрабатываем ошибки
if(isset($tokenArr["access_token"]) and $tokenArr["access_token"]!=null){
//получаем данные пользователя
}

После получаем данные пользователя:

$usrReq=file_get_contents("https://graph.facebook.com/me?access_token=".$tokenArr["access_token"].
"&fields=id,first_name,last_name,link,email,gender,
birthday,picture.width(60).height(60)");
$usrArr = json_decode($usrReq, true);
//Обрабатываем ошибки
if(isset($usrArr["id"]) and $usrArr["id"]!=null){
}

Авторизация через vkontakte

Переходим по ссылке https://vk.com/dev/ и регистрируем свое приложение (заполняем форму), получаем client_id приложения и ключи доступа.

Размещаем ссылку для авторизации пользователя на вашем сайте.

https://oauth.vk.com/authorize?client_id='.$socialConf['client_id'].
'&display=page&redirect_uri='.$socialConf['redirect_uri'].
'&scope=friends&response_type=code&v=5.62'

Далее выполняем запрос на получение access_token и обрабатываем ошибки следующим образом:

$tokenReq=file_get_contents("https://oauth.vk.com/access_token?
client_id=".$socialConf['client_id'].
"&client_secret=".$socialConf['client_secret'].
"&redirect_uri=".$socialConf['redirect_uri'].
"&code=".$_GET['code']);
$tokenArr=json_decode($tokenReq, true);
//Обрабатываем ошибки
if(isset($tokenArr["access_token"]) and $tokenArr["access_token"]!=null){
//получаем данные пользователя
}

После получаем данные пользователя:

$usrReq = @file_get_contents('https://api.vk.com/method/users.get?user_ids='. $tokenArr['user_id'].
"&fields=photo_100,bdate&v=5.80&access_token=".$tokenArr['access_token']);
$usrArr = json_decode($usrReq, true);
//Обрабатываем ошибки
if($usrArr!=null and isset($usrArr['response']['0']['id'])
and $usrArr['response']['0']['id']!=null){
}

Заключение

Авторизация через социальные сети не является чем-то сложным, процесс авторизации очень похож для разных социальных сетей и это очень упрощает разработчикам социальную интеграцию приложений.