Для начала в шапке надо подключить openapi.js вот так:
Далее необходимо инициализировать приложение со своим идентификатором в body :
VK.init(< apiId: 666 >);
Далее авторизовываемся. Если успешно авторизовался, то данные пользователя уже придут в ответе
VK.Auth.login(function(response) < if (response.session) < showAuthData(response.session); if (response.settings) < console.log(response.settings); // Выбранные настройки доступа пользователя если они были запрошены >> else < // Пользователь нажал кнопку Отмена в окне авторизации >>); function showAuthData(data) < $(‘body’).append(‘
expire: ‘ + data.expire +’
‘); $(‘body’).append(‘
mid: ‘ + data.mid +’
‘); $(‘body’).append(‘
fio: ‘ + data.user.first_name + ‘ ‘ + data.user.last_name +’
‘); $(‘body’).append(‘
userDomain: ‘ + data.user.domain +’
‘); $(‘body’).append(‘
————————————————
‘); >
Если хочется отдельно обратиться к любому методу API после авторизации, то надо писать так:
OpenAPI и Swagger Editor — своё описание REST API с нуля
VK.Api.call(METHOD, PARAMS, CALLBACK);
- METHOD (string) — название метода API ;
- PARAMS (object) — параметры метода;
- CALLBACK (function) — функция обратного вызова.
VK.Api.call(‘users.get’, , function(r) < if(r.response) < alert(‘Привет, ‘ + r.response[0].first_name); >>);
Это вызовет метод users.get — и достанет данные пользователя с идентификатором 1
Источник: ru.stackoverflow.com
Open API ВКонтакте
Open API — система для разработчиков сторонних сайтов, которая предоставляет возможность легко авторизовывать пользователей ВКонтакте на Вашем сайте. Кроме этого, с согласия пользователей, вы сможете получить доступ к их друзьям, фотографиям, аудиозаписям, видеороликам, объявлениям и прочей информации ВКонтакте для более глубокой интеграции с Вашим проектом.
В рамках подключения к Open API создается специальное приложение, которое позволяет использовать на Вашем сайте все текущие методы ВКонтакте API. Помимо этого, Open API предоставляет возможность упростить процесс регистрации новых пользователей на Вашем сайте, если у них уже есть учетная запись ВКонтакте.
В этом уроке вы узнаете, как вывести на своём сайте информацию об авторизованном пользователе социальной сети ВКонтакте.
Этот пример показывает, как начать работать с Open API.
Для того чтобы использовать авторизацию на своём сайте, вам придется доработать этот пример. Для этого вам понадобятся знания JavaScript и, скорее всего, ещё и PHP.
Подключение сайта к платформе Open API
OpenAPI и Swagger для создания кода и документации API. Live coding VK Mini Apps
1. Создаем новое или берем уже созданное приложение.
2. Изменяем настройки приложения
Редактирование -> Open API
Адрес сайта — вводим адрес сайта, к которому будете подключать Open API (например, http://flapps.ru/)
Базовый домен – базовый домен Вашего сайта (например, flapps.ru)
3. Создаём файл xd_receiver.html с таким содержимым
Open API XD Receiver
4. Создаём файл openapi_lib.js
var vk_members_data = <>, lastCommentsResponse, lastCommentsPage = null, baseURL = window.location.protocol + ‘//’ + window.location.hostname + ‘/’; // функция для вывода полученной информацииfunction ge() < var ea; for (var i = 0; i < arguments.length; i++) < var e = arguments[i]; if (typeof e == ‘string’) e = document.getElementById(e); if (arguments.length == 1) return e; if (!ea) ea = new Array(); ea.push(e); >return ea;> function array_unique(ar)< if (ar.length typeof ar !== ‘string’) < var sorter = <>; var out = []; for (var i=0, j=ar.length; i > > return out || ar;> // функция авторизацииfunction doLogin() < VK.Auth.login( null, VK.access.FRIENDS | VK.access.WIKI // запрашиваем доступ к друзьям и вики );>// функция выходаfunction doLogout() < VK.Auth.logout(logoutOpenAPI);>function logoutOpenAPI()
5. Создаём файл openapi_code.js
window.onload = function() < // когда вся страница загрузиться // инициализируем «приложение» window.vkAsyncInit = function() < VK.init(< apiId: 1728947, // заменяем на id своего приложения nameTransportPath: ‘/vkopenapi/xd_receiver.html’ // заменяем на ссылку к файлу xd_receiver.html на вашем сервере >); >; (function() < var el = document.createElement(‘script’); el.type = ‘text/javascript’; el.src = ‘http://vkontakte.ru/js/api/openapi.js’; el.charset=»windows-1251″; el.async = true; document.getElementById(‘vk_api_transport’).appendChild(el); >()); > // получаем данные о пользователе. id пользователя считываем из переменной 1280function getInitData() < var code; code = ‘return ), fields: «photo»>)[0]’; code += ‘>;’; VK.Api.call(‘execute’, , onGetInitData);>// данные полученыfunction onGetInitData(data) < var r; if (data.response) < r = data.response; if (r.me) < ge(‘openapi_user’).innerHTML = r.me.first_name + ‘ ‘ + r.me.last_name; ge(‘openapi_userlink’).href = ‘/id’ + r.me.uid; ge(‘openapi_userphoto’).src = r.me.photo; >>> // авторизуемсяfunction loginOpenAPI()< doLogin(); // и вызываем функцию getInitData() getInitData(); return false;>
6. Создаём файл openapi.html
Open API flapps.ru Войти Привет, Пользователь! ВыйтиФорум Вконтакте API
Заменяем ссылки к файлам на свои
7. Загружаем файлы на сервер.
Загрузить можно в любой каталог. Не забудьте прописать правильные пути к файлам.
В файле openapi.html — пути к openapi_code.js и openapi_lib.js
И в файле openapi_code.js — к файлу xd_receiver.html
8. Всё готово.
Заходите на свой сайт. Открывайте файл openapi.html
Источник: flapps.ru
Интеграция с ВКонтакте на базе Open API
Социальная сеть ВКонтакте предоставляет широкие возможности для интеграции со сторонними сайтами. В основном эти возможности представлены уже готовыми виджетами. Однако, есть еще и Open API, которое позволяет не только авторизовать пользователя, но и выполнить любой метод, доступный приложениям ВКонтакте (ВКонтакте API).
Попробуем создать небольшое приложение-игру, используя возможности Open API. Тренироваться будем на игре «Память», суть которой заключается в том, что надо очистить игровое поле, открывая по 2 одинаковых картинки. В качестве картинок будем использовать фотографии друзей игрока.
Приступаем к работе
Прежде всего необходимо создать новое приложение, указав его название и тип.
После этого переходим к настройкам приложения и указываем адрес сайта и базовый домен.
Реализация
Создадим HTML страницу, которая будет содержать несколько блоков:
VK Memory VK Memory Для начала игры необходимо авторизироваться Вы можете начать новую игру, посмотреть таблицу рекордов или выйти.
- div#login-bar — содержит ссылку для авторизации пользователя
- div#logout-bar — содержит ссылки для начала новой игры, просмотра статистики и выхода
- div#game-container — контейнер для игрового поля
Основная функциональность нашего приложения будет располагаться в файле general.js, поэтому перейдем к его рассмотрению.
Инициализация Open API
Важной частью скрипта является инициализация API, которая заключается в вызове метода VK.init, в который передается объект, содержащий минимум одно поле — apiId — ID приложения (он отображается на странице настроек приложения):
VK.init(< apiId: 2151186 >);
Авторизация
Для авторизации пользователя добавим обработчик для ссылки a#vk-login, который будет вызывать метод VK.Auth.login. Первым параметром передается callback-функция, а вторым — необходимые пользовательские настройки приложения, которые являются перечнем необходимых уровней доступа. В нашем случае необходим доступ только к списку друзей, поэтому обработчик для ссылки будет выглядеть так:
$(‘a#vk-login’).click(function(event)< event.preventDefault(); VK.Auth.login(null, VK.access.FRIENDS); >);
Завершение сеанса
Для того, чтобы пользователь мог завершить сессию, добавим обработчик для ссылки a#vk-logout, который будет вызывать метод VK.Auth.logout. Первым параметром передается callback-функция, которая в нашем случае будет обновлять страницу:
$(‘a#vk-logout’).click(function(event)< event.preventDefault(); VK.Auth.logout(function()< refreshPage(false); >); >);
Отслеживание событий
Для того, чтобы перейти к игре (в нашем случае это заключается в обновлении страницы) после того как пользователь прошел авторизацию, необходимо подписаться на событие auth.login. Также подпишемся на событие auth.sessionChange, оно будет генерироваться, когда изменяются данные, связанные с авторизацией пользователя. Это необходимо для того, чтобы перейти к игре в том случае, если пользователь уже авторизирован ранее и только подтверждает доступ к списку друзей. Для добавления обработчика события необходимо вызвать метод VK.Observer.subscribe, который принимает два параметра — событие, на которое необходимо подписаться, и callback-функцию — обработчик события:
VK.Observer.subscribe(‘auth.login’, function(response)< refreshPage(true); >); VK.Observer.subscribe(‘auth.sessionChange’, function(response)< refreshPage(true); >);
Метод refreshPage обновляет страницу, если пользователь не был ранее успешно авторизован:
function refreshPage(checkLogged) < if((checkLogged !isLogged) || !checkLogged) < location.href = ‘index.html’; >>
Сбор начальных данных
Для проверки текущего статуса пользователя существует метод VK.Auth.getLoginStatus. Задействуем его, чтобы определить, авторизирован ли пользователь, и скрыть/показать необходимые из описанных выше блоков. Также, если пользователь уже авторизирован, сразу перейдем к началу игру. В метод VK.Auth.getLoginStatus передается один параметр — callback-функция, в которую, в свою очередь, передается объект, содержащий сессионные данные пользователя:
VK.Auth.getLoginStatus(function(response) < if(response.session) < // пользователь авторизирован >else < // пользователь не авторизирован >>);
Для вызова любого метода ВКонтакте API служит метод VK.Api.call, который принимает три параметра — название метода, объект, представляющий собой параметры, передаваемые в указанный метод, и callback-функцию, в которую будет передан результат вызова метода. Для получения списка друзей необходимо вызвать метод friends.get. Метод не имеет обязательных параметров и в случае вызова без параметров вернет список всех друзей. Поскольку нам нужны фотографии друзей пользователя, передадим в метод параметр fields со значением ‘photo_rec’, что соответствует квадратной фотографии со стороной 50 пикселей:
VK.Api.call(‘friends.get’, < fields: ‘photo_rec’ >, function(data)< // обработка списка друзей >);
В случае возникновения ошибки, объект data будет содержать вложенный объект error, содержащий информацию об ошибке. Ошибка с кодом 7 говорит о том, что у приложения не хватает прав, то есть в нашем случае о том, что пользователь не разрешил доступ к списку друзей.
Если вызов метода завершен успешно, то объект data будет содержать поле response, которое является массивом объектов, каждый из которых представляет информацию об одном из друзей пользователя.
После того, как список друзей получен, отбираем из него тех, у кого задана фотография (то есть не является стандартной картинкой со знаком вопроса) и переходим к инициализации игры:
VK.Api.call(‘friends.get’, < fields: ‘photo_rec’ >, function(data) < if(!data.error) < if(data.response.length >0) < data.response.shuffle(); for(i = 0; i < data.response.length; i++) < var friend = data.response[i]; if(friend.photo_rec friend.photo_rec.indexOf(‘images/question_c.gif’) == -1) < photos.push(< photo: friend.photo_rec, id: friend.uid >); > > > initGameField(); > else < if(data.error.error_code == 7) < isLogged = false; $(‘div#login-bar’).show(); $(‘div#logout-bar’).hide(); $.unblockUI(); >else < showError(data.error.error_msg); >> >);
Подготовка игрового процесса
- если уже открыто две фотографии, закрывает их
- отображает «лицевую сторону» фотографии, назначенной для этой ячейки
- если уже открыта одна фотография и она совпадает с текущей, то очищает обе ячейки (успешный ход)
VK.Api.call(‘setUserScore’, < score: stepsCount >, function(data) < if(data.error) < showError(data.error.error_msg, false); >>);
Необходимо учесть, что в нашей игре лучший результат — это меньший результат, поэтому в идеале описанный метод не совсем подходит для сохранения результатов, поскольку при достижении максимально возможного количества рекордов, лучшие результаты будут вытеснены худшими.
Список чемпионов
Для получения таблицы рекордов используется метод getHighScores, который не имеет параметров. Метод возвращает массив объектов, каждый из которых содержит информацию о пользователе и его рекорд.
Чтобы пользователь мог посмотреть таблицу рекордов, добавим обработчик ссылки a#game-scores, который будет вызывать указанный выше метод, формировать таблицу результатов и показывать ее в диалоговом окне:
$(‘a#game-scores’).click(function(event)< event.preventDefault(); VK.Api.call(‘getHighScores’, <>, function(data) < if(!data.error) < var scoresTable = »; if(data.response data.response.length >0) < for(i = 0; i < data.response.length; i++) < scoresTable = ‘
‘ + scoresTable; > scoresTable = ‘
| Пользователь | Результат |
‘; > else < scoresTable = ‘Нет результатов’; > $(‘#scores-dialog:ui-dialog’).dialog(‘destroy’); $(‘#scores-dialog’) .html(scoresTable) .dialog( < title: ‘Таблица рекордов’, modal: true, draggable: false, resizable: false, buttons: < ‘Закрыть’: function()< $(this).dialog(‘close’); >> >); > else < showError(data.error.error_msg, false); >>); >)
Как видно из кода обработчика, каждая новая строка таблицы добавляется перед предыдущей, что связано с описанной выше особенностью результатов игры.
Результат
Итоговый файл general.js можно посмотреть здесь, сама игра доступна по ссылке VK Memory.
Для создания приложения были использованы плагины для jQuery Pines Notify и BlockUI. Всю информацию об API ВКонтакте можно получить на странице для разработчиков.
Источник: habr.com