Проложить маршрут на Яндекс.Картах с помощью API

Пример отображения на карте маршрута от Белорусского вокзала до Лефортово:

ymaps.route(['Москва, Белорусский вокзал', 'Москва, Лефортово'], {mapStateAutoApply:true}).then(
  function(route) {
    map.geoObjects.add(route);
    alert('Длина маршрута = ' + route.getHumanLength());
  },
  function(error) {
    alert('Невозможно построить маршрут');
  }
);

Написанное актуально для
Яндекс.Карты API 2

Добавлено: 30 Июля 2018 08:21:48 Добавил: Андрей Ковальчук

Универсальное сколонение слов на PHP с использованием Яндекс.API

Пример простейшей функции, которая возвращает слово в нужном склонении

<?php
function inflect($what,$inflection_id)
{
   // Функция склонения названий, имен и любой другой фигни
   // Суть функции - ищем слово с нужной формой склонения в базе.
   // Если не нашли - дергаем склонятор Яндекса и кешируем в базу ответ.
   GLOBAL $mysql;
   $inflected="";

   $res_inflected=$mysql->query_to_array("select * from set_of_inflections where `original`='".$what."' and inflection_id='".$inflection_id."' limit 1");
   if(!empty($res_inflected))
   {
     $inflected=$res_inflected['inflected'];
   }
   else
   {

    $parser=xml_parser_create();
    
$data=@file_get_contents('http://export.yandex.ru/inflect.xml?name='.urlencode($what));
// print_r($data);
    if($data){
     xml_parse_into_struct($parser,$data,$structure,$index);
     if($structure){
// print_r($structure);
     foreach($structure as $key)
        {
          if(!isset($key['tag']) || !isset($key['value']))continue;
          elseif($key['tag']=='INFLECTION')
          {
            $inf[$what][$key['attributes']['CASE']]=$key['value'];
            $res_inflected=$mysql->query_to_array("insert into set_of_inflections (`original`, `inflection_id`, `inflected`)
            values ('".$what."',".$key['attributes']['CASE'].",'".$key['value']."')");
            if($key['attributes']['CASE']==$inflection_id)
            {
               $inflected=$key['value'];
            }
          }
        }
         }
    }
    xml_parser_free($parser);
   }
   if($inflected=="") $inflected=$what;
   return $inflected;
}
?>

Описание Яндекс.Склонятора

(c)Илья Артеменко (goblin)

Пример пакетного склонения
Для всех строк в файле file.txt запрашиваются все словоформы и выводятся на экран. Не используйте этот пример повторно, обзательно сохраняйте все в базу, иначе получите бан от яндекса.
<?php
header('Content-Type: text/html ; charset="utf-8"');
$file = file_get_contents('file.txt'); 
$file = explode(chr(10), $file);
$delim = '|';

foreach ($file as $k => $v) {
    $url = "http://export.yandex.ru/inflect.xml?name=$v";
    $xml = simplexml_load_file($url);
    $original = $xml->original;
    $im = trim($xml->inflection[0]);
    $rod = trim($xml->inflection[1]);
    $dat = trim($xml->inflection[2]);
    $vin = trim($xml->inflection[3]);
    $tvor = trim($xml->inflection[4]);
    $predl = trim($xml->inflection[5]);

    echo $im.$delim.$rod.$delim.$dat.$delim.$vin.$delim.$tvor.$delim.$predl.chr(10);
    echo '<br />';
}
?>

Добавлено: 29 Мая 2018 18:49:48 Добавил: Андрей Ковальчук

Как написать свое API

В этой статье я хочу рассказать о том, как можно написать api для своего сервиса. Сделаем сервис по проверки корректности e-mail адреса. То есть, мы будем вызывать нашу api функцию, передавать ей параметр, в данном случае e-mail, а в ответ api должно вернуть результат проверки или код ошибки.
Для начала нужно определиться, что и как будет отвечать api. Я думаю, самый простой способ сделать ответ в формате JSON. А возвращать будем ассоциативный массив, состоящий из трех массивов: status, response и error. Status может иметь только два значения, OK и ERROR – это будет обозначать, как прошло обращение к api. Error – тут мы будем передавать числовой код ошибки, если ошибки нет, то передавать будем 0. Response – этот массив будет хранить интересующий ответ: true – если, e-mail адрес корректный или false, если e-mail не корректный.
В теории, надеюсь все ясно, теперь непосредственно код. Создадим скрипт api.php:

<?php
$status = 'OK';
$response = null;
$error = 0;
if(!isset($_GET['email'])){ // если не получили параметр
    $status = 'ERROR';
    $error = 1;
}else{
    $email = $_GET['email'];
    if(preg_match("|^[-0-9a-z_\.]+@[-0-9a-z_^\.]+\.[a-z]{2,6}$|i", $email)){ // проверяем корректрость e-mail
        $response = true;
    }else{
        $response = false;
    }
}
// массив для ответа
$result = array(
    'status' => $status,
    'response' => $response,
    'error' => $error,
);
echo json_encode($result); // ответ в формате json
?>

Все, наше api готова, теперь попробуем сделать вызов нашей api функции, для этого создадим скрипт api_test.php
<?
$email = 'test@test.ru';
$resp = file_get_contents('http://myService.ru/api.php?email='.$email);
$data = json_decode($resp, true);
if($data['status']=='OK'){
    if($data['response']){
        echo 'E-mail корректный';
    }else{
        echo 'E-mail НЕ корректный';
    }
}else{
    echo 'Код ошибки: '.$data['error'];
}
?>

В скрипте мы пробовали вызывать api в php скрипте, но также можно сделать вызов с помощью java script
<script type="text/javascript">
var email = "test@test.ru";
$.ajax({
    url: 'http://myService.ru/api.php?email='+email,
    dataType : "json",
    success: function (data) {
        console.log(data);
        if(data['status'] == 'OK'){
            if(data['response'] === true){
                alert('e-mail корректный');
            }else{
                alert('e-mail НЕ корректный');                  
            }
        }
    }               
});
</script>

Добавлено: 09 Мая 2018 17:29:34 Добавил: Андрей Ковальчук

Получаем количество Twitter последователей на чистом PHP

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

Можете пользоваться данным скриптом на своё усмотрение.

Во-первых, создаём файл Cache.php и копируем туда код:

/**
* @desc Class реализация кэш функциональности
*/
class Cache
{
    const PATH_TO_CACHE = 'cache/';
 
    /**
    * @desc считать данные из кэша
    * @param string $fileName - название кэш файла
    * @return bool/string
    * Usage: Cache::read('fileName.extension')
    */
    function read($fileName)
    {
        $fileName = self::PATH_TO_CACHE . $fileName;
        if (file_exists($fileName)) {
            $handle = fopen($fileName, 'rb');
            $data = fread($handle, filesize($fileName));
            $data = unserialize($data);
            // проверка истечения срока жизни кэша
            if (time() > $data[0]) {
                // it expired, delete the file
                @unlink($fileName);
                return false;
            }
            fclose($handle);
            // если кэш валиден, возвращаем данные
            return $data[1];
        } else {
            return false;
        }
    }
 
    /**
    * @desc записать кэш типа key => value
    * @param string $fileName - название кэш файла (ключ)
    * @param mixed $variable - значение
    * @param number $ttl - время жизни файла
    * @return void
    * Usage: Cache::write('fileName.extension', value)
    */
    function write($fileName, $variable, $ttl)
    {
        $fileName = self::PATH_TO_CACHE . $fileName;
        $handle = fopen($fileName, 'a');
        fwrite($handle, serialize(array(time() + $ttl, $variable)));
        fclose($handle);
    }
 
    /**
    * @desc удаление кэш файла
    * @param string $fileName - название кэш файла (ключ)
    * @return void
    * Usage: Cache::delete('fileName.extension')
    */
    function delete($fileName)
    {
        $fileName = self::PATH_TO_CACHE . $fileName;
        @unlink($fileName);
    }
 
}

Данный класс будет использоваться для создания и считки кэша. Так же в классе есть такой параметр как время жизни кэша, так что вы можете быть спокойны о “свежести” информации.

Для работы с Twitter, я заюзаю библиотеку, которую нашёл на Github. Создайте файл TwitterAPIExchange.php и вставьте следующий код:
function getTwitterFollowers($screenName = 'codeforest')
{
    require_once('Cache.php');
    require_once('TwitterAPIExchange.php');
    // данную информаци можно взять при создании Twitter приложения на  http://dev.twitter.com/apps
    $settings = array(
        'oauth_access_token' => "YOUR_OAUTH_ACCESS_TOKEN",
        'oauth_access_token_secret' => "YOUR_OAUTH_ACCESS_TOKEN_SECRET",
        'consumer_key' => "YOUR_CONSUMER_KEY",
        'consumer_secret' => "YOUR_CONSUMER_SECRET"
    );
 
    $cache = new Cache();
 
    // получаем последователей из кэша
    $numberOfFollowers = $cache->read('cfTwitterFollowers.cache');
    // если кэша нет или время его жизни истекло
    if (false === $numberOfFollowers) {
        // создаём запрос
        $apiUrl = "https://api.twitter.com/1.1/users/show.json";
        $requestMethod = 'GET';
        $getField = '?screen_name=' . $screenName;
 
        $twitter = new TwitterAPIExchange($settings);
        $response = $twitter->setGetfield($getField)
             ->buildOauth($apiUrl, $requestMethod)
             ->performRequest();
 
        $followers = json_decode($response);
        $numberOfFollowers = $followers->followers_count;
 
        // кэшируем информацию на час
        $cache->write('cfTwitterFollowers.cache', $numberOfFollowers, 1*60*60);
    }
 
    return $numberOfFollowers;
}

Теперь, там где вам нужно внедрить функционал воспользуйтесь следующем кодом:
// подключаем файлы!
require_once(getTwitterFollowers.php);
// получаем инфу из Twitter
echo getTwitterFollowers('codeforest');

Добавлено: 07 Мая 2018 06:40:13 Добавил: Андрей Ковальчук

Создание коротких ссылок с помощью Bit.ly

Bit.ly — великолепная служба сокращения ссылок (URL). Эта служба обладает по истине невероятной надежностью, очень маленькой длиной ссылок и представляемой информацией о ссылке (URL).

А раз недавно Bit.ly обновил их API до 3 версии, то и появился дополнительный стимул написать о них. И так, представляем код сниппета на PHP, через который можно создавать короткие URL из длинных и наоборот через Bit.ly.

PHP

/* возвращает короткий url */
function get_bitly_short_url($url,$login,$appkey,$format='txt') {
	$connectURL = 'http://api.bit.ly/v3/shorten?login='.$login.'&apiKey='.$appkey.'&uri='.urlencode($url).'&format='.$format;
	return curl_get_result($connectURL);
}

/* возвращает длинный url */
function get_bitly_long_url($url,$login,$appkey,$format='txt') {
	$connectURL = 'http://api.bit.ly/v3/expand?login='.$login.'&apiKey='.$appkey.'&shortUrl='.urlencode($url).'&format='.$format;
	return curl_get_result($connectURL);
}

/* возвращает result form url */
function curl_get_result($url) {
	$ch = curl_init();
	$timeout = 5;
	curl_setopt($ch,CURLOPT_URL,$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
	curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
	$data = curl_exec($ch);
	curl_close($ch);
	return $data;
}

/* пример работы функции короткой url ссылки */
$short_url = get_bitly_short_url('http://davidwalsh.name/','davidwalshblog','xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
/* пример работы функции длинной url ссылки */
$long_url = get_bitly_long_url($short_url,'davidwalshblog',
'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');

Все что вам нужно, это пройти регистрацию на сайте Bit.ly и получить appkey и логин (вы должны быть зарегистрированными, чтобы использовать их API). В функциях Вы указываете логин, appkey, длинный или короткий URL и формат, в котором должен выйти результат. Если Вы хотите простую URL ссылку без дополнительной информации, просто используйте формат “txt”. XML или JSON форматы, позволят получить более полную информацию об URL.

Сервис Bit.ly зарекомендовал себя так, что даже Twitter использует его. Что вам еще нужно для рекомендации?

Добавлено: 07 Мая 2018 06:32:26 Добавил: Андрей Ковальчук

Аутентификация через Yandex

Сегодня мы продолжим разговор, посвящённый созданию аутентификации пользователей через социальные сети и сервисы. На этот раз под наш прицел попадает Yandex.

Если кто пропустил предыдущие выпуски, то их можно найти по следующим ссылкам:

Заметка. Как и в предыдущих статьях, пример, созданный в данном уроке, предназначен для работы на локальном сервере.

Шаг 1. Добавление нового приложения
Для начала нам необходимо добавить новое приложение на Yandex. Сделать это можно, пройдя по вот этой ссылке.

Название будет "Yandex Auth". В Правах кликаем на "Яндекс.Логин" и выбираем все подпункты: адрес электронной почты, дата рождения, имя пользователя, ФИО, пол. Если пользователь заполнил эти данные в своём профиле, то в последствии, мы получим к ним доступ. Callback URI выбираем: http://localhost/yandex-auth. Таким образом, на локальном сервере поместим наши файлы в каталог "yandex-auth". Нажимаем на кнопку "Создать".

На следующей странице нам отобразится блок со специальными параметрами:

Отсюда мы можем извлечь такие параметры, как `Id приложения`, и`Пароль приложения`. Запишем их в специальные переменные в файле index.php:

<?php
 
$client_id = '22d7dfc5f4358b47b41f6e1f8a80efa0'; // Id приложения
$client_secret = '721a338df24447efe9080cfd36a2da7a'; // Пароль приложения
$redirect_uri = 'http://localhost/yandex-auth'; // Callback URI

Шаг 2. Генерация ссылки для аутентификации
Для генерации ссылки нам потребуется адрес аутентификации и специальные параметры:
$url = 'https://oauth.yandex.ru/authorize';
 
$params = array(
    'response_type' => 'code',
    'client_id'     => $client_id,
    'display'       => 'popup'
);

С помощью функции http_build_query, передав массив параметров, мы получим чередование ключей и значений, как в url адресе. Итак, генерируем ссылку и выводим на экран. Тут же, в очередной раз, я воспользовался функцией urldecode. Если этого не сделать, то в сгенерированной ссылке могут появиться закодированные символы слешей, знаков двоеточия и так далее. Если же мы пропустим данную строку через функцию urldecode, то получим:
echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через Yandex</a></p>';
 
// https://oauth.yandex.ru/authorize?response_type=code&client_id=22d7dfc5f4358b47b41f6e1f8a80efa0&display=popup

Ссылка для аутентификации готова. Если мы сформировали все параметры верно и получили правильный url, то пройдя по ссылке, будем перенаправлены по адресу, указанному в настройках приложения ('http://localhost/yandex-auth'). Как и в предыдущих случаях (при работе с Вконтакте, Одноклассниками и Mail.ru), к этому адресу будет прикреплён специальный параметр code:
// Пример. В вашем случае код будет другой
http://localhost/yandex-auth/?state=&code=3408004

Шаг 3. Получение токена
Если к нам пришёл параметр code, то можем начать процедуру аутентификации. Он нам нужен для того, чтобы получить специальный токен доступа, с помощью которого, в дальнейшем, мы достанем информацию о пользователе.

В первую очередь, снова сформируем параметры для этого запроса. Нам потребуется передать параметры: `grand_type`, равный значению "authorization_code" - код активации; `code` - url параметр, пришедший от Yandex-а; `client_id` - id приложения; `client_secret` - пароль приложения:
if (isset($_GET['code'])) {
    $result = false;
 
    $params = array(
        'grant_type'    => 'authorization_code',
        'code'          => $_GET['code'],
        'client_id'     => $client_id,
        'client_secret' => $client_secret
    );
 
    $url = 'https://oauth.yandex.ru/token';
}

Далее нам нужно отправить POST запрос на адрес https://oauth.yandex.ru/token, передав перечисленные параметры. В PHP выполнить POST запрос можно с помощью создания curl-а:
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, urldecode(http_build_query($params)));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
$result = curl_exec($curl);
curl_close($curl);
 
$tokenInfo = json_decode($result, true);

При успешном выполнении запроса в переменную $tokenInfo будет записан ответ от Yandex-а в JSON формате. Данная строка содержит 2 параметра: access_token, который мы будем использовать в следующих запросах для извлечения информации о пользователе, token_type - тип токена:
{
  "access_token": "221b0ff4a4714efd956afe0ae2773ade",
  "token_type": "bearer"
}

Для того чтобы мы далее могли работать с данными параметрами, декодируем JSON строку с помощью функции json_decode и помещаем данные в массив, передав в качестве второго аргумента true.

Шаг 4. Получение информации о пользователе
Теперь, когда у нас есть параметры access_token, мы можем сделать запрос к Yandex API и получить информацию о пользователе:
if (isset($tokenInfo['access_token'])) {
    $params = array(
        'format'       => 'json',
        'oauth_token'  => $tokenInfo['access_token']
    );
}

В параметр format передаём значение json - формат возвращаемых данных; в oauth_token записываем access_token - токен доступа, который мы достали по POST запросу в предыдущем шаге.

Для получения информации о пользователе сформированные параметры нам нужно отправить GET запросом по адресу https://login.yandex.ru/info:
$userInfo = json_decode(file_get_contents('https://login.yandex.ru/info' . '?' . urldecode(http_build_query($params))), true);

В результате, если всё было сделано успешно, то получим JSON ответ. Преобразуем его сразу же в массив:
Array
(
    [display_name] => stanislav.protasevich
    [real_name] => Протасевич Станислав
    [sex] => male
    [birthday] => 1988-07-03
    [id] => 203179654
    [default_email] => stanislav.protasevich@yandex.com
    [emails] => Array
        (
            [0] => stanislav.protasevich@yandex.com
        )
)

Если в массиве есть ключ id, то записываем пришедший массив в переменную $userInfo:
if (isset($userInfo['id'])) {
    $userInfo = $userInfo;
    $result = true;
}

Полный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>Аутентификация через Yandex</title>
</head>
<body>
 
<?php
 
$client_id = '22d7dfc5f4358b47b41f6e1f8a80efa0'; // Id приложения
$client_secret = '721a338df24447efe9080cfd36a2da7a'; // Пароль приложения
$redirect_uri = 'http://localhost/yandex-auth'; // Callback URI
 
$url = 'https://oauth.yandex.ru/authorize';
 
$params = array(
    'response_type' => 'code',
    'client_id'     => $client_id,
    'display'       => 'popup'
);
 
echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через Yandex</a></p>';
 
if (isset($_GET['code'])) {
    $result = false;
 
    $params = array(
        'grant_type'    => 'authorization_code',
        'code'          => $_GET['code'],
        'client_id'     => $client_id,
        'client_secret' => $client_secret
    );
 
    $url = 'https://oauth.yandex.ru/token';
 
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, urldecode(http_build_query($params)));
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    $result = curl_exec($curl);
    curl_close($curl);
 
    $tokenInfo = json_decode($result, true);
 
    if (isset($tokenInfo['access_token'])) {
        $params = array(
            'format'       => 'json',
            'oauth_token'  => $tokenInfo['access_token']
        );
 
        $userInfo = json_decode(file_get_contents('https://login.yandex.ru/info' . '?' . urldecode(http_build_query($params))), true);
        if (isset($userInfo['id'])) {
            $userInfo = $userInfo;
            $result = true;
        }
    }
}
 
?>
 
</body>
</html>

Шаг 5. Извлечение информации о пользователе
Достаём данные о пользователе из переменной $userInfo:
if ($result) {
    echo "Социальный ID пользователя: " . $userInfo['id'] . '<br />';
    echo "Имя пользователя: " . $userInfo['real_name'] . '<br />';
    echo "Email: " . $userInfo['default_email'] . '<br />';
    echo "Пол пользователя: " . $userInfo['sex'] . '<br />';
    echo "День Рождения: " . $userInfo['birthday'] . '<br />';
}

Шаг 6. Дальнейшие шаги
После этого всё, что нам осталось сделать, так это создать сессию и поместить в неё информацию о нашем пользователе.
$_SESSION['user'] = $userInfo;

На странице выхода из системы просто удаляем сессию с помощью функци и unset.

Итог
Подробную информацию о Yandex OAuth вы сможете найти на сайте Yandex API. Ну вот и всё. С отечественными соц сетями и сервисами мы закончили, а начиная со следующей статьи, приступим к созданию аутентификации через зарубежные социальные сети.

Добавлено: 03 Мая 2018 06:36:48 Добавил: Андрей Ковальчук

Аутентификация через Google

Приветствую Вас, пользователи руселлера! Сегодня мы сделаем ещё один шаг на пути реализации аутентификации через социальные сети. На этот раз возьмёмся за Google.

Прежде чем мы начнём, хочу поблагодарить всех, кто оставляет комментарии к данным статьям! Я принимаю во внимание все пожелания и в последующем постараюсь оправдать Ваши ожидания.

Заметка. Пример, созданный в данном уроке, предназначен для работы на локальном сервере.

Шаг 1. Регистрация нового приложения
Для начала нам необходимо создать новое приложение на сайте Google Console.

В меню, расположенном слева, выбираем пункт "API Access". На открывшейся странице нажимаем на крупную синюю кнопку "Create an OAuth 2.0 client ID...".

Тип приложения (Application Type) выбираем Web Application. Your site and hostname формируем следующим образом: в выподающем списке выбираем http, адрес пишем localhost/google-auth. После того как вы кликните за предел данного текстового поля, введённые нами данные несколько поменяются, так и должно быть. В результате, Google автоматически сформирует Redirect URI.

Далее, всю нужную для аутентификации информацию можем найти на той же странице в Google Console:

Запишем нужные нам данные в файл index.php:

<?php
$client_id = '321934335118-fhpi6i4cpvp3643tvb7ipaha7qb48j3r.apps.googleusercontent.com'; // Client ID
$client_secret = 'hHQRLbR6RJzHPSBPaF4T-Hk0'; // Client secret
$redirect_uri = 'http://localhost/google-auth'; // Redirect URI

Шаг 2. Генерация ссылки для аутентификации
Для генерации ссылки нам потребуется адрес аутентификации и специальные параметры:
$url = 'https://accounts.google.com/o/oauth2/auth';
 
$params = array(
    'redirect_uri'  => $redirect_uri,
    'response_type' => 'code',
    'client_id'     => $client_id,
    'scope'         => 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile'
);

С помощью функции http_build_query, передав туда массив параметров, получим чередование ключей и значений, как в url адресе. Итак, генерируем ссылку и выводим на экран:
echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через Google</a></p>';
// https://accounts.google.com/o/oauth2/auth?redirect_uri=http://localhost/google-auth&response_type=code&client_id=333937315318-fhpi4i6cp36vp43b7tvipaha7qb48j3r.apps.googleusercontent.com&scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile

Итак, ссылка для аутентификации готова. Если мы сформировали все параметры правильным образом и получили верный url, то пройдя по ссылке, будем перенаправлены по адресу, указанному в настройках приложения ('http://localhost/google-auth'). Только теперь к этому адресу будет прикреплён специальный параметр code:
// Пример. В вашем случае код будет другой
http://localhost/google-auth/?code=4/UTIIYyKbcYV8ruGsLsLqeg-tA3hp.Ys3PTfXQxhUYOl05ti8ZT3b110wOewI

Шаг 3. Получение токена
Начинать процедуру аутентификации мы можем в том случае, если к нам пришёл параметр code. Он нам нужен для того, чтобы получить специальный токен доступа, с помощью которого, в дальнейшем, мы достанем информацию о пользователе.

В первую очередь, снова сформируем параметры для этого запроса. Нам потребуется передать параметры: `client_id` - id приложения; `client_secret` - секретный ключ; `redirect_uri` - страница, на которую будет возвращён пользователь; `grand_type`, равный значению "authorization_code" - код активации; `code` - url параметр, пришедший от Google:
if (isset($_GET['code'])) {
    $result = false;
 
    $params = array(
        'client_id'     => $client_id,
        'client_secret' => $client_secret,
        'redirect_uri'  => $redirect_uri,
        'grant_type'    => 'authorization_code',
        'code'          => $_GET['code']
    );
 
    $url = 'https://accounts.google.com/o/oauth2/token';
}

Далее нам нужно отправить POST запрос на адрес https://accounts.google.com/o/oauth2/token, передав перечисленные параметры. В PHP выполнить POST запрос можно с помощью создания curl запроса:
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, urldecode(http_build_query($params)));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
$result = curl_exec($curl);
curl_close($curl);
 
$tokenInfo = json_decode($result, true);

В результате, при успешном выполнении запроса в переменную $tokenInfo будет записан ответ от Google в JSON формате. Данная строка содержит 4 параметра: access_token, который мы будем использовать в следующих запросах для извлечения информации о пользователе; token_type - тип токена; expires_in - время жизни токена; id_token - id токена:
{
  "access_token" : "ya29.AHES6ZTGg0TYv6x-FIGNB438AlH4sTu54C8_6jCJ-GY6b8AeD7NSOxQ",
  "token_type" : "Bearer",
  "expires_in" : 3599,
  "id_token" : "eyJhbGciOiJSUzI1NiIsImtpZCI6IjQwODg0NDZmZjY2YjVjNjY4ZmE5MGJjYTEzZGJhMGI5NjhmMzc3ZGYifQ.eyJpc3MiOiJhY2NvdW50cy5nb29nbGUuY29tIiwiaWQiOiIxMDExMDMzMDM1ODE1NjEyNzMwMTQiLCJzdWIiOiIxMDExMDMzMDM1ODE1NjEyNzMwMTQiLCJ0b2tlbl9oYXNoIjoiTlVJU0R6T2lCeGlWQ3hkODM5RGRJZyIsImF0X2hhc2giOiJOVUlTRHpPaUJ4aVZDeGQ4MzlEZElnIiwiZW1haWwiOiJzdGFuaXNsYXYucHJvdGFzZXZpY2hAZ21haWwuY29tIiwiYXVkIjoiMzMzOTM3MzE1MzE4LWZocGk0aTZjcDM2dnA0M2I3dHZpcGFoYTdxYjQ4ajNyLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwiY2lkIjoiMzMzOTM3MzE1MzE4LWZocGk0aTZjcDM2dnA0M2I3dHZpcGFoYTdxYjQ4ajNyLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwiYXpwIjoiMzMzOTM3MzE1MzE4LWZocGk0aTZjcDM2dnA0M2I3dHZpcGFoYTdxYjQ4ajNyLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwidmVyaWZpZWRfZW1haWwiOiJ0cnVlIiwiZW1haWxfdmVyaWZpZWQiOiJ0cnVlIiwiaWF0IjoxMzYzNzcyOTM4LCJleHAiOjEzNjM3NzY4Mzh9.ZFkCkV5HIlQ-IefdCHtRLk0yCu5HRmaI90lmd57GMfxjLRiyjZ3pRUrbSngfwVww0d7RErvemKHJSsHQPk1A0IcVd64JpcR50WNcz7Qxq6SJyzsiHsAQtwvS-xms_Kw8kdoctl_7ZeE9tCD71vtczL429-pNihVY50goaZs5R14"
 
}

Для того чтобы мы далее могли работать с данными параметрами, декодируем JSON строку с помощью функции json_decode и помещаем данные в массив, передав в качестве второго аргумента true.

Шаг 4. Получение информации о пользователе
Далее делаем запрос к Google API для получения информации о пользователе. Для этого к параметрам, которые мы сформировали на предыдущем шаге, добавим ещё один - access_token:
if (isset($tokenInfo['access_token'])) {
    $params['access_token'] = $tokenInfo['access_token'];
 
    $userInfo = json_decode(file_get_contents('https://www.googleapis.com/oauth2/v1/userinfo' . '?' . urldecode(http_build_query($params))), true);
    if (isset($userInfo['id'])) {
        $userInfo = $userInfo;
        $result = true;
    }
}

Отправляем GET запрос по адресу https://www.googleapis.com/oauth2/v1/userinfo.

В результате, если всё было сделано правильно, то получим JSON ответ примерно следующего вида:
{
  "id": "101103303581561273014",
  "email": "stanislav.protasevich@gmail.com",
  "verified_email": true,
  "name": "Станислав Протасевич",
  "given_name": "Станислав",
  "family_name": "Протасевич",
  "link": "https://plus.google.com/101103303581561273014",
  "picture": "https://lh6.googleusercontent.com/-11v2dm14whE/AAAAAAAAAAI/AAAAAAAAAGk/KGrBbK8SGJU/photo.jpg",
  "gender": "male",
  "locale": "ru"
}

Полный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>Аутентификация через Google</title>
</head>
<body>
 
<?php
 
$client_id = '321934335118-fhpi6i4cpvp3643tvb7ipaha7qb48j3r.apps.googleusercontent.com'; // Client ID
$client_secret = 'hHQRLbR6RJzHPSBPaF4T-Hk0'; // Client secret
$redirect_uri = 'http://localhost/google-auth'; // Redirect URIs
 
$url = 'https://accounts.google.com/o/oauth2/auth';
 
$params = array(
    'redirect_uri'  => $redirect_uri,
    'response_type' => 'code',
    'client_id'     => $client_id,
    'scope'         => 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile'
);
 
echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через Google</a></p>';
 
if (isset($_GET['code'])) {
    $result = false;
 
    $params = array(
        'client_id'     => $client_id,
        'client_secret' => $client_secret,
        'redirect_uri'  => $redirect_uri,
        'grant_type'    => 'authorization_code',
        'code'          => $_GET['code']
    );
 
    $url = 'https://accounts.google.com/o/oauth2/token';
 
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, urldecode(http_build_query($params)));
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    $result = curl_exec($curl);
    curl_close($curl);
    $tokenInfo = json_decode($result, true);
 
    if (isset($tokenInfo['access_token'])) {
        $params['access_token'] = $tokenInfo['access_token'];
 
        $userInfo = json_decode(file_get_contents('https://www.googleapis.com/oauth2/v1/userinfo' . '?' . urldecode(http_build_query($params))), true);
        if (isset($userInfo['id'])) {
            $userInfo = $userInfo;
            $result = true;
        }
    }
}
 
?>
 
</body>
</html>

Шаг 5. Извлечение информации о пользователе
Для просмотра большего количества полей загляните в содержание переменной $userInfo:
if ($result) {
    echo "Социальный ID пользователя: " . $userInfo['id'] . '<br />';
    echo "Имя пользователя: " . $userInfo['name'] . '<br />';
    echo "Email: " . $userInfo['email'] . '<br />';
    echo "Ссылка на профиль пользователя: " . $userInfo['link'] . '<br />';
    echo "Пол пользователя: " . $userInfo['gender'] . '<br />';
    echo '<img src="' . $userInfo['picture'] . '" />'; echo "<br />";
}

Шаг 6. И снова дело за вами
Тут всё как и в предыдущих случаях. Если у нас есть такая информация, как ID пользователя, в первую очередь, нам необходимо проверить его наличие в нашей базе данных. Если пользователя с таким ID не существует, то значит он авторизовался с нашего сайта впервые, и мы внесём его в базу. Если пользователь уже есть, можем проверить, не изменились ли какие-то данные о нём, например, имя или ещё что-то. Если да, обновим запись.

После этого всё, что нам осталось сделать, так это создать сессию и поместить в неё информацию о нашем пользователе.
$_SESSION['user'] = $userInfo;

На странице выхода из системы просто удаляем сессию с помощью функции unset.

Итог
Всё. Нам осталось разобрать процесс аутентификации через Facebook, и далее мы рассмотрим общий пример с прикруткой к БД.

Добавлено: 03 Мая 2018 06:29:58 Добавил: Андрей Ковальчук

Аутентификация через Mail.ru

Продолжаем цикл статей, посвящённых созданию аутентификации пользователей через социальные сети и сервисы. Сегодня посмотрим, как осуществить подобный функционал через сервис Mail.ru

Если кто пропустил предыдущие выпуски, то их можно найти по следующим ссылкам:

Заметка. Как и в предыдущих статьях, пример, созданный в данном уроке, предназначен для работы на локальном сервере.

Шаг 1. Добавление нового приложения
Для начала нам необходимо добавить новый сайт в нашу учётную запись сервиса Mail.ru. Сделать это можно пройдя по вот этой ссылке. Для работы примера вам нужно будет самим зарегистрировать новое приложение и ввести собственные параметры.

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

Название будет "Mail.ru Auth". Адрес главной страницы - это тот url адрес страницы, где будет внедрён основной функционал: http://localhost/mailru-auth. Таким образом, на локальном сервере поместим наши файлы в каталог "mailru-auth".

Далее нажимаем на кнопку "Продолжить" и переходим к следующему шагу. На третьем шаге необходимо скачать файл receiver.html, поместить его в каталог вашего проекта и дать Mail.ru возможность проверить существование данного файла. Поскольку наш пример предназначен для работы на локальном сервере, то мы этого делать не будем. Просто нажимаем кнопку "Продолжить", и на следующей странице "Пропустить". Если же вы создаёте пример для приложения работающего на каком-то реальном сервере, то сначала пройдите процедуру проверки наличия файла receiver.html, иначе функциональность вашего примера может быть ограничена.

Итак, после успешного добавления сайта в сервис Mail.ru, нам должно выдастся следующее сообщение со специальными параметрами:

Отсюда мы можем извлечь такие параметры, как `ID` приложения, `Приватный ключ` и`Секретный ключ`. Запишем их в специальные переменные в файле index.php:

<?php
 
$client_id = '702253'; // ID
$client_secret = '81fefec83a3ff8903af3fc4ae7bcc18e'; // Секретный ключ
$redirect_uri = 'http://localhost/mailru-auth'; // Ссылка на приложение

Шаг 2. Генерация ссылки для аутентификации
Для генерации ссылки нам потребуется адрес аутентификации и специальные параметры:
$url = 'https://connect.mail.ru/oauth/authorize';
 
$params = array(
    'client_id'     => $client_id,
    'response_type' => 'code',
    'redirect_uri'  => $redirect_uri
);

С помощью функции http_build_query, передав массив параметров, мы получим чередование ключей и значений, как в url адресе. Итак, генерируем ссылку и выводим на экран:
echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через Mail.ru</a></p>';

Тут же, в очередной раз, я воспользовался функцией urldecode. Если этого не сделать, то в сгенерированной ссылке могут появиться закодированные символы слешей, знаков двоеточия и так далее:
https://connect.mail.ru/oauth/authorize?client_id=702253&client_secret=81fefec83a3ff8903af3fc4ae7bcc18e&grant_type=authorization_code&code=81c3a267c791b2f451ffdaa54c8abe31&redirect_uri=http%3A%2F%2Flocalhost%2Fmailru-auth

Если же мы пропустим данную строку через функцию urldecode, то получим:
https://connect.mail.ru/oauth/authorize?client_id=702253&client_secret=81fefec83a3ff8903af3fc4ae7bcc18e&grant_type=authorization_code&code=81c3a267c791b2f451ffdaa54c8abe31&redirect_uri=http://localhost/mailru-auth

Ссылка для аутентификации готова. Если мы сформировали все параметры верно и получили правильный url, то пройдя по ссылке, будем перенаправлены по адресу, указанному в настройках приложения ('http://localhost/mailru-auth'). Как и в предыдущих случаях (при работе с Вконтакте и Одноклассниками), к этому адресу будет прикреплён специальный параметр code:
// Пример. В вашем случае код будет другой
http://localhost/mailru-auth/?code=5adc5521461df2b28be76b5cfdd6c7e5

Шаг 3. Получение токена
Начинать процедуру аутентификации мы можем в том случае, если к нам пришёл параметр code. Он нам нужен для того, чтобы получить специальный токен доступа, с помощью которого, в дальнейшем, мы достанем информацию о пользователе.

В первую очередь, снова сформируем параметры для этого запроса. Нам потребуется передать параметры: `client_id` - id приложения; `client_secret` - секретный ключ; `grand_type`, равный значению "authorization_code" - код активации; `code` - url параметр, пришедший от Mail.ru; `redirect_uri` - страница, на которую будет возвращён пользователь:
if (isset($_GET['code'])) {
    $result = false;
 
    $params = array(
        'client_id'     => $client_id,
        'client_secret' => $client_secret,
        'grant_type'    => 'authorization_code',
        'code'          => $_GET['code'],
        'redirect_uri'  => $redirect_uri
    );
 
    $url = 'https://connect.mail.ru/oauth/token';
}

Далее нам нужно отправить POST запрос на адрес https://connect.mail.ru/oauth/token, передав перечисленные параметры. В PHP выполнить POST запрос можно с помощью создания curl запроса:
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, urldecode(http_build_query($params)));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
$result = curl_exec($curl);
curl_close($curl);
 
$tokenInfo = json_decode($result, true);

При успешном выполнении запроса в переменную $tokenInfo будет записан ответ от Mail.ru в JSON формате. Данная строка содержит 5 параметров: refresh token - маркер обновления информации, expires_in - время жизни токена, access_token, который мы будем использовать в следующих запросах для извлечения информации о пользователе, token_type - тип токена, x_mailru_vid - id пользователя в системе Mail.ru, который пытается авторизоваться:
{"refresh_token":"3d6c0c97abc7ce4a0a07a2950cf41a9f","expires_in":86400,"access_token":"bd0773b8b4f34394feec2f0ad3420968","token_type":"bearer","x_mailru_vid":"11138941216447863497"}

Для того чтобы мы далее могли работать с данными параметрами, декодируем JSON строку с помощью функции json_decode и помещаем данные в массив, передав в качестве второго аргумента true.

Шаг 4. Получение информации о пользователе
Теперь, когда у нас есть параметры access_token, мы можем сделать запрос к Mail.ru API и получить информацию о пользователе. Перед тем, как мы подготовим массив с параметрами, которые в последствии превратим во фрагмент url строки, нам нужно сформировать специальную `подпись` запроса $sign с помощью хэша md5;
if (isset($tokenInfo['access_token'])) {
    $sign = md5("app_id={$client_id}method=users.getInfosecure=1session_key={$tokenInfo['access_token']}{$client_secret}");
 
    $params = array(
        'method'       => 'users.getInfo',
        'secure'       => '1',
        'app_id'       => $client_id,
        'session_key'  => $tokenInfo['access_token'],
        'sig'          => $sign
    );

В параметр method записываем название метода Mail.ru API, который вернёт нам информацию о пользователе; параметру secure ставим 1 - это нужно для безопасности. Далее в параметр app_id передаём id нашего приложения; в session_key записываем access_token - токен доступа, который мы достали по POST запросу в предыдущем шаге и конечно же подпись запроса (sig).

Для получения информации о пользователе сформированные параметры нам нужно отправить GET запросом по адресу http://www.appsmail.ru/platform/api:
$params = array(
    'method'       => 'users.getInfo',
    'secure'       => '1',
    'app_id'       => $client_id,
    'session_key'  => $tokenInfo['access_token'],
    'sig'          => $sign
);
 
$userInfo = json_decode(file_get_contents('http://www.appsmail.ru/platform/api' . '?' . urldecode(http_build_query($params))), true);

В результате, если всё было сделано успешно, то получим JSON ответ приблизительно следующего вида:
[
  {
    "pic_50":"http://avt.appsmail.ru/mail/stanislav.protasevich/_avatar50",
    "friends_count":2,
    "pic_22":"http://avt.appsmail.ru/mail/stanislav.protasevich/_avatar22",
    "nick":"Стас Протасевич",
    "is_verified":1,
    "is_online":0,
    "pic_big":"http://avt.appsmail.ru/mail/stanislav.protasevich/_avatarbig",
    "last_name":"Протасевич",
    "has_pic":1,
    "email":"stanislav.protasevich@mail.ru",
    "pic_190":"http://avt.appsmail.ru/mail/stanislav.protasevich/_avatar190",
    "referer_id":"",
    "vip":0,
    "pic_32":"http://avt.appsmail.ru/mail/stanislav.protasevich/_avatar32",
    "birthday":"03.07.1988",
    "referer_type":"",
    "link":"http://my.mail.ru/mail/stanislav.protasevich/",
    "last_visit":"1363274031",
    "uid":"11138941216447863497",
    "app_installed":1,
    "status_text":"",
    "pic_128":"http://avt.appsmail.ru/mail/stanislav.protasevich/_avatar128",
    "sex":0,
    "pic":"http://avt.appsmail.ru/mail/stanislav.protasevich/_avatar",
    "pic_small":"http://avt.appsmail.ru/mail/stanislav.protasevich/_avatarsmall",
    "pic_180":"http://avt.appsmail.ru/mail/stanislav.protasevich/_avatar180",
    "pic_40":"http://avt.appsmail.ru/mail/stanislav.protasevich/_avatar40",
    "first_name":"Стас"
  }
]

Далее преобразуем JSON ответ в массив и проверим наличие в нём нулевого элемента с ключом uid. Если такой элемент есть, извлечём его из общего массива $userInfo с помощью метода array_shift:
if (isset($userInfo[0]['uid'])) {
    $userInfo = array_shift($userInfo);
    $result = true;
}

Полный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title></title>
</head>
<body>
 
<?php
 
$client_id = '702253'; // ID
$client_secret = '81fefec83a3ff8903af3fc4ae7bcc18e'; // Секретный ключ
$redirect_uri = 'http://localhost/mailru-auth'; // Ссылка на приложение
 
$url = 'https://connect.mail.ru/oauth/authorize';
 
$params = array(
    'client_id'     => $client_id,
    'response_type' => 'code',
    'redirect_uri'  => $redirect_uri
);
 
echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через Mail.ru</a></p>';
 
if (isset($_GET['code'])) {
    $result = false;
 
    $params = array(
        'client_id'     => $client_id,
        'client_secret' => $client_secret,
        'grant_type'    => 'authorization_code',
        'code'          => $_GET['code'],
        'redirect_uri'  => $redirect_uri
    );
 
    $url = 'https://connect.mail.ru/oauth/token';
 
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, urldecode(http_build_query($params)));
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    $result = curl_exec($curl);
    curl_close($curl);
 
    $tokenInfo = json_decode($result, true);
 
    if (isset($tokenInfo['access_token'])) {
        $sign = md5("app_id={$client_id}method=users.getInfosecure=1session_key={$tokenInfo['access_token']}{$client_secret}");
 
        $params = array(
            'method'       => 'users.getInfo',
            'secure'       => '1',
            'app_id'       => $client_id,
            'session_key'  => $tokenInfo['access_token'],
            'sig'          => $sign
        );
 
        $userInfo = json_decode(file_get_contents('http://www.appsmail.ru/platform/api' . '?' . urldecode(http_build_query($params))), true);
        if (isset($userInfo[0]['uid'])) {
            $userInfo = array_shift($userInfo);
            $result = true;
        }
    }
}
 
 
?>
 
</body>
</html>

Шаг 5. Извлечение информации о пользователе
Теперь извлекать информацию о пользователе мы можем из массива, хранящегося в переменной $userInfo, по ключам, которые вы можете найти в листинге JSON ответа последнего GET запроса. Я выведу лишь несколько значений:
if ($result) {
    echo "Социальный ID пользователя: " . $userInfo['uid'] . '<br />';
    echo "Имя пользователя: " . $userInfo['nick'] . '<br />';
    echo "Email: " . $userInfo['email'] . '<br />';
    echo "Ссылка на профиль пользователя: " . $userInfo['link'] . '<br />';
    echo "Пол пользователя: " . $userInfo['sex'] . '<br />';
    echo "День Рождения: " . $userInfo['birthday'] . '<br />';
    echo '<img src="' . $userInfo['pic_small'] . '" />'; echo "<br />";
}

Шаг 6. Что же дальше?
На данном этапе дальнейшая последовательность действий остаётся за вами. Если у нас есть такая информация, как ID пользователя, в первую очередь, нам необходимо проверить его наличие в нашей базе данных. Если пользователя с таким ID не существует, то значит он авторизовался с нашего сайта впервые, и мы внесём его в базу. Если пользователь уже есть, можем проверить, не изменились ли какие-то данные о нём, например, имя или ещё что-то. Если да, обновим запись.

После этого, всё что нам осталось сделать, так это создать сессию и поместить в неё информацию о нашем пользователе.
$_SESSION['user'] = $userInfo;

На странице выхода из системы просто удаляем сессию с помощью функции unset.

Итог
Ещё один рецепт создания сторонней аутентификацией у вас в копилке.

P.S. В комментариях к предыдущим статьям многие просят показать, что делать дальше. Как заполнить базу данных, как организовать полный процесс... Я обязательно расскажу об этом в заключительной части цикла данных статей, а до этого нам предстоит ознакомиться с созданием подобного функционала ещё для нескольких соц сетей и сервисов.

Дело в том, что процесс работы с БД для всех примеров будет одинаков, а вот в аутентификации через различные соц сети есть свои характерные детали.

Удачи!

Добавлено: 02 Мая 2018 19:28:06 Добавил: Андрей Ковальчук

Кросс-доменная API для сайта

В данном уроке мы сделаем собственный кросс-доменный API. Может быть вы уже пробовали делать что-то подобное, и, вероятно, сталкивались с невозможностью нормальной работы функций API со сторонних доменов. В основном не получается сделать нормальный запрос AJAX к удаленному серверу и получить ответ в JavaScript функциях. А причина заключается в настройках безопасности. Мы покажем, как решать подобные проблемы.

Шаг 1. PHP
Первым делом приготовим наш сервер.

api.php

<?php
 
// Устанавливаем возможность отправлять ответ для любого домена
header('Access-Control-Allow-Origin: *');
 
if (version_compare(phpversion(), '5.3.0', '>=')  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
 
// Получаем параметры POST
$sAction = $_POST['action'];
$iParam1 = (int)$_POST['param1'];
$iParam2 = (int)$_POST['param2'];
 
// Выполняем вычисления
$iResult = 0;
switch ($sAction) {
    case 'sum':
        $iResult = $iParam1 + $iParam2;
        break;
    case 'sub':
        $iResult = $iParam1 - $iParam2;
        break;
    case 'mul':
        $iResult = $iParam1 * $iParam2;
        break;
    case 'div':
        $iResult = $iParam1 / $iParam2;
        break;
}
 
// Подготавливаем массив результатов
$aResult = array(
    'result' => $iResult
);
 
// Генерируем результат
header('Content-type: application/json');
echo json_encode($aResult);

Следует уделить внимание первой строке, в которой используется установка для заголовка ‘Access-Control-Allow-Origin’. Так разрешается отправка ответа любому серверу (что означает - любому домену). Если вы хотите ограничить область использования определенным доменом, делайте это в данной строке. Затем мы выполняем простые операции в зависимости от полученных параметров $_POST. В нашем примере реализуются простые математические операции. Мы возвращаем результат в формате JSON. Теперь время подготовить библиотеку JavaScript.

Шаг 2. JavaScript
api.js
function do_sum(param1, param2, cfunction) {
 
    // Отправляем AJAX ответ на сервер
    $.ajax({
        type: 'POST',
        url: 'http://ваш_сайт/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=sum&param1=' + param1 + '&param2=' + param2,
        success: function(json) {
            // и вызываем функцию клиента
            cfunction(json);
        }
    });
}
 
function do_sub(param1, param2, cfunction) {
 
    // Отправляем AJAX ответ на сервер
    $.ajax({
        type: 'POST',
        url: 'http://ваш_сайт/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=sub&param1=' + param1 + '&param2=' + param2,
        success: function(json) {
            // и вызываем функцию клиента
            cfunction(json);
        }
    });
}
 
function do_mul(param1, param2, cfunction) {
 
    // Отправляем AJAX ответ на сервер
    $.ajax({
        type: 'POST',
        url: 'http://ваш_сайт/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=mul&param1=' + param1 + '&param2=' + param2,
        success: function(json) {
            // и вызываем функцию клиента
            cfunction(json);
        }
    });
}
 
function do_div(param1, param2, cfunction) {
 
    // Отправляем AJAX ответ на сервер
    $.ajax({
        type: 'POST',
        url: 'http://ваш_сайт/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=div&param1=' + param1 + '&param2=' + param2,
        success: function(json) {
            // и вызываем функцию клиента
            cfunction(json);
        }
    });
}

Это обертка для нашей серверной части. В примере подготовлены 4 функции JavaScript: do_sum, do_sub, do_mul и do_div. Для каждой серверной операции. Обобщая, можно сказать, что нужно для правильного запроса: первое, установить необходимы URL для файла серверной части API (например: http://ваш_сайт/api.php); второе, установить для ‘crossDomain’ значение true; и последнее, установить тип данных dataType (для нашего примера ‘json’). Обратите внимание, что третий параметр каждой нашей функции - ‘cfunction’. Это пользовательская функция и нам следует передавать полученный ответ сервера в данную функцию.

Шаг 3. Использование
Небольшой пример использования подобного API.
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://ваш_сервер/api.js"></script>
</head>
<body>
 
<script type="text/javascript">
$(document).ready(function() {
 
    // Выполняем метод 1 (сумма) на сервере
    var param1 = 5;
    var param2 = 10;
    do_sum(param1, param2, function(data) {
        $('#results').append(param1 + ' + ' + param2 + ' = ' + data.result + '<br />');
 
        // Выполняем метод  2 (вычитание) на сервере
        param1 = 25;
        param2 = 15;
        do_sub(param1, param2, function(data) {
            $('#results').append(param1 + ' - ' + param2 + ' = ' + data.result + '<br />');
 
            // Выполняем метод  3 (умножение) на сервере
            param1 = 8;
            param2 = 5;
            do_mul(param1, param2, function(data) {
                $('#results').append(param1 + ' * ' + param2 + ' = ' + data.result + '<br />');
 
                // Выполняем метод  4 (деление) на сервере
                param1 = 33;
                param2 = 11;
                do_div(param1, param2, function(data) {
                    $('#results').append(param1 + ' / ' + param2 + ' = ' + data.result + '<br />');
                });
            });
 
        });
    });
 
});
</script>
 
<div id="results"></div>
</body>
</html>

Здесь показано, как можно использовать функции API. Вот единичный пример:
var param1 = 5;
var param2 = 10;
do_sum(param1, param2, function(data) {
    $('#results').append(param1 + ' * ' + param2 + ' = ' + data.result + '<br />');
});

Мы просто передаем 3 параметра в нашу функцию: 2 цифры и одну функцию. Ответ сервера будет получать данная функция. И можно будет выводить результат где-нибудь (как пример используется элемент #results).

Добавлено: 02 Мая 2018 16:14:30 Добавил: Андрей Ковальчук

Аутентификация через Facebook

Привет всем! Сегодня мы выходим на финишную прямую и рассмотрим, как осуществить процесс аутентификации через социальную сеть Facebook.

Заметка. Пример, созданный в данном уроке, предназначен для работы на локальном сервере.

Шаг 1. Регистрация нового приложения
Для того чтобы добавить новое приложение на Facebook, отправляемся на специально подготовленную для этого страницу.

В верхнем правом углу нажимаем на кнопку "+ Создать новое приложение". Далее вписываем название приложения:

Затем вводим проверочный код:

Далее, на странице настроек вашего приложения, отправляемся к блоку "Как ваше приложение встроено в Facebook" и кликаем на пункт "Website with Facebook Login". В открвшемся поле вводим адрес нашего сайта. В моём случае, это http://localhost/facebook-auth:

После этого сохраняем все настройки. Для дальнейшей работы вам понадобятся параметры, которые вы сможете найти в следующих полях:

Запишем их в специальные переменные файла index.php:

<?php
$client_id = '578516362116657'; // Client ID
$client_secret = 'eb1814bd3980ab9a306dc35073021fb3'; // Client secret
$redirect_uri = 'http://localhost/facebook-auth'; // Redirect URIs

Шаг 2. Генерация ссылки для аутентификации
Для генерации ссылки нам потребуется адрес аутентификации и специальные параметры:
$url = 'https://www.facebook.com/dialog/oauth';
 
$params = array(
    'client_id'     => $client_id,
    'redirect_uri'  => $redirect_uri,
    'response_type' => 'code',
    'scope'         => 'email,user_birthday'
);

С помощью функции http_build_query, передав туда массив параметров, получим чередование ключей и значений, как в url адресе. Итак, генерируем ссылку и выводим на экран:
echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через Facebook</a></p>';
// https://www.facebook.com/dialog/oauth?client_id=578516362116657&redirect_uri=http://localhost/facebook-auth&response_type=code&scope=email,user_birthday

Итак, ссылка для аутентификации готова. Если мы сформировали все параметры правильным образом и получили верный url, то пройдя по ссылке, будем перенаправлены по адресу, указанному в настройках приложения ('http://localhost/facebook-auth'). Только теперь к этому адресу будет прикреплён специальный параметр code:
// Пример. В вашем случае код будет другой
http://localhost/facebook-auth/?code=AQD5q80zafjvVZoZex87ROxkCvWT9rZhjwZtkBLajYwH20KztPOI0jpb5lHZisPd3mA49Wu_onAeEioU5K6KVuoCliznf61B5bDfZSLFaIn6E7E49zqs4fO6NjTYyxN43LBttCvsSlirJOAtbOpB3oyMrl3bbjlPhGHsCyJzA-DypEIZ1c_36WAEBPmfSq3TroekvTLme3jIzZk0C-93cu8z#_=_

Шаг 3. Получение токена
Начинать процедуру аутентификации мы можем в том случае, если к нам пришёл параметр code. Он нам нужен для того, чтобы получить специальный токен доступа, с помощью которого, в дальнейшем, мы достанем информацию о пользователе.

В первую очередь, снова сформируем параметры для этого запроса. Нам потребуется передать параметры: `client_id` - id приложения; `redirect_uri` - страница, на которую будет возвращён пользователь; `client_secret` - секретный ключ; `code` - url параметр, пришедший от Facebook:
if (isset($_GET['code'])) {
    $result = false;
 
    $params = array(
        'client_id'     => $client_id,
        'redirect_uri'  => $redirect_uri,
        'client_secret' => $client_secret,
        'code'          => $_GET['code']
    );
 
    $url = 'https://graph.facebook.com/oauth/access_token';
}

Далее нам нужно отправить GET запрос на адрес https://graph.facebook.com/oauth/access_token, передав перечисленные параметры. В PHP выполнить GET запрос по какому-то адресу можно несколькими способами. Для данного урока я воспользуюсь функцией file_get_contents. В отличии от других социальных сетей, Facebook присылает ответ не в JSON формате, а в виде строки, где параметры разделены специальными символами. Для того чтобы распарсить данный ответ, воспользуемся функцией parse_str, а результат (в виде массива) запишем в переменную $tokenInfo:
$tokenInfo = null;
parse_str(file_get_contents($url . '?' . http_build_query($params)), $tokenInfo);

В результате, при успешном выполнении запроса в переменную $tokenInfo будет записан ответ от Facebook в JSON формате. Данная строка содержит 4 параметра: access_token, который мы будем использовать в следующих запросах для извлечения информации о пользователе; token_type - тип токена; expires_in - время жизни токена; id_token - id токена:
array(2) {
  ["access_token"]=>
  string(115) "AAAIOREZCDAnUBAOEmLbNqgHzQSNFoZBBdZC99eNv6DkZA842GUTHP3H7j7YnxEPOZCmZBiPgEZCJCb80zVXDGP9JeX8DGSRi6PU2liZAPQuj9QZDZD"
  ["expires"]=>
  string(7) "5177324"
}

Шаг 4. Получение информации о пользователе

Далее делаем запрос к Facebook API для получения информации о пользователе. Передавать будем один единственный параметр access_token:
if (count($tokenInfo) > 0 && isset($tokenInfo['access_token'])) {
        $params = array('access_token' => $tokenInfo['access_token']);
 
        $userInfo = json_decode(file_get_contents('https://graph.facebook.com/me' . '?' . urldecode(http_build_query($params))), true);
        if (isset($userInfo['id'])) {
            $userInfo = $userInfo;
            $result = true;
        }
    }

Отправляем GET запрос по адресу https://graph.facebook.com/me.

В результате, если всё было сделано правильно, то получим JSON ответ примерно следующего вида:
Array
(
    [id] => 100000317390816
    [name] => Стас Протасевич
    [first_name] => Стас
    [last_name] => Протасевич
    [birthday] => 07/03/1988
    [hometown] => Array
        (
            [id] => 110228142339670
            [name] => Chisinau, Moldova
        )
 
    [location] => Array
        (
            [id] => 110228142339670
            [name] => Chisinau, Moldova
        )
 
    [work] => Array
        (
            [0] => Array
                (
                    [employer] => Array
                        (
                            [id] => 159295210819421
                            [name] => Web-Concept
                        )
 
                    [location] => Array
                        (
                            [id] => 110228142339670
                            [name] => Chisinau, Moldova
                        )
 
                    [position] => Array
                        (
                            [id] => 108480125843293
                            [name] => Web Developer
                        )
 
                    [start_date] => 2010-09
                    [end_date] => 2011-10
                )
 
        )
 
    [sports] => Array
        (
            [0] => Array
                (
                    [id] => 106011416097502
                    [name] => Ice hockey
                )
 
        )
 
    [favorite_athletes] => Array
        (
            [0] => Array
                (
                    [id] => 202766356426583
                    [name] => Michael Jordan
                )
 
        )
 
    [inspirational_people] => Array
        (
            [0] => Array
                (
                    [id] => 7170054127
                    [name] => Hans Zimmer
                )
 
            [1] => Array
                (
                    [id] => 113529011990795
                    [name] => Steve Jobs
                )
 
            [2] => Array
                (
                    [id] => 225471537469600
                    [name] => Albert Einstein
                )
        )
 
    [education] => Array
        (
            [0] => Array
                (
                    [school] => Array
                        (
                            [id] => 135979339750670
                            [name] => Лицей Василия Лупу
                        )
 
                    [year] => Array
                        (
                            [id] => 140617569303679
                            [name] => 2007
                        )
 
                    [type] => High School
                )
 
            [1] => Array
                (
                    [school] => Array
                        (
                            [id] => 110260779004118
                            [name] => State University of Moldova
                        )
 
                    [year] => Array
                        (
                            [id] => 142963519060927
                            [name] => 2010
                        )
 
                    [concentration] => Array
                        (
                            [0] => Array
                                (
                                    [id] => 189014467787633
                                    [name] => Прикладная информатика
                                )
 
                        )
 
                    [type] => College
                )
 
            [2] => Array
                (
                    [school] => Array
                        (
                            [id] => 110260779004118
                            [name] => State University of Moldova
                        )
 
                    [degree] => Array
                        (
                            [id] => 200940416612694
                            [name] => Магистр
                        )
 
                    [year] => Array
                        (
                            [id] => 115222815248992
                            [name] => 2012
                        )
 
                    [concentration] => Array
                        (
                            [0] => Array
                                (
                                    [id] => 120214931322280
                                    [name] => сетевые технологии
                                )
 
                        )
 
                    [type] => Graduate School
                )
 
        )
 
    [gender] => male
    [email] => stanislav.protasevich@gmail.com
    [timezone] => 2
    [locale] => ru_RU
    [languages] => Array
        (
            [0] => Array
                (
                    [id] => 176015189120060
                    [name] => Russian
                )
 
            [1] => Array
                (
                    [id] => 106059522759137
                    [name] => English
                )
 
        )
 
    [verified] => 1
    [updated_time] => 2012-12-06T18:06:38+0000
)

Полный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>Аутентификация через Facebook</title>
</head>
<body>
 
<?php
 
$client_id = '578516362116657'; // Client ID
$client_secret = 'eb1814bd3980ab9a306dc35073021fb3'; // Client secret
$redirect_uri = 'http://localhost/facebook-auth'; // Redirect URIs
 
$url = 'https://www.facebook.com/dialog/oauth';
 
$params = array(
    'client_id'     => $client_id,
    'redirect_uri'  => $redirect_uri,
    'response_type' => 'code',
    'scope'         => 'email,user_birthday'
);
 
echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через Facebook</a></p>';
 
if (isset($_GET['code'])) {
    $result = false;
 
    $params = array(
        'client_id'     => $client_id,
        'redirect_uri'  => $redirect_uri,
        'client_secret' => $client_secret,
        'code'          => $_GET['code']
    );
 
    $url = 'https://graph.facebook.com/oauth/access_token';
 
    $tokenInfo = null;
    parse_str(file_get_contents($url . '?' . http_build_query($params)), $tokenInfo);
 
    if (count($tokenInfo) > 0 && isset($tokenInfo['access_token'])) {
        $params = array('access_token' => $tokenInfo['access_token']);
 
        $userInfo = json_decode(file_get_contents('https://graph.facebook.com/me' . '?' . urldecode(http_build_query($params))), true);
 
        if (isset($userInfo['id'])) {
            $userInfo = $userInfo;
            $result = true;
        }
    }
}
?>
 
</body>
</html>

Шаг 5. Извлечение информации о пользователе
Для просмотра большего количества полей загляните в содержание переменной $userInfo:
if ($result) {
        echo "Социальный ID пользователя: " . $userInfo['id'] . '<br />';
        echo "Имя пользователя: " . $userInfo['name'] . '<br />';
        echo "Email: " . $userInfo['email'] . '<br />';
        echo "Ссылка на профиль пользователя: " . $userInfo['link'] . '<br />';
        echo "Пол пользователя: " . $userInfo['gender'] . '<br />';
        echo "ДР: " . $userInfo['birthday'] . '<br />';
        echo '<img src="http://graph.facebook.com/' . $userInfo['id'] . '/picture?type=large" />'; echo "<br />";
    }

Шаг 6. И снова дело за вами
Тут всё как и в предыдущих случаях. Если у нас есть такая информация, как ID пользователя, в первую очередь, нам необходимо проверить его наличие в нашей базе данных. Если пользователя с таким ID не существует, то значит он авторизовался с нашего сайта впервые, и мы внесём его в базу. Если пользователь уже есть, можем проверить, не изменились ли какие-то данные о нём, например, имя или ещё что-то. Если да, обновим запись.

После этого всё что нам осталось сделать, так это создать сессию и поместить в неё информацию о нашем пользователе.
$_SESSION['user'] = $userInfo;

На странице выхода из системы просто удаляем сессию с помощью функции unset.

Итог
Итак, это последняя статья, где мы рассматривали создание аутентификации для отдельной социальной сети или сервиса. В следующем уроке я покажу вам, как построить систему аутентификации через несколько соц сетей, и как прикрутить всё это к БД. Удачи!

Добавлено: 02 Мая 2018 14:50:19 Добавил: Андрей Ковальчук

Аутентификация через ВКонтакте

С каждым днём влияние социальных сетей и сервисов только крепчает. Это означает, что нам, как веб разработчикам нужно это учитывать. Сегодня я расскажу и покажу, как создать аутентификацию ваших пользователей через социальную сеть ВКонтакте. Для этого мы не будем пользоваться какими-то сторонними библиотеками, а реализуем всё с нуля, собственными руками. Думаю, многие ждали подобного урока, так что томить не буду. Начнём!

Заметка. Пример, созданный в данном уроке, предназначен для работы на локальном сервере.

Шаг 1. Регистрация нового приложения
Для начала нам необходимо создать новое приложение на сайте социальной сети ВКонтакте

В открывшейся форме введите название приложения; выберите тип “Веб-сайт”; В качестве адреса сайта введите путь к папке с проектом на вашем локальном сервере. В моём случае, это http://localhost/vk-auth. Базовый домен: localhost.

После нажатия на кнопку “Подключить сайт”, вам наверняка придётся ввести проверочный код, который придёт по смс. Если вы пройдёте проверку, то вам должна открыться следующая форма с настройками приложения.

Сразу же хочу предупредить, что настоящие данные, относящиеся к моему приложению, я заменил на фиктивные, т.к. публикация таких значений как “Защищённый ключ” карается удалением вашего приложения или учётной записи в целом.

Из данной формы нам понадобятся такие данные, как `ID приложения`, `Защищённый ключ`, `Адрес сайта`. Запишем их в специальные переменные в файле index.php:

<?php
 
$client_id = '3485070'; // ID приложения
$client_secret = 'lYjfUZwZmlJJlFIqQFAj'; // Защищённый ключ
$redirect_uri = 'http://localhost/vk-auth'; // Адрес сайта
Шаг 2. Генерация ссылки для аутентификации
Для генерации ссылки нам потребуется адрес аутентификации и специальные параметры:

$url = 'http://oauth.vk.com/authorize';
 
$params = array(
    'client_id'     => $client_id,
    'redirect_uri'  => $redirect_uri,
    'response_type' => 'code'
);

С помощью функции http_build_query, передав туда массив параметров, получим чередование ключей и значений, как в url адресе. Итак, генерируем ссылку и выводим на экран:
echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через ВКонтакте</a></p>';

Также тут я воспользовался функцией urldecode. Если этого не сделать, то в сгенерированной ссылке могут появиться закодированные символы слешей, знаков двоеточия и так далее. Что-то вроде этого:
http://oauth.vk.com/authorize?client_id=3485070&redirect_uri=http%3A%2F%2Flocalhost%2Fvk-auth&response_type=code

Если же мы пропустим данную строку через функцию urldecode, то получим:
http://oauth.vk.com/authorize?client_id=3485070&redirect_uri=http://localhost/vk-auth&response_type=code

Итак, ссылка для аутентификации у нас готова. Если мы сформировали все параметры правильным образом и получили верный url, то пройдя по ссылке, будем перенаправлены по адресу, указанному в настройках приложения ('http://localhost/vk-auth'). Только теперь к этому адресу будет прикреплён специальный параметр code:
// Пример. В вашем случае код будет другой
http://localhost/vk-auth/?code=f30621b146115b3bad

Шаг 3. Получение токена
Начинать процедуру аутентификации мы можем тогда и только тогда, когда к нам пришёл параметр code. Он нам нужен для того, чтобы получить специальный токен доступа, с помощью которого, в дальнейшем, мы достанем информацию о пользователе.

В первую очередь, снова сформируем нужные нам параметры для этого запроса:
if (isset($_GET['code'])) {
    $params = array(
        'client_id' => $>clientId,
        'client_secret' => $this->clientSecret,
        'code' => $_GET['code'],
        'redirect_uri' => $this->redirectUri
    );
}

Далее нам нужно отправить GET запрос на адрес https://oauth.vk.com/access_token, передав перечисленные параметры. В PHP выполнить GET запрос по какому-то адресу можно несколькими способами. Для данного урока я воспользуюсь функцией file_get_contents.
if (isset($_GET['code'])) {
    $params = array(
        'client_id' => $client_id,
        'client_secret' => $client_secret,
        'code' => $_GET['code'],
        'redirect_uri' => $redirect_uri
    );
 
    $token = json_decode(file_get_contents('https://oauth.vk.com/access_token' . '?' . urldecode(http_build_query($params))), true);
}

В результате, при успешном выполнении запроса в переменную $token будет записан ответ от ВКонтакте в JSON формате. Данная строка содержит 3 параметра: access_token, который мы будем использовать в следующих запросах для извлечения информации о пользователе, expires_in - время жизни токена, user_id - id пользователя, который прошёл аутентификацию.
{"access_token":"2c6276b767b5e2f35f908e89d61416beea17b6d1ebcd3d14e20ac910281d306bb506ec78e75518ed614e9","expires_in":86399,"user_id":14966712}

Для того чтобы мы далее могли работать с данными параметрами, декодируем JSON строку с помощью функции json_decode и помещаем данные в массив, передав в качестве второго аргумента true.

Шаг 4. Получение информации о пользователе
Итак, теперь когда у нас есть параметры access_token и user_id, мы можем сделать запрос к ВКонтакте API и получить информацию о пользователе. Для начала снова подготовим массив с параметрами, которые в последствии превратим в фрагмент url строки.
if (isset($_GET['code'])) {
    $params = array(
        'client_id' => $client_id,
        'client_secret' => $client_secret,
        'code' => $_GET['code'],
        'redirect_uri' => $redirect_uri
    );
 
    $token = json_decode(file_get_contents('https://oauth.vk.com/access_token' . '?' . urldecode(http_build_query($params))), true);
 
    if (isset($token['access_token'])) {
        $params = array(
            'uids'         => $token['user_id'],
            'fields'       => 'uid,first_name,last_name,screen_name,sex,bdate,photo_big',
            'access_token' => $token['access_token']
        );
    }
}

В параметр uids записываем id пользователя; в fields перечисляем через запятую поля, которые хотим извлечь (uid - id пользователя, first_name - имя, last_name - фамилию, screen_name - имя отображаемое на страницах VK, sex - пол, bdate - дату рождения, photo_big - фотографию). Для доступа к большему количеству полей обратитесь к ВКонтакте API users.get. В качестве последнего параметра передаём 'access_token'.

Для получения информации о пользователе сфомированные параметры нам нужно отправить GET запросом по адресу https://api.vk.com/method/users.get.
if (isset($_GET['code'])) {
    $params = array(
        'client_id' => $client_id,
        'client_secret' => $client_secret,
        'code' => $_GET['code'],
        'redirect_uri' => $redirect_uri
    );
 
    $token = json_decode(file_get_contents('https://oauth.vk.com/access_token' . '?' . urldecode(http_build_query($params))), true);
 
    if (isset($token['access_token'])) {
        $params = array(
            'uids'         => $token['user_id'],
            'fields'       => 'uid,first_name,last_name,screen_name,sex,bdate,photo_big',
            'access_token' => $token['access_token']
        );
 
        $userInfo = json_decode(file_get_contents('https://api.vk.com/method/users.get' . '?' . urldecode(http_build_query($params))), true);
    }
}

В результате, если всё было сделано правильно, то получим JSON ответ следующего вида:
{"response":[{"uid":14966712,"first_name":"Стас","last_name":"Протасевич","screen_name":"stanislav.protasevich","sex":2,"bdate":"3.7.1988","photo_big":"http:\/\/cs307601.vk.me\/u14966712\/a_8234a279.jpg"}]}

Снова преобразуем JSON ответ в массив и обратимся к нулевому элементу, хранящемуся в массиве, доступному по ключу response:
if (isset($_GET['code'])) {
    $result = false;
    $params = array(
        'client_id' => $client_id,
        'client_secret' => $client_secret,
        'code' => $_GET['code'],
        'redirect_uri' => $redirect_uri
    );
 
    $token = json_decode(file_get_contents('https://oauth.vk.com/access_token' . '?' . urldecode(http_build_query($params))), true);
 
    if (isset($token['access_token'])) {
        $params = array(
            'uids'         => $token['user_id'],
            'fields'       => 'uid,first_name,last_name,screen_name,sex,bdate,photo_big',
            'access_token' => $token['access_token']
        );
 
        $userInfo = json_decode(file_get_contents('https://api.vk.com/method/users.get' . '?' . urldecode(http_build_query($params))), true);
        if (isset($userInfo['response'][0]['uid'])) {
            $userInfo = $userInfo['response'][0];
            $result = true;
        }
    }
}

Прошу обратить внимание, что в данном фрагменте, я добавил специальную переменную $result, равную изначально false сразу же после проверки наличия GET параметра code. Если нам удалось извлечь информацию о пользователе, то мы меняем значение этой переменной на true.

Полный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title></title>
</head>
<body>
    <?php
 
    $client_id = '3485070'; // ID приложения
    $client_secret = 'lYjfUZwZmlJJlFIqQFAj'; // Защищённый ключ
    $redirect_uri = 'http://localhost/vk-auth'; // Адрес сайта
 
    $url = 'http://oauth.vk.com/authorize';
 
    $params = array(
        'client_id'     => $client_id,
        'redirect_uri'  => $redirect_uri,
        'response_type' => 'code'
    );
 
    echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через ВКонтакте</a></p>';
 
if (isset($_GET['code'])) {
    $result = false;
    $params = array(
        'client_id' => $client_id,
        'client_secret' => $client_secret,
        'code' => $_GET['code'],
        'redirect_uri' => $redirect_uri
    );
 
    $token = json_decode(file_get_contents('https://oauth.vk.com/access_token' . '?' . urldecode(http_build_query($params))), true);
 
    if (isset($token['access_token'])) {
        $params = array(
            'uids'         => $token['user_id'],
            'fields'       => 'uid,first_name,last_name,screen_name,sex,bdate,photo_big',
            'access_token' => $token['access_token']
        );
 
        $userInfo = json_decode(file_get_contents('https://api.vk.com/method/users.get' . '?' . urldecode(http_build_query($params))), true);
        if (isset($userInfo['response'][0]['uid'])) {
            $userInfo = $userInfo['response'][0];
            $result = true;
        }
    }
 
    if ($result) {
        echo "Социальный ID пользователя: " . $userInfo['uid'] . '<br />';
        echo "Имя пользователя: " . $userInfo['first_name'] . '<br />';
        echo "Ссылка на профиль пользователя: " . $userInfo['screen_name'] . '<br />';
        echo "Пол пользователя: " . $userInfo['sex'] . '<br />';
        echo "День Рождения: " . $userInfo['bdate'] . '<br />';
        echo '<img src="' . $userInfo['photo_big'] . '" />'; echo "<br />";
    }
}
?>
</body>
</html>

Шаг 5. Извлечение информации о пользователе
Теперь извлекать информацию о пользователе мы можем из массива, хранящегося в переменной $userInfo по ключам uid, first_name, last_name, screen_name, sex, bdate, photo_big.
if ($result) {
    echo "Социальный ID пользователя: " . $userInfo['uid'] . '<br />';
    echo "Имя пользователя: " . $userInfo['first_name'] . '<br />';
    echo "Ссылка на профиль пользователя: ". 'http://vk.com/' . $userInfo['screen_name'] . '<br />';
    echo "Пол пользователя: " . $userInfo['sex'] . '<br />';
    echo "День Рождения: " . $userInfo['bdate'] . '<br />';
    echo '<img src="' . $userInfo['photo_big'] . '" />'; echo "<br />";
}

Шаг 6. Дело за вами
Теперь, когда у нас есть такая информация, как ID пользователя, в первую очередь, нам необходимо проверить его наличие в нашей базе данных. Если пользователя с таким ID не существует, то значит он авторизовался с нашего сайта впервые, и мы внесём его в базу. Если пользователь уже есть, можем проверить не изменились ли какие-то данные о нём, например, имя или ещё что-то. Если да, обновим запись.

После этого, всё что нам осталось сделать, так это создать сессию и поместить в неё информацию о нашем пользователе.
$_SESSION['user'] = $userInfo;

На странице выхода из системы просто удаляем сессию с помощью функции unset.

Итог
Вот мы и подошли к концу данного урока, и теперь в ваших руках есть решение, которого вы, возможно, долго ждали. Если вас интересует тема аутентификации через социальные сети, то пишите об этом в комментариях, и я с радостью расскажу и покажу, как работать с Одноклассниками, Google-ом, Facebook-ом и другими сервисами.

Добавлено: 02 Мая 2018 14:28:25 Добавил: Андрей Ковальчук

Создание Twitter приложения

Сначала OAuth может показаться непонятным, однако, если вы хотите создать Twitter приложение, без него вам не обойтись. В этом уроке мы займёмся разбором OAuth и созданием простого приложения.

Вступление
В этом уроке, мы создадим простое приложение, которое позволит применять различные эффекты к аватарам в Twitter. Для того, чтобы это сделать, мы будем использовать Twitter API, однако, для начала, мы должны авторизировать наше приложение через OAuth.

Принцип работы приложения:

Пользователя просят авторизироваться в Twitter;
Пользователь выбирает аватар из списка;
Далее ему показывается текущий аватар и тот, что он выбрал. Также предлагается затвитить событие смены аватара;
После того, как пользователь нажмёт на кнопку, приложение создаёт и загружает новый аватар и отображает страницу с сообщением.

Готовимся
Для того чтобы начать реализовывать приложение, нам надо подготовить структуру сайта. Создадим папку lib для хранения PHP классов, tmp для хранения временных файлов, а так же css и img для стилей и изображений.

Структура должна быть примерно такой:

css
img
lib
tmp (должны быть выставлены права на запись)

Регистрируем ваше приложение
Для того чтобы использовать OAuth вам необходим ключ и «секрет». Для получения этих данных, вам необходимо зарегистрировать ваше приложение.

Это можно сделать тут.

Заполните все необходимые поля. В нашем случае, тип приложения будет Browser, так же нам нужно указать URL для обратного вызова. Убедитесь, что вы ввели всё в правильном формате. Значение для Default Access будет Read & Write.

Если вы прошли регистрацию, то вам отобразятся данные для вашего приложения, а именно consumer key и consumer secret.

Качаем библиотеку tmhOAuth
Для того чтобы управлять OAuth запросами, мы будем использовать специальную библиотеку. В этом уроке мы будем использовать библиотеку tmhOAuth, которая позволит нам производить загрузку изображений.

Скачайте библиотеку с GitHub
Переместите файл tmhOAuth.php в папку lib
Аутентификация
Этот процесс занимает 3 шага. Для более подробного описания посетите вот эту страницу. Тут я изложу всё кратко:

Первый шаг, это идентификация приложения на Twitter (используя consumer key и token запроса, который мы сформируем позже);
Пользователь теперь перенаправляется на Twitter для того чтобы предоставлять нашему приложением доступ к своей учетной записи. После этого, пользователю отправляется обратно на URL указанный при регистрации;
После того как наше приложение было одобрено, мы можем свободно взаимодействовать с Twitter API от имени пользователя;
Теперь посмотрим код. Мы будем использовать класс TwitterApp для всех задач, связанных с аутентификацией. Создайте файл в каталоге lib: lib/TwitterApp.php

<?php
class TwitterApp {
    /**
     * Эта переменная будет хранить tmhOAuth объект, который будет использоваться в классе
     */
    public $tmhOAuth;
 
    /**
     * Данные учётной записи Twitter пользователя
     */
    public $userdata;
 
    /**
     * Стадия аутентификации
     *
     * Значения:
     *  - 0: не авторизирован
     *  - 1: в процессе
     *  - 2: авторизирован
     */
    protected $state;
 
    /**
     * Инициализируем новый объект TwitterApp
     */
    public function  __construct(tmhOAuth $tmhOAuth) {
 
        // сохраняем объект tmhOAuth
        $this->tmhOAuth = $tmhOAuth;
    }
}

В этом коде стоит обратить внимание на конструктор. $tmhOAuth будет хранить tmhOAuth объект, который будет использоваться во всём классе. $userdata –будет содержать информацию о пользователе, $state текущую стадию авторизации.

Шаг 1. Делаем запрос
Это простой пример запроса:
private function getRequestToken() {
 
    // посылаем запрос
    $this->tmhOAuth->request("POST", $this->tmhOAuth->url("oauth/request_token", ""), array(
        // указываем переменную для обратного вызова
        'oauth_callback'    => $this->tmhOAuth->php_self()
    ));
 
    if($this->tmhOAuth->response["code"] == 200) {
 
        // получаем ответ
        $response = $this->tmhOAuth->extract_params($this->tmhOAuth->response["response"]);
        $_SESSION["authtoken"] = $response["oauth_token"];
        $_SESSION["authsecret"] = $response["oauth_token_secret"];
 
        // стадия авторизации 1
        $_SESSION["authstate"] = 1;
 
        // перенаправляем пользователя на Twitter авторизацию
        $url = $this->tmhOAuth->url("oauth/authorize", "") . '?oauth_token=' . $response["oauth_token"];
        header("Location: ' . $url);
        exit;
    }
    return false;
}

Для того чтобы двигаться дальше, вам нужно понять принцип работы tmhOAuth::request(). Этот метод позволяет нам создавать HTTP запросы. Его можно использовать так:

tmhOAuth::request($method, $url[, $params[, $useauth[, $multipart]]])


string $method – метод передачи данных (GET, POST, и т.д.)
string $url – URL куда пойдёт запрос
array $params (optional) – Вид параметров – ассоциативный массив или нет
bool $useauth (optional, default true) – проверка на авторизацию?
bool $multipart (optional, default false) – true для загрузки фалов
Для параметра $url, будем использовать мето tmhOAuth::url() который закрафтит нам URL:

tmhOAuth::url($request[, $format])


string $request - метод api (без расширения)

string $format (по умолчанию ‘json”) – формат ответа (JSON, XML, и т.д.)

Теперь, когда вы познакомились с функциями, нам необходимо сделать POST запрос к методу oauth/request_token API. Он вернёт нам данные OAuth в специальном формате, так что неплохо было бы его указать при использовании tmhOAuth::url(). Так же нам необходимо указать oauth_callback. Будем использовать метод tmhOAuth::php_self() для ссылки на текущую страницу. Вот код:

// посылаем запрос
$this->tmhOAuth->request("POST", $this->tmhOAuth->url("oauth/request_token", ""), array(
    // передаём параметр
    'oauth_callback'    => $this->tmhOAuth->php_self()
));

Поскольку мы сделали запрос, ответ (массив) будет храниться в параметре tmhOAuth::response со следующими ключами:

code – ответ HTTP
response – возвращаемые данные
headers – заголовок ответа
Следующий шаг это проверка ответа (200 означает успех), а затем установка значений oauth_token и oauth_token_secret, который позже нам пригодятся. Их можно получить, используя метод tmhOAuth::extract_params(), который вернёт массив данных. Так же мы даём значение переменной сессии authstate, тем самым сообщаем, что мы готовы к следующему шагу. Вот код:

if($this->tmhOAuth->response["code"] == 200) {
 
    // получаем параметры
    $response = $this->tmhOAuth->extract_params($this->tmhOAuth->response["response"]);
    $_SESSION["authtoken"] = $response["oauth_token"];
    $_SESSION["authsecret"] = $response["oauth_token_secret"];
 
    // устанавливаем шаг авторизации 1
    $_SESSION["authstate"] = 1;
}

Теперь, когда всё готово, мы должны перенаправить пользователя со всеми полученными данными на URL oauth/authorize. Вот код:

// перенаправляем пользователя на Twitter авторизацию
$url = $this->tmhOAuth->url("oauth/authorize", "") . '?oauth_token=' . $response["oauth_token"];
header("Location: ' . $url);
exit;

Шаг 2. Получаем доступ
Вот код для получения доступа:

private function getAccessToken() {
 
    // устанавливаем запрос и «секрет
    $this->tmhOAuth->config["user_token"] = $_SESSION["authtoken"];
    $this->tmhOAuth->config["user_secret"] = $_SESSION["authsecret"];
 
    // делаем запрос
    $this->tmhOAuth->request("POST", $this->tmhOAuth->url("oauth/access_token", ""), array(
        // записываем oauth_verifier полученный от Twitter
        'oauth_verifier'    => $_GET["oauth_verifier"]
    ));
 
    if($this->tmhOAuth->response["code"] == 200) {
 
        // получаем данные доступа и записываем их в cookie
        $response = $this->tmhOAuth->extract_params($this->tmhOAuth->response["response"]);
        setcookie("access_token", $response["oauth_token"], time()+3600*24*30);
        setcookie("access_token_secret", $response["oauth_token_secret"], time()+3600*24*30);
 
        // Стадия авторизации  2
        $_SESSION["authstate"] = 2;
 
        // снова перенаправляем пользователя
        header("Location: ' . $this->tmhOAuth->php_self());
        exit;
    }
    return false;
}

Первое, что мы сделаем, это установим user_token и user_secret в tmhOAuth:: configuration.

$this->tmhOAuth->config["user_token"] = $_SESSION["authtoken"];
$this->tmhOAuth->config["user_secret"] = $_SESSION["authsecret"];

Следующий шаг это POST запрос. Передаём oauth_verifier, полученный через GET как параметр:

$this->tmhOAuth->request("POST", $this->tmhOAuth->url("oauth/access_token", ""), array(
    'oauth_verifier'    => $_GET["oauth_verifier"]
));

Twitter вернёт нам данные, которые необходимы для создания запросов в будущем. Сохраняем некоторые данные в cookie и устанавливаем состояние авторизации в 2:

if($this->tmhOAuth->response["code"] == 200) {
 
    $response = $this->tmhOAuth->extract_params($this->tmhOAuth->response["response"]);
    setcookie("access_token", $response["oauth_token"], time()+3600*24*30);
    setcookie("access_token_secret", $response["oauth_token_secret"], time()+3600*24*30);
 
    $_SESSION["authstate"] = 2;
 
    header("Location: ' . $this->tmhOAuth->php_self());
    exit;
}

Шаг 3. Проверка доступа
Все полученные данные необходимо проверить на валидность. Для этого есть специальный метод:

private function verifyAccessToken() {
    $this->tmhOAuth->config["user_token"] = $_COOKIE["access_token"];
    $this->tmhOAuth->config["user_secret"] = $_COOKIE["access_token_secret"];
 
    // делаем запрос
    $this->tmhOAuth->request("GET", $this->tmhOAuth->url("1/account/verify_credentials"));
 
    // сохраняем возвращённые данные из API
    $this->userdata = json_decode($this->tmhOAuth->response["response"]);
 
    // HTTP 200 означает, что всё хорошо
    return ($this->tmhOAuth->response["code"] == 200);
}

Теперь этот код должен быть более менее понятен. Всё, что мы делаем, так это запрос с существующими данными и если Twitter возвращает код 200, то всё прошло успешно.

Тут необходимо отметить ещё одну вещь. Twitter вернёт нам данные в формате JSON. Для того чтобы мы могли ими манипулировать, нам необходимо использовать функцию json_decode():

$this->userdata = json_decode($this->tmhOAuth->response["response"]);

Шаг 4. Собираем всё в кучу
Пришло время использовать всё то, что было перечислено выше. Нам нужен специальный метод, который позволить запустить процесс авторизации:

public function auth() {
 
    // для состояния 1 необходимо наличие GET переменной
    if($this->state == 1 && !isset($_GET["oauth_verifier"])) {
        $this->state = 0;
    }
 
    // Шаг 1: Получаем маркер запроса
    if($this->state == 0) {
        return $this->getRequestToken();
    }
    // Шаг 2: Получаем маркер доступа
    elseif($this->state == 1) {
        return $this->getAccessToken();
    }
 
    // Шаг 3: Проверяем данные
    return $this->verifyAccessToken();
}

Большая часть метода auth() понятна и так. В зависимости от состояния, она вызывает соответствующий метод авторизации. Если состояние равно 1, то должна существовать GET переменная с данными.

Теперь создадим публичный метод для проверки авторизации. isAuthed() возвращает true если состояние равно 2:

public function isAuthed() {
    return $this->state == 2;
}

Нам так же понадобится метод для удаления состояния авторизации. Метод endSession() ставит состояние в 0 и удаляет cookie:

public function endSession() {
    $this->state = 0;
    $_SESSION["authstate"] = 0;
    setcookie("access_token", "", 0);
    setcookie("access_token_secret", "", 0);
}

Инициализация
Теперь нам необходимо добавить несколько вещей для того, чтобы конструктор __construct() знал на какой стадии авторизации мы находимся. Поскольку мы используем переменные сессий, нам необходимо в начале скрипта вызвать соответствующую функцию:

// начинаем сеанс
if(!session_id()) {
    session_start();
}

Следующая часть касается состояния авторизации. Первое состояние рано 0; если у пользователя есть необходимые нам cookie, то состояние равно 2; соответственно после этого нужно установить значение для переменной сессии:

$this->state = 0;
if(isset($_COOKIE["access_token"], $_COOKIE["access_token_secret"])) {
    $this->state = 2;
}
elseif(isset($_SESSION["authstate"])) {
    $this->state = (int)$_SESSION["authstate"];
}
Если состояние равно 1, это означает, что мы находимся на одном из шагов авторизации. Так что мы можем продолжить это процесс:

if($this->state == 1) {
    $this->auth();
}

Если состояние равно 2, нам необходимо проверить наши данные для получения доступа. Если авторизация не прошла, удаляем cookies и сбиваем состояние авторизации:

elseif($this->state == 2 && !$this->auth()) {
    $this->endSession();
}
Состояние конструктора после всех преобразований:

public function  __construct(tmhOAuth $tmhOAuth) {
 
    $this->tmhOAuth = $tmhOAuth;
 
    if(!session_id()) {
        session_start();
    }
 
    $this->state = 0;
    if(isset($_COOKIE["access_token"], $_COOKIE["access_token_secret"])) {
        $this->state = 2;
    }
    elseif(isset($_SESSION["authstate"])) {
    $this->state = (int)$_SESSION["authstate"];
    }
 
    if($this->state == 1) {
        $this->auth();
    }
    elseif($this->state == 2 && !$this->auth()) {
        $this->endSession();
    }
}

Отправка Tweet сообщения

Теперь, когда всё касающиеся авторизации готово, можем добавить другую функциональность. Следующий метод будет посылать Tweet сообщение, используя Twitter API.

public function sendTweet($text) {
 
    // Вырезаем из сообщения 140 символов
    $text = substr($text, 0, 140);
 
    // Делаем запрос POST, передавая сообщения методу statuses/update
    $this->tmhOAuth->request("POST", $this->tmhOAuth->url("1/statuses/update"), array(
        'status' => $text
    ));
 
    return ($this->tmhOAuth->response["code"] == 200);
}

Тут мы обрезаем сообщение и шлём его методу statuses/update. Код должен быть уже более менее понятен.

Наше приложение
Теперь, когда наш класс авторизации готов, мы можем заняться функциональностью приложения. Если кто забыл, оно будет позволять выбирать себе аватар, к которому был применён какой-то эффект.

Этот класс будет наследовать предыдущий класс. Код будем писать в lib/TwitterAvatars.php:

<?php
class TwitterAvatars extends TwitterApp {
 
    /**
     * Пусть к папку с временными файлами
     */
    public $path;
 
    /**
     * GD фильтры для изменения изображения
     */
    protected $filters = array(
        'grayscale'     => IMG_FILTER_GRAYSCALE,
        'negative'      => IMG_FILTER_NEGATE,
        'edgedetect'    => IMG_FILTER_EDGEDETECT,
        'embossed'      => IMG_FILTER_EMBOSS,
        'blurry'        => IMG_FILTER_GAUSSIAN_BLUR,
        'sketchy'       => IMG_FILTER_MEAN_REMOVAL
    );
 
    public function  __construct(tmhOAuth $tmhOAuth, $path = 'tmp") {
 
        // вызываем конструктор родителя
        parent::__construct($tmhOAuth);
 
        // инициализируем переменную пути
        $this->path = $path;
    }
}

Как вы уже поняли, в переменной $path будет храниться путь для временных файлов, а в $filters хранятся фильтры, которые будут применяться к нашим изображениям, которые после этого будут сохраняться в папке для временных файлов. Поскольку в новом классе мы переписываем конструктор, то нам необходимо вызвать конструктор родителя для получения его функциональности ::__construct().

Теперь мы готовы для добавления методов.

Загрузка
Для то чтобы применять фильтры к изображения, нам необходимо их загружать. Метод download()поможет нам в этом деле. Он производит обычный cURL запрос.

/**
* $url – путь к загружаемым данным
 * возвращает загружаемые данные
 */
protected function download($url) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 
    $ret = curl_exec($ch);
    curl_close($ch);
 
    return $ret;
}

Нахождение Url
Теперь, когда у нас есть возможность загружать изображения, нам необходимо сформировать путь к данным, которые мы хотим загрузить. Мы заинтересованы в двух изображениях – в оригинальном аватаре и его миниатюре. Создадим метод, который получит их url.

Для получения этих 2х изображений, мы будем использовать users/profile_image/:screen_name API метод который через заголовок передаст нам путь к необходимым файлам:

/**
* Возвращает путь к картинке
 */
protected function getImageURL() {
 
    $this->tmhOAuth->request("GET", $this->tmhOAuth->url("1/users/profile_image/" . $this->userdata->screen_name), array(
        'screen_name'   => $this->userdata->screen_name,
        'size'          => 'bigger'
    ));
 
    if($this->tmhOAuth->response["code"] == 302) {
        return $this->tmhOAuth->response["headers"]["location"];
    }
    throw new Exception("Error locating image");
}

Следует отметить, что мы делаем GET запрос через tmhOAuth, передавая screen_name, параметр размеров и затем возвращаем заголовок.

В API не существует метода для извлечения пути к полному изображения, так что будем тут импровизировать. Пользовательские данные содержат поле profile_image_url, которое ссылается на что-то вроде avatar_normal.jpg, следовательно нормальное изображения может иметь имя avatar.jpg. Так что это метод достанет нам URL, переименует изображение и вернёт необходимую ссылку:

protected function getOriginalImageURL() {
 
    $url = $this->userdata->profile_image_url;
 
    // сохраним расширение
    $ext = strrchr($url, '.");
 
    // удалим суффикс и вернём расширение
    return substr($url, 0, strrpos($url, "_")) . $ext;
}

Работаем с изображением
Теперь, когда у нас есть доступ к изображениям нам необходимо получить их «внутренности» (для применения фильтров из библиотека GD):

protected function readImage($data) {
 
    // получаем данные изображения
    $src = imagecreatefromstring($data);
 
    if(!$src) {
        throw new Exception("Error reading image");
    }
 
    // получаем размеры
    $width = imagesx($src);
    $height = imagesy($src);
 
    // создаём пустое изображение такого же размера
    $img = imagecreatetruecolor($width, $height);
 
    // копируем оригинальное изображение на только что созданное
    imagecopy($img, $src, 0, 0, 0, 0, $width, $height);
 
    // убираем за собой
    imagedestroy($src);
 
    return $img;
}

Объясню поподробнее:

Конвертируем изображение в GD ресурс при помощи функции imagecreatefromstring();
Получаем размеры изображения - imagesx() и imagesy();
Создаём новое изображения с полученными размерами используя imagecreatetruecolor();
Оригинально изображение копируем в новое, используя функцию imagecopy();
Освобождаем память imagedestroy() и возвращаем данные нового изображения;
Сохраняем изображение
Теперь наступил черёд написания метода для сохранения полученных изображений. Мы будем использовать метод imagepng() для сохранения PNG изображения:

protected function saveImage($img, $name) {
    $path = $this->path . "/' . $name . '.png';
    imagepng($img, $path);
    imagedestroy($img);
    return $path;
}

Генерируем отфильтрованные изображения
Теперь нам необходимо вывести список изображений, среди которых пользователь выберет себе новый аватар. Вот код:

/**
* Возвращает ассоциативный массив изображений
 */
public function generatePreviews() {
 
    // проверяем авторизирован ли пользователь
    if(!$this->isAuthed()) {
        throw new Exception("Requires oauth authorization");
    }
    $username = $this->userdata->screen_name;
 
    // получаем его аватар
    $data = $this->download($this->getImageURL());
 
    // копируем его в папку
    $img = $this->readImage($data);
    $this->saveImage($img, $username . "_orig");
 
    $images = array();
 
    // применяем каждый фильтр к изображению
    foreach($this->filters as $filter_name => $filter) {
        $img = $this->readImage($data);
        imagefilter($img, $filter);
        $images[$filter_name] = $this->saveImage($img, $username . "_' . $filter_name);
    }
 
    return $images;
}

Первое, что мы делаем, так это проверяем, авторизирован ли пользователь. Если да, скачиваем его аватар и записываем в нашу папку. Затем применяем фильтры библиотеки GD и записываем название созданных изображений в массив.

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

public function getPreview($filter = 'orig") {
    if(!$this->isAuthed()) {
        throw new Exception("Requires oauth authorization");
    }
    $path = $this->path . "/' . $this->userdata->screen_name . "_' . $filter . '.png';
    if(file_exists($path)) {
        return $path;
    }
    return null;
}

Изменяем аватар
Теперь нам необходимо реализовать функциональность, которая позволит заменить существующий аватар пользователя на тот, который он выбрал.

protected function processImage($filter = "grayscale") {
 
    // убеждаемся, что фильтры существуют
    $filter = strtolower($filter);
    if(!array_key_exists($filter, $this->filters)) {
        throw new Exception("Unsupported image filter");
    }
 
    $username = $this->userdata->screen_name;
 
    // получаем оригинальный аватар
    $data = $this->download($this->getOriginalImageURL());
    $img = $this->readImage($data);
 
    // применяем фильтр к изображению
    imagefilter($img, $this->filters[$filter]);
 
    // сохраняем изображение и возвращаем адрес
    return $this->saveImage($img, $username . "_' . $filter . "_full");
}

Функциональность данного метода очень схожа с generatePreviews(). Проверяем наличие фильтра, качаем оригинальное изображение, применяем к нему фильтр и сохраняем.

Теперь нам необходим метод, который будет отсылать новое изображение на сайт Twitter. Функция processImage() будет загружать изображение на Twitter через API метод account/update_profile_image:

public function commitAvatar($filter) {
    if(!$this->isAuthed()) {
        throw new Exception("Requires oauth authorization");
    }
 
    // Генерируем изображение и получаем путь
    $path = $this->processImage($filter);
    if(file_exists($path)) {
 
        // посылаем POST запрос с изображением
        $this->tmhOAuth->request("POST", $this->tmhOAuth->url("1/account/update_profile_image"), array(
            'image' => '@' . $path . ';type=image/png;filename=' . basename($path)
        ), true, true);
 
        return ($this->tmhOAuth->response["code"] == 200);
    }
 
    return false;
}

Тут мы используем tmhOAuth POST запрос, который позволит нам отослать изображение на сайт. Для этого необходимо установить в true последний параметр в методе tmhOAuth::request(). Формат должен быть такой:

@[path_to_image];type=[mime_type];filename=[file_name]


К примеру, если мы хотим отправить tmp/username_grayscale_full.png, то значение будет
@tmp/username_grayscale_full.png;type=image/png;filename=username_grayscale_full.png.


Убираем за собой
Теперь нам необходимо удалить все временные файлы, которые были созданы. Код:

public function cleanupFiles() {
 
    $flag = $this->path . "/.last_check';
 
    $time = time();
 
    // проверяем создали мы изображения за последний час или нет
    if(!file_exists($flag) || $time - filemtime($flag) > 3600) {
 
        // ищем все файлы PNG
        $files = glob($this->path . "/*.png");
 
        // удаляем все старые данные (которым 12+ часов)
        foreach($files as $file) {
            if($time - filemtime($file) > 60*60*12) {
                unlink($file);
            }
        }
 
        touch($flag);
    }
}

Тут мы проходимся по всем файлам и удаляем те, которые старше 12 часов. Это код мы можем вызывать при каждом запросе на добавление нового аватара.

Лицевая часть сайта
Теперь у нас всё готово. Теперь мы будем использовать всю нашу функциональность для файла index.php. В первую очередь заинклудим наши библиотеки:

<?php
// загружаем библиотеки
include 'lib/tmhOAuth.php';
include 'lib/TwitterApp.php';
include 'lib/TwitterAvatars.php';
 
// создаём константы с ключами
define("CONSUMER_KEY",      'qSkJum23MqlG6greF8Z76A");
define("CONSUMER_SECRET",   'Bs738r5UY2R7e5mwp1ilU0voe8OtXAtifgtZe9EhXw");
?>

Отметим: CONSUMER_KEY и CONSUMER_SECRET должны быть ваши.

Поместим наш код в блок try-catch для отлавливания всевозможных ошибок.

try {
} catch(Exception $e) {
    $error = $e;
}

Внутри этого блока начинам писать основной код. Инициализируем TwitterAvatars объект:

$config = array(
    'consumer_key'      => CONSUMER_KEY,
    'consumer_secret'   => CONSUMER_SECRET
);
 
$ta = new TwitterAvatars(new tmhOAuth($config));

На этом шаге можем очистить нашу папку с временными изображениями:

$ta->cleanupFiles();

На следующем шаге мы проверяем авторизирован ли пользователь:

// проверяем статус
if($ta->isAuthed()) {
 
}
elseif(isset($_POST["auth"])) {
 
    // начинаем процесс авторизации
    $ta->auth();
}

Если пользователь авторизирован, нам необходимо узнать какой аватар он выбрал или вывести список возможных аватаров:

if($ta->isAuthed()) {
 
    // выбрал фильтр?
    if(isset($_POST["filter"])) {
 
    }
    // показываем все варианты аватаров
    else {
        $previews = $ta->generatePreviews();
    }
}

Если пользователь выбрал аватар, мы должны показать ему 2 картинки (старый аватар и новый):

if(isset($_POST["filter"])) {
    $original = $ta->getPreview();
    $newimage = $ta->getPreview($_POST["filter"]);
}

В конце концов, если пользователь решился на изменение, мы отсылаем на Twitter новый аватар:

if(isset($_POST["filter"])) {
 
    if(isset($_POST["confirm"])) {
 
        $ta->commitAvatar($_POST["filter"]);
 
        if(isset($_POST["tweet"])) {
            $ta->sendTweet("I just updated my avatar using Avatar Effects...");
        }
 
        $success = true;
    }
 
    $original = $ta->getPreview();
    $newimage = $ta->getPreview($_POST["filter"]);
}

HTML
Теперь нам необходимо создать страницу, где будет происходить всё волшебство:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Twitter Avatar Effects</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
      <h1>Twitter Avatar Effects</h1>
  <?php if(isset($previews)): ?>
      <h2>Choose your weapon...</h2>
      <form action="index.php" method="post">
      <?php foreach($previews as $filter => $path): ?>
          <input type="image" src="<?php echo $path; ?>"
                 alt="<?php echo ucfirst($filter); ?>"
                  width="73" height="73"
                 name="filter" value="<?php echo $filter; ?>">
      <?php endforeach; ?>
      </form>
      <p>Select one of the images above to change your Twitter avatar.</p>
  <?php elseif(isset($success)): ?>
      <h2>Success! Your Twitter avatar is now:</h2>
      <img src="<?php echo $newimage; ?>" alt="Your Avatar" width="73" height="73">
      <p><a href="http://twitter.com/<?php echo $ta->userdata->screen_name; ?>">Go see it</a></p>
  <?php elseif(isset($newimage)): ?>
      <h2>Are you sure?</h2>
      <img src="<?php echo $original; ?>" alt="Original" width="73" height="73">
      <span class="arrow">⇒</span>
      <img src="<?php echo $newimage; ?>" alt="<?php echo ucfirst($_POST["filter"]); ?>">
      <form action="index.php" method="post">
          <input type="hidden" name="filter" value="<?php echo $_POST["filter"]; ?>">
          <input type="submit" name="confirm" value="Confirm">
          <a href="index.php">Cancel</a>
          <p><label>Tweet about your new avatar?
                  <input type="checkbox" name="tweet" value="true"></label></p>
      </form>
  <?php elseif(isset($error)): ?>
      <p>Error. <a href="index.php">Try again?</a></p>
  <?php else: ?>
      <form action="index.php" method="post">
          <input type="image" src="img/sign-in-with-twitter-l.png"
                 alt="Connect to Twitter" name="auth" value="1">
      </form>
      <p>Connect to Twitter to use this app.</p>
  <?php endif; ?>
  </body>
</html>

Добавим немного стиля
Стили расположим в папке css/style.css
html {
    background-color: #eee;
    text-align: center;
    font-family: "Lucida Grande",Verdana, sans-serif;
    font-size: 16px;
    color: #224;
}
body {
    width: 700px;
    margin: 30px auto;
    background-color: #acf;
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
p {
    font-size: 1em;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.6em;
}
.arrow {
    font-size: 4em;
    font-weight: bold;
}

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

Этот простой пример, который мы создали можно использовать для написания ваших собственных приложений. Так что если у вас есть идея Twitter приложения – вперёд!

Спасибо за внимание!

Добавлено: 02 Мая 2018 08:30:03 Добавил: Андрей Ковальчук

Встройте в свой веб-сайт готовые карты от Google

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

Обзор урока

o Google Maps API
o Получаем координаты
o Встраиваем карту в ваш сайт
o Добавляем маркеры
o Настройка маркеров
o Добавляем информационные блоки

Google Maps API

Google Maps API позволяет встраивать карты прямо в страницы вашего сайта. Для чего вам потребуется немного JavaScript, а для создания красивого оформления — немного CSS. Только что выпущена Google Maps API версия 3 и мы именно ее возьмем за основу. Вы можете ознакомиться со всей документацией на Google Labs, и пока будете просматривать информацию обязательно получите ключ к API Карт.

Получаем координаты

Полагаю, что вы, врядли, знаете точные координаты расположения вашей фирмы, поэтому объясню вам очень простой способ для их получения, который предлагает Google. Зная точный адрес вы можете вписать его в URL-адрес следующим образом:

http://maps.google.com/maps/geo?q=1+Infinite Liip,+Cupertino,+CA+95014,+USA&output=csv&oe=utf8&sensor=false&key=your_google_maps_api_key


Это координаты Центрального управления компании Apple в Купертино

Первое число - это константа, и 200 означает, что операция прошла успешно. Второе число указывает на сколько точно указывается адрес, в данном случае 8 говорит о довольно высокой точности. Два последних значения - это широта и долгота, именно они нам и нужны.

Встраиваем карту в ваш сайт

Теперь давайте, наконец, добавим карту на сайт! Откройте любимый HTML -редактор и создайте стандартный HTML-файл с кодировкой UTF-8. Сперва создадим центр проекции (точку фотографирования) и укажем в нашем HTML-файле путь на JavaScript, находящийся на сайте Google Code. Заключите следующие строчки между тегами <head> и </head>:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

В коде после ссылки идет свойство sensor=false. Так как нам не нужны сенсоры, GPS и нет необходимости определять чье-либо местонахождение.

Под кодом, который мы только что вставили, введите следующее:

 <script type="text/javascript">
 function initialize() {
 var latlng = new google.maps.LatLng(57.0442, 9.9116);
 var settings = {
 zoom: 15,
 center: latlng,
 mapTypeControl: true,
 mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
 navigationControl: true,
 navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };

Давайте немного разберемся с кодом. Во второй строке задаем функцию initialize(). В ней мы и зададим основные настройки нашей карты. В третьей строке вводим переменную latlng. latlng означает географические широту и долготу. Переменная содержит координаты, которые будем использовать как центр нашей карты.
Затем вводится переменная settings, содержащая большой список параметров:

- zoom задает, как вы, наверное, уже догались, на сколько будет увеличена карта.
- center задает центральную точку.

Прописывая latlng, мы ссылаемся на координаты уже прописанные в этой переменной.

Следующие параметры кода несколько минимализируют разметку карты. Кнопки управления в верхнем правом углу (Карта, Спутник, Ландшафт) заменяются на ниспадающее меню, и кнопки задающие масштаб заменяются на маленькие рычажки.

mapTypeId: google.maps.MapTypeId.ROADMAP определяет тип нашей карты, это будет дорожная карта, но вы легко можете сменить тип на SATELLITE (спутниковая карта), HYBRID (карта-гибрид) или TERRAIN (ландшафтная карта).

Далее пишем следующее:

var map = new google.maps.Map(document.getElementById("map_canvas"),
settings);
В нем вводим переменную map, она определяет, что наша карта будет использовать все заданные выше настройки.

Пишем

}
</script>

и закрываем функцию, перейдем к созданию тела страницы:

<body onload="initialize()">
<div id="map_canvas" style="width:800px; height:500px"></div>
</body>

Таким образом мы заставляем наш сайт при загрузке активизировать функцию initialize() и задаем в теге <div> размер для нашей карты.

Добавляем маркеры

Пора добавить некоторую разметку. Давайте начнем с создания стандартного маркера:

Прямо под:

var map = new google.maps.Map(document.getElementById("map_canvas"), 
settings);

вводим следующее:

var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
title:"Some title"
});

Итак, разберемся с кодом.

Сначала мы задали переменную companyPos, с помощью которой устанавливают расположение маркера. Далее, мы создали сам маркер посредством переменной companyMarker. Вы можете конечно вписать еще ряд параметров, а с теми, которые мы уже указали, я думаю все ясно.

Настройка маркеров

Хотя того, что мы уже сделали, вполне достаточно и ваш клиент легко вас найдет, мы можем нашу карту слегка приукрасить. Создайте в Photoshop изображение размером 100×50 пикселей подобное этому:

Далее создадим у нашего изображения тень

Теперь заменяем стандартный маркер этими изображениями, соответственно изменяем и код:

var companyLogo = new google.maps.MarkerImage('images/logo.png',
new google.maps.Size(100,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png',
new google.maps.Size(130,50),
new google.maps.Point(0,0),
new google.maps.Point(65, 50)
);
var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyLogo,
shadow: companyShadow,
title:"Company Title",
});

Данный код тоже довольно простой. Переменная companyLogo указывает на название нашего логотипа, задает его размер, путь к нему и координаты расположения кончика логотипа (то есть то место, в котором наш логотип касается карты). Затем те же самые параметры настраиваем и для изображения тени с помощью переменной companyShadow. И наконец посредством переменной companyMarker мы выводим изображение и его тень на карту.

Чтобы добавить еще маркеры, воспользуйтесь тем же способом, только не забудьте сменить названия переменных.

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

Параметр z-index позволяет вам выбрать какой маркер будет поверх всех

var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"Høgenhaug",
zIndex: 4
});

Добавляем информационные блоки

Вы можете ввести описание компании с помощью информационного блока, появляющегося при нажатии на логотип. Благодаря Google Maps API это сделать проще простого.

Щелчок на логотип вашей компании будет активизировать информационный блок.

Вставьте данный код сразу под переменной map:

var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
'<div id="bodyContent">'+
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat.</p>'+
'</div>'+
'</div>';

var infowindow = new google.maps.InfoWindow({
content: contentString
});

И этот код тоже необыкновенно прост. Вот здесь есть простор для ваших идей, так как в информационном блоке можно расположить не только название и пару тройку параграфов, но и изображения. А чтобы описание появлялось по щелчку на логотип, впишите этот код сразу после закрывающей }функции initialize():

google.maps.event.addListener(companyMarker, 'click', function() {
infowindow.open(map,companyMarker);
});

Приукрасьте немного ваш блок, добавив стилей в ваш stylesheet-файл:

body {
font-family: Helvetica, Arial, sans-serif;
font-size:10pt;
}

Вот и все! Теперь вы сможете встроить Google карту в любой проект.

Добавлено: 16 Апреля 2018 20:59:26 Добавил: Андрей Ковальчук

Facebook: как посчитать количество лайков

API

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

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

Раньше значение счетчика можно было получить с помощью следующего запроса:

$.getJSON('http://graph.facebook.com/' + encodeURI(page_url)
        + '&callback=?', function(response) {
    if (response.shares !== undefined) {
        fb_counter = response.shares;
    }
    $('#facebook_count').html(response.shares);
});

Самое интересное, что этот код работает и, например, для главной страницы Google возвращает такой ответ:
{
    "id": "http://google.com",
    "shares": 5290503
}

И тут возникает вопрос: «А что именно показывает значение shares? Входит ли в него количество лайков, отправленных через новый виджет?»

Получить более подробную информацию можно с помощью FQL (Facebook Query Language). Этот язык запросов очень похож на SQL и позволяет указывать, какую именно информацию мы хотим получить. Кроме того, на официальном сайте есть достаточно подробная документация. Также для тестирования запросов есть очень удобный инструмент – Graph API Explorer.

Для нашего случая запрос будет выглядеть так:
select share_count, like_count, comment_count, total_count from link_stat where url="http://google.com"

Как видите, действительно очень похоже на SQL. link_stat – название таблицы, share_count, comment_count, like_count, total_count – названия полей. Полный список полей можно посмотреть здесь.

Результат выполнения этого запроса будет следующий:
{
  "data": [
    {
      "share_count": 3152140, 
      "comment_count": 1132001, 
      "like_count": 1006562, 
      "total_count": 5290703
    }
  ]
}

Как видите, значение shares из предыдущего примера совпадает с total_count в который входит сумма share_count, comment_count и like_count.

Т.е. получается, что старый вариант кода выводит число, в которое входит количество комментариев, оставленных для данной страницы. Это, конечно, не большая проблема, особенно если учесть, что значение счетчика увеличивается :) , но всё-таки хочется получить корректные цифры.

Поэтому код из моего предыдущего примера можно переписать следующим образом:
$.getJSON('https://graph.facebook.com/fql?q=select like_count, share_count from link_stat where url="' + encodeURI(page_url) + '"'
        + '&callback=?', function(response) {
    var count = 0;
    if (response.data !== undefined) {
        if (response.data[0].like_count !== undefined) {
            count += response.data[0].like_count;
        }
        if (response.data[0].share_count !== undefined) {
            count += response.data[0].share_count;
        }
    }
    fb_counter.html(count);
});

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

Также здесь предполагается, что переменная page_url содержит адрес страницы (включая http://) для которой нужно получить значение счетчика, а fb_counter – элемент страницы в котором нужно показать полученное значение.

Как видите, использовать FQL несложно. И «вытянуть» можно довольно много интересной информации. Например, можно в конце статьи вывести счетчик комментариев facebook или ещё что-нибудь придумать ;)

Добавлено: 14 Апреля 2018 06:20:33 Добавил: Андрей Ковальчук

Добавляем комментарии Google+ на сайт

Не так давно, 18 апреля компания Google сообщила о готовности системы комментирования Google+, которую Вы можете использовать на своем сайте, так же как и систему комментирования от Facebook. Преимуществом системы от Google является то, что если кто-то «расшаривает» вашу статью, все комментарии к этому сообщению будут видны в одном «дереве» на сайте.

Таким образом можно поддерживать большое количество бесед. Но есть одно НО, виджет комментариев Google+ на данный момент доступен только для блогов на платформе Blogger. Однако нашлись умельцы, которые предложили неофициальный способ вставлять Google+ комментарии на любой веб-сайт или блог WordPress.

Добавляем на сайт

Сначала необходимо подключиться к Google API.

<script src="https://apis.google.com/js/plusone.js"></script>


Вариант 1: Простой

Далее вставляем в нужное место на странице следующий HTML5 код:

<div class="g-comments"
   data-href="[URL]"
   data-width="624"
   data-first_party_property="BLOGGER"
   data-view_type="FILTERED_POSTMOD">
</div>Чтобы показать количество комментариев к статье:
<div class="g-commentcount" data-href="[URL]"></div>


Вместо URL должна находиться ссылка на страницу.



Вариант 2: Динамическая загрузка комментариев

Еще один вариант, размещения комментариев на сайте. В таком исполнении происходит динамическая загрузка комментариев.

<div id="comments"></div>

<script>
gapi.comments.render('comments', {
    href: window.location,
    width: '624',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
</script>Аналогично с счетчиком комментариев:
<div id="commentscounter"></div>

<script>
gapi.commentcount.render('commentscounter', {
    href: window.location
});
</script>


Добавляем на блог WordPress

Здесь все еще проще, скачиваем плагин Google+ Comments for WordPress, устанавливаем, настраиваем и радуемся



Заблудиться в настройках этого плагина вряд ли получится. В первой опции Tab Order указываем, какие вкладки с комментариями должны присутствовать на странице (например gplus,wordpress). Если используем Disqus, то в соответствующее поле вставляем его шорткод. Остается лишь указать отображаемые названия вкладок, и все.



Чтобы оставаться в курсе свежих статей и уроков следите за XoZblog в Facebook или добавляйте в круги на Google+. Не забывайте оставлять комментарии к статьям и урокам. Спасибо!

Источник: http://xozblog.ru

Добавлено: 07 Апреля 2015 23:14:49 Добавил: Андрей Ковальчук