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

Pop-up авторизации вконтакте для протокола oauth 2.0

На данный момент существует 2 возможности авторизации в социальной сети «В Контакте»:

Первый устаревший, а второй — модный, прогрессивный и стандартизированный.

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

На странице “Авторизация сайтов” сказано: «Для начала процесса авторизации необходимо создать окно браузера и открыть в нём диалог авторизации». Но ни слова не сказано о том, как создать такое окно.

У Facebook есть свой метод JavaScript FB.login для этой цели. У OpenAPI «В Контакте» есть VK.Auth.login. А для OAuth 2 «В Контакте» нет ничего.

«Ну что же, challenge accepted», — сказал я себе. И решил написать свой метод.

Вот что у меня получилось:

function vk_popup(options)<br>{<br>  var<br>    screenX = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft,<br>    screenY = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop,<br>    outerWidth = typeof window.outerWidth != 'undefined' ? window.outerWidth : document.body.clientWidth,<br>    outerHeight = typeof window.outerHeight != 'undefined' ? window.outerHeight : (document.body.clientHeight - 22),<br>    width = options.width,<br>    height = options.height,<br>    left = parseInt(screenX ((outerWidth - width) / 2), 10),<br>    top = parseInt(screenY ((outerHeight - height) / 2.5), 10),<br>    features = (<br>      'width=' width <br>        ',height=' height <br>        ',left=' left <br>        ',top=' top<br>      );<br>  return window.open(options.url, 'vk_oauth', features);<br>}<br><br>function doLogin() {<br>  var win;<br>  var redirect_uri = 'http://MY_APP/vk_auth/';<br>  var uri_regex = new RegExp(redirect_uri);<br>  var url = 'http://oauth.vkontakte.ru/authorize?client_id=CLIENT_ID&display=popup&redirect_uri=' redirect_uri;<br>  win = vk_popup({<br>    width:620,<br>    height:370,<br>    url:url<br>  });<br><br>  var watch_timer = setInterval(function () {<br>    try {<br>      if (uri_regex.test(win.location)) {<br>        clearInterval(watch_timer);<br><br>        setTimeout(function () {<br>          win.close();<br>          document.location.reload();<br>        }, 500);<br>      }<br>    } catch (e) {<br><br>    }<br>  }, 100);<br>}<br><br>* This source code was highlighted with Source Code Highlighter.

Сначала создаю окно с диалогом авторизации, которое выглядит в точности, как аналогичное для OpenAPI.

image

Затем таймером отслеживаю изменение текущего URL в этом окошке, чтобы определить, когда «В Контакте» перенаправит на мой URL авторизации. И жду 500 мс, чтобы сервер уж точно успел обработать запрос. После этого перезагружаю основное окно своего сайта.

Обёртывать обращение к win.location в try {} catch(e) {} необходимо, потому что политика кросс-доменности не позволяет узнавать URL’ы окон других сайтов.

Хотелось также сделать это через какой-нибудь Observer, который бы наблюдал за изменением win.location и оповещал о событии, но подходящих примеров я не нашёл и JavaScript не моя основная специализация, поэтому остановился на реализации таймером. Буду благодарен, если кто-нибудь подскажет, как перевести на события.

Надеюсь, эта заметка будет полезной людям.

Авторизация вконтакте

Первым делом давайте создадим страницу с ссылкой Авторизация, кликнув по которой пользователь будет перенаправлен на страницу авторизации ВКонтакте. Для этого создадим файл index.php:

Данная страница выглядит следующим образом:

Как Вы видите путь в ссылке Авторизация ведет на вспомогательный файл auth.php, который будет обрабатывать данные нашего скрипта. Теперь давайте создадим файл конфигурации config.php и добавим несколько констант:

Авторизация на сайте с помощью вк, простой и понятный способ на php! »

Статьи / PHP

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

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

Я заинтересовался как сделать авторизацию, почитав официальную документацию понял, что ничего не понял. и так давайте приступим. 

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

1. Переходим на сайт https://vk.com/apps?act=manage и создаем новое приложение:
Авторизация через социальные сети: ВКонтакте
2. Заполняем следующие данные:
Название: Любое, его видно только во время авторизации, например авторизовавшись на нашем сайте с помощью ВК, Вы видите это, без количества участников.
Авторизация через социальные сети: ВКонтактеПлатформа: Выбираем «Сайт»
Адрес сайта: Ссылка на ваш сайт
Базовый домен: Ссылка на ваш сайт

Похожее:  Простая аутентификация на PHP / Хабр

Авторизация через социальные сети: ВКонтакте
Отлично, нажимаем подключить сайт.

3. Переходим в настройки приложения, копируем ID приложения и Защищенный ключ, сохраняем куда-нибудь и на этом работа на стороне ВК окончена, переходим к написанию скрипта.
Авторизация через социальные сети: ВКонтакте
4. Теперь самое интересное, нам нужно написать скрипт (обработчик), давайте создадим на нашем сервере в корне сайта файл auth.php и приступим к его редактированию. Хочу отметить, что на локальном сервере (OpenServer) авторизация работать не будет!
Авторизация через социальные сети: ВКонтакте
Открываем файл, я использую для этого PHPStorm и давайте создадим несколько переменных с пояснениями:

$client_id = 7157110; // ID приложения
$client_secret = 'ESlBJHmVMbeh8IVLiBDv'; // Защищённый ключ
$redirect_uri = 'http://royera.ru/auth.php'; // Адрес сайта

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

Тут все понятно, подставляем параметры из нашего приложения, ссылку указывать полностью, где лежит сам скрипт.

Далее формируем ссылку, которая будет ввести на сайт ВК с передаваемыми параметрами:

    $url = 'http://oauth.vk.com/authorize'; // Ссылка для авторизации на стороне ВК

    $params = [ 'client_id' => $client_id, 'redirect_uri'  => $redirect_uri, 'response_type' => 'code']; // Массив данных, который нужно передать для ВК содержит ИД приложения код, ссылку для редиректа и запрос code для дальнейшей авторизации токеном

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

echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через ВКонтакте</a></p>';

 Теперь можно открыть сайт скопировав $redirect_uri

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

if (isset($_GET['code'])) {
    $result = true;
    $params = [
        '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 = [
            'uids' => $token['user_id'],
            'fields' => 'uid,first_name,last_name,screen_name,sex,bdate,photo_big',
            'access_token' => $token['access_token'],
            'v' => '5.101'];

        $userInfo = json_decode(file_get_contents('https://api.vk.com/method/users.get' . '?' . urldecode(http_build_query($params))), true);
        if (isset($userInfo['response'][0]['id'])) {
            $userInfo = $userInfo['response'][0];
            $result = true;
        }
    }

    if ($result) {
        echo "ID пользователя: " . $userInfo['id'] . '<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 />";

    }
}

Авторизация через социальные сети: ВКонтакте
После того как пользователь перешел по ссылке и подтвердил передачу данных, Вам на сервер в GET запросе вернется code, используя его мы запрашиваем у ВК токен пользователя, отправляем запрос в ВК с параметрами указанные в массиве 

    $params = [
        'client_id' => $client_id,
        'client_secret' => $client_secret,
        'code' => $_GET['code'],
        'redirect_uri' => $redirect_uri
    ];

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

Теперь следующим запросом мы получаем данные о пользователе, используя его токен и обращаясь к API VK https://api.vk.com/method/users.get мы получаем json от VK, который мы можем распарсить. Давайте попробуем авторизоваться, заходим на нашу страницу и нажимаем авторизация:

Авторизация через социальные сети: ВКонтакте
Разрешаем и у нас на сайте появляются данные об аккаунте:

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

Авторизация работает. Далее можете сохранить ID в сессию и проверять авторизован пользователь или нет. Давайте доработаем код:

В самый конец добавляем:

$_SESSION['id'] = $userInfo['id'];

А ссылку заменяем на:

    if(empty($_SESSION['id'])) {

        echo "Вы уже авторизованы";
        

    } else {


    echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через ВКонтакте</a></p>';
    }

Весь код:

<?php

$client_id = 7157110; // ID приложения
$client_secret = 'ESlBJHmVMbeh8IVLiBDv'; // Защищённый ключ
$redirect_uri = 'http://royera.ru/auth.php'; // Адрес сайта

$url = 'http://oauth.vk.com/authorize'; // Ссылка для авторизации на стороне ВК

$params = [ 'client_id' => $client_id, 'redirect_uri'  => $redirect_uri, 'response_type' => 'code']; // Массив данных, который нужно передать для ВК содержит ИД приложения код, ссылку для редиректа и запрос code для дальнейшей авторизации токеном

if(empty($_SESSION['id'])) {

    echo "Вы уже авторизованы";

} else {

    echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через ВКонтакте</a></p>';
}

if (isset($_GET['code'])) {
    $result = true;
    $params = [
        '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 = [
            'uids' => $token['user_id'],
            'fields' => 'uid,first_name,last_name,screen_name,sex,bdate,photo_big',
            'access_token' => $token['access_token'],
            'v' => '5.101'];

        $userInfo = json_decode(file_get_contents('https://api.vk.com/method/users.get' . '?' . urldecode(http_build_query($params))), true);
        if (isset($userInfo['response'][0]['id'])) {
            $userInfo = $userInfo['response'][0];
            $result = true;
        }
    }

    if ($result) {
        echo "ID пользователя: " . $userInfo['id'] . '<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 />";

    }
}

$_SESSION['id'] = $userInfo['id'];

Авторизация через социальные сети: ВКонтакте
Авторизация через ВК готова! Скачать исходник можно ниже

Похожее:  Вк сменили алгоритм входа. Что теперь будет с авторегами и покупными аккаунтами? - ВКонтакте💡

auth.rar

Остались вопросы? Задавай в комментарии, всегда рады помочь!

Авторизация с использованием официального приложения

Приложение состыковывается с официальным приложением для Android или iOS, которое дает ему интерфейс для взаимодействия с API.

Собственно, без комментариев, способ совсем для других платформ и задач.

Клиентская авторизация

С клиентской авторизацией действительно нет ничего сложного.


Согласно

, достаточно асинхронно загрузить

и, «повесить»

VK.init({appid: YOUR_APP_ID})

на событие

window.vkAsyncInit

, после чего уже можно вызвать функцию

VK.Auth.login(authInfo, YOUR_APP_PERMISSIONS)

, которая и выполнит авторизацию пользователя.

Авторизация и запрос через Open API

var vk = {
 data: {},
 api: "//vk.com/js/api/openapi.js",
 appID: YOUR_APP_ID,
 appPermissions: YOUR_APP_PERMISSIONS,
 init: function(){
  $.js(vk.api);
  window.vkAsyncInit = function(){
   VK.init({apiId: vk.appID});
   load();
  }

  function load(){
   VK.Auth.login(authInfo, vk.appPermissions);

   function authInfo(response){
    if(response.session){ // Авторизация успешна
     vk.data.user = response.session.user;
     vk.getFriends();
    }else alert("Авторизоваться не удалось!");
   }
  }
 },
 getFriends: function(){
  VK.Api.call('friends.get', {fields: ['uid', 'first_name', 'last_name'], order: 'name'}, function(r){
   if(r.response){
    r = r.response;
    var ol = $('#clientApi').add('ol');
    for(var i = 0; i < r.length;   i){
     var li = ol.add('li').html(r[i].first_name ' ' r[i].last_name ' (' r[i].uid ')')
    }
   }else alert("Не удалось получить список ваших друзей");
  })
 }
}

$.ready(vk.init);

Во-первых, сразу оговорюсь, что используемые здесь функции

$

— это не

jQuery

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

jQuery

.

Итак,
$.ready(function) — Это обработчик для DOMContentLoaded;
$.js(text) — асинхронно загружает javascript файл;
$(element) — возвращает обёртку над DOM узлом element;
$(element).add(node) — создаёт новый дочерний для element узел node и возвращает обёртку над ним;
$(element).html(string) — обёртка для element.innerHTML = string.


По-сути, этот код делает следующее:

По готовности документа загружается API ВКонтакте, и, после его инициализации, вызывается метод

VK.Auth.login()

, который показывает всплывающее окно,

которое успешно «блочится» любой баннерорезкой

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


Функция

authInfo

вызывается после согласия или несогласия пользователя, и, в случае успешной авторизации, запрашивает список друзей.

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

Получение access_code

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

Кстати если во время авторизации возникли ошибки, то вместо параметра code, придет параметр error – код ошибки, вместе с ее описанием — error_description. Поэтому если мы действительно получили code, значит, запишем его в свойство класса и вызовем метод get_token(), который получит access_token. Теперь в класс Auth_Vk добавим код метода get_token():

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

client_id – идентификатор приложения;

client_secret – секретный код;

code – полученный code;

redirect_uri – здесь нужно указать тот же адрес, что и для получения code.

Запрос отправлять будем используя библиотеку CURL. При этом ответ от сервера ВКонтакте придет в формате строки JSON. Значит, используя функцию json_decode(), декодируем данную строку в объект. Объект мы получим следующего вида:

Похожее:  Как работает OAuth 2.0 и OpenID Connect

В случае ошибки мы получим следующее:

То есть мы получим объект у которого будет либо свойство access_token, либо свойство error. Поэтому, если мы получаем access_token – запишем его значение и идентификатор пользователя в соответствующие свойства класса и вернем TRUE, если же придет ошибка — запишем ее в сессию и вернем FALSE.

Получение данных пользователя

После того, как мы получили ключ доступа access_token – можно получить данные пользователя. Для этого в файл auth.php добавим следующий код (после вызова метода get_token()):

Создание приложения в контакте

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

Шаг 0. изучение документации

Итак, задача поставлена, теперь необходимо изучить платформу VK API. Ознакомившись с методами было замечено, что многие из них требуют получения

access_token

, или, проще говоря, авторизации пользователя.

Способов авторизации было предложено три:

  1. OAuth-авторизация
  2. Прямая авторизация
  3. Авторизация с использованием официального приложения (предоставляется в SDK)

Теперь подробнее о методах в порядке возрастания их полезности:

Шаг 1. обходные пути

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


Однако, в один прекрасный день, во время чтения ленты новостей в официальном приложении VK на планшете под управлением Windows 8, в голову пришла мысль: а почему бы не взять

access_token

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

app_idapp_secret

Шаг 2. собственно каркас

Желаемый каркас всё-таки был написан. В качестве языка программирования был выбран Python.

Состоит он из ядра и подключаемых плагинов. Ядро осуществляет авторизацию, работу с sqlite базой данных, импорт плагинов, опрос longpoll-сервера.


Плагины гибко взаимодействуют с ядром. О структуре плагина:

Чтобы ядро восприняло файл как плагин, в нем должна быть объявлена переменная:

__vkbuddyplugin__ = True

Для того, чтобы добавить параметры в конфиг-файл, плагину необходимо объявить переменную

config_parameters

config_parameters = [
    {'name': 'parameter_name', # имя параметра
     'required': False, # bool, является ли параметр обязательным
     'description': 'parameter_description', # описание параметра
     'default': 'parameter_value', # значение параметра по умолчанию
     'typ': str}, # тип параметра
    ...
]

Чтобы создать таблицы в БД (если они еще не существуют), необходимо объявить переменную

sql_tables

sql_tables = [
    {'name': 'table_name', # имя таблицы
     'structure':( # структура таблицы: пары (имя столбца, тип столбца)
        ('id', int), 
        ('column_name', float)
     )},
    ...
]


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

Стандартные хендлеры:

  • before_auth_handlers — функции вызываются перед авторизацией, с единственным параметром — основным объектом, в котором можно получить доступ к VK API, хоть это и бесполезно перед авторизацией
  • after_auth_handlers — функции вызываются после авторизации, с тем же единственным параметром
  • exit_handlers — функции вызываются перед выходом, так же с единственным параметром
  • longpoll_handlers — функции вызываются при получении сообщения от longpoll-сервера, параметров здесь много, что они значат можно посмотреть в документации по VK API: (vkbuddy, code, msgid, flags, from_id, ts, subj, text, attachments)

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

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 4,00 из 5)
Загрузка...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector