ЗАКАЗ

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

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

Сейчас большинство пользователей интернета имеют аккаунты в социальных сетях (одноклассники, фэйсбук, вконтаке и другие). Эти социальные сети предоставляют свой 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){
    }
  • Рекомендации при авторизации

    Актуальность данных пользователя

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

    Например пользователь может изменить фамилию в своем аккаунте. В facebook ссылка на страницу пользователя и аватар могут не быть постоянными.
    Если вы сохраняете данные профиля пользователя в базу данных для последующего использования, например даете ссылку на профиль в коментариях, то их необходимо переодически обновлять, можно при каждой авторизации.

    Гостевой и личный профили пользователя

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

    Ссылка на станицу по id в социальной сети

    • ВКонтакте: https://vk.com/idYOUR_id
    • Одноклассники: https://ok.ru/profile/YOUR_uid
    • Фэйсбук: к сожалению зная id пользователя получить ссылку на его страницу не получиться, теперь для этого требуется доступ к личному профилю пользователя.

    Один redirect_uri для всех соц. сетей

    Поскольку все соц. сети обращаются методом GET с параметром code на страницу авторизации redirect_uri их необходимо как-то идентифицировать.

    if (isset($_GET['state']) and $_GET['state']=='ok') {
    //В одноклассниках есть параметр state вместе с code.
    }else{
    if (strlen($_GET['code'])<300){
    //Вконтакте длина кода меньше 300 символов
    }else{
    //иначе facebook
    }
    }

    Проверка приложений и требование https в Facebook

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

    Мое приложение www.rightjoint.ru проверку не прошло, тестировщик faceboook заходил на мой сайт, но не был убежден что ссылка на страницу профиля необходима моим пользователям. Ссылку на профиль пользователя я указываю в коментариях, она доступна авторизованным пользователям, по ней можно убедиться что это реальный аккаунт в соц. сети.

    До 06 Октября 2018 все приложения использующие вход на сайт через Фэйсбук и access token должны использовать https. Если ваше сайт не работает по https - протоколу, фунция авторизации через Facebook работать не будет. Ссылки по теме: новости для разработчиков и включите HTTPS

    Всегда есть запасные варианты twitter и instagram и другие.

    Заключение

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

    Комментарии: 1Ответы: 0

    • anonimous
      2018-12-11 08:12:14

      Достаточно подробная статья, теперь понятно как самому сделать авторизацию через ВК, спасибо