Вход на сайт с Twitter

Здравствуйте уважаемые читатели!

Мне очень интересна тема развития сайта с помощью социальных сетей, в том числе связанная с увеличением количества посещений и уменьшением показателя отказов. Согласитесь, вход на сайт с помощью социальных сетей имеет свои преимущества - сокращение времени на регистрацию за счёт её отсутствия.

Вход на сайт с помощью социальных сетей можно прекрасно совместить с любой системой регистрации и авторизации, повысить пользовательскую аудиторию. Для этого нам нужно знать немного jQuery и php, полученные данные с сервера Twitter можно будет сохранять в сессию или в базу, в зависимости от структуры сайта и Ваших целей.

Живой пример получения данных о пользователе с Twitter

• Получить данные от сервера Twitter

Шаг 1. Создаём приложение Twitter

Все социальные сети, включая VK, Twitter, Facebbok, для получения доступа к персональным данным, как правило, требуют обязательного создания и регистрации приложения, через которое будет осуществляется доступ и авторизация пользователя. Хотя если Вы преследуете цель простого получения имени или других персональных данных, не проходя авторизацию в социальной сети, проще будет отправить запрос и получить json ответ с сервера twitter. Приложение нужно создавать ещё и в тех случаях, когда необходимы не только персональные данные но и возможность создать новое сообщение пользователя в социальной сети через Ваш сайт либо удалить определенные сообщения, по крайней мере twitter и facebook указанные функции поддерживают в полной мере, про "вконтакте" ничего пока говорить не буду, но думаю там об этом уже позаботились.

Итак, идём по адресу https://dev.twitter.com/apps и регистрируем новое приложение в twitter.

Аккаунт для вебразработчика на английском языке, но ничего сложно здесь нет.

рис. 1,рис. 2

Выберите имя приложения, обязательные поля - помечены звёздочкой. Я указывал «callback url», данный параметр отражает url, на который будет перенаправлено приложение после успешной авторизации (рис. 3).

рис. 3

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

рис. 4

Ключ и секрет необходимо указать в качестве переменных в файле connect.php, так как здесь мы будем получать ответы на наши запросы к серверу Twitter для аутентификации нашего приложения и дальнейшего получения данных о пользователе.

  1.
$config['key'] = '';
  2.
$config['secret'] = '';
  3.

Но прежде чем я приведу весь код файла connect.php, расскажу о том как будет вызываться всплывающее окно авторизации. Указанное окно будет создаваться благодаря jquery плагину "jQuery OAuth". (Скачать плагин.). По сути в нём используется два основных метода - window.open и метод closed, определяющий возникновение события закрытия окна "connect.php".

Шаг 2. Подключите jQuery OAuth

  1.
<script src="jquery.oauthpopup.js"></script>
  2.
  3.
<script type="text/javascript">
  4.
$(document).ready(function(){
  5.
    $('#connect').click(function(){
  6.
        $.oauthpopup({
  7.
            path: 'connect.php',
  8.
            callback: function(){
  9.
			
10.
				$.getJSON('twittersession.php', function(data) {
11.
				  var items = [];
12.
13.
				  $.each(data, function(key, val) {
14.
					items.push('<li id="' + key + '">' + key + ': ' + val + '</li>');
15.
				  });
16.
17.
				  $('<ul/>', {
18.
					html: items.join('')
19.
				  }).appendTo('#otvet').parent().show('slow');
20.
				});
21.
                
22.
            }
23.
        });
24.
    });
25.
});
26.
</script>

Шаг 3. Укажите в файле connect.php полученные ключ и секрет.

В файле connect.php, используя ключ и секрет, мы сперва получаем "request token", а затем "access token", при этом необходимо соблюдать определённый порядок передачи параметров в запросе с обязательным шифрованием указанных параметров методом hash_hmac для последующей передачи в url серверу twitter:

  74.
// BUILD SIGNATURE
  75.
            // encode params keys, values, join and then sort.
  76.
            $keys = $this->_urlencode_rfc3986(array_keys($params));
  77.
            $values = $this->_urlencode_rfc3986(array_values($params));
  78.
            $params = array_combine($keys, $values);
  79.
            uksort($params, 'strcmp');
  80.
  81.
            // convert params to string 
  82.
            foreach ($params as $k => $v) {$pairs[] = $this->_urlencode_rfc3986($k).'='.$this->_urlencode_rfc3986($v);}
  83.
            $concatenatedParams = implode('&', $pairs);
  84.
  85.
            // form base string (first key)
  86.
            $baseString= "GET&".$this->_urlencode_rfc3986($this->request_token)."&".$this->_urlencode_rfc3986($concatenatedParams);
  87.
            // form secret (second key)
  88.
            $secret = $this->_urlencode_rfc3986($this->secret)."&";
  89.
            // make signature and append to params
  90.
            $params['oauth_signature'] = $this->_urlencode_rfc3986(base64_encode(hash_hmac('sha1', $baseString, $secret, TRUE)));
  91.
  92.
         // BUILD URL
  93.
            // Resort
  94.
            uksort($params, 'strcmp');
  95.
            // convert params to string 
  96.
            foreach ($params as $k => $v) {$urlPairs[] = $k."=".$v;}
  97.
            $concatenatedUrlParams = implode('&', $urlPairs);
  98.
            // form url
  99.
            $url = $this->request_token."?".$concatenatedUrlParams;
  100.

Полученные данные мы сохраняем в переменную сессии «mytwitter»:

  1.
$_SESSION['mytwitter'] = $response;
  2.

которую успешно возвращаем в файле twittersession.php запросу json в файле index.php:

  1.
<?php
  2.
session_start();
  3.
  4.
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT' ); 
  5.
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT'); 
  6.
header('Cache-Control: no-cache, must-revalidate'); 
  7.
header('Pragma: no-cache');
  8.
header('Content-Type: text/json; charset=UTF-8;');
  9.
echo $_SESSION['mytwitter'];
10.
11.
?>
12.

Сейчас после авторизации данные будут переданы и присоединены к элементу с id "otvet":

рис. 5

Скачать архив "Вход на сайт с Twitter".

На этом объяснять авторизацию на twitter закончу. В следующей статье я расскажу об авторизации с Facebook.