Slyweb
На разработку сайта! Скидки 50%!

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

jQuery и CSS

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

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

Вход на сайт с помощью социальных сетей можно прекрасно совместить с любой системой регистрации и авторизации, повысить пользовательскую аудиторию. Для этого нам нужно знать немного jQuery и php, полученные данные с сервера 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":

Авторизация на Twitter
рис. 5

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

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


Александр Ермаков