Open API - система для разработчиков сторонних сайтов, которая предоставляет возможность легко авторизовывать пользователей ВКонтакте на Вашем сайте. Кроме этого, с согласия пользователей, вы сможете получить доступ к их друзьям, фотографиям, аудиозаписям, видеороликам, объявлениям и прочей информации ВКонтакте для более глубокой интеграции с Вашим проектом.
В рамках подключения к Open API создается специальное приложение, которое позволяет использовать на Вашем сайте все текущие методы ВКонтакте API. Помимо этого, Open API предоставляет возможность упростить процесс регистрации новых пользователей на Вашем сайте, если у них уже есть учетная запись ВКонтакте.
В этом уроке вы узнаете, как вывести на своём сайте информацию об авторизованном пользователе социальной сети ВКонтакте.
Этот пример показывает, как начать работать с Open API.
Для того чтобы использовать авторизацию на своём сайте, вам придется доработать этот пример. Для этого вам понадобятся знания JavaScript и, скорее всего, ещё и PHP.
Подключение сайта к платформе Open API
1. Создаем новое или берем уже созданное приложение.
2. Изменяем настройки приложения
Редактирование -> Open API
Адрес сайта - вводим адрес сайта, к которому будете подключать Open API (например, http://flapps.ru/)
Базовый домен – базовый домен Вашего сайта (например, flapps.ru)
3. Создаём файл xd_receiver.html с таким содержимым
Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Open API XD Receiver</title> </head> <body> <script src="http://vkontakte.ru/js/api/xd_receiver.js" type="text/javascript"></script> </body></html>
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<j; i++) { if(!sorter[ar[i]+typeof ar[i]]){ out.push(ar[i]); sorter[ar[i]+typeof ar[i]]=true; } } } return out || ar;} // функция авторизацииfunction doLogin() { VK.Auth.login( null, VK.access.FRIENDS | VK.access.WIKI // запрашиваем доступ к друзьям и вики );}// функция выходаfunction doLogout() { VK.Auth.logout(logoutOpenAPI);}function logoutOpenAPI() { window.location = baseURL;}
Код: Выделить всё
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 {' code += 'me: API.getProfiles({uids: API.getVariable({key: 1280}), fields: "photo"})[0]'; code += '};'; VK.Api.call('execute', {'code': code}, 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;}
Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Open API flapps.ru</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" ><script src="/vkopenapi/openapi_lib.js" charset="windows-1251"></script><script src="/vkopenapi/openapi_code.js" charset="windows-1251"></script></head><body><!-- vk_api_transport необходим для работы с Open API --><div id="vk_api_transport"></div><!-- кнопка входа --><a href="#" id="vk_login" onclick="loginOpenAPI()">Войти</a><!-- блок, в котором будет выводиться информация о пользователе --><div id="userinfo"> <a href="#" id="openapi_userlink"><img src="" id="openapi_userphoto" alt="img" /></a></div> <div id="message">Привет, <span id="openapi_user">Пользователь!</span></div> <!-- ссылка для выхода --><div id="logout"><a href="#" onclick="doLogout()">Выйти</a></div><a href="http://flapps.ru/forum">Форум Вконтакте API</a> </body></html>
Код: Выделить всё
<script src="/vkopenapi/openapi_lib.js" charset="windows-1251"></script><script src="/vkopenapi/openapi_code.js" charset="windows-1251"></script>
Загрузить можно в любой каталог. Не забудьте прописать правильные пути к файлам.
В файле openapi.html - пути к openapi_code.js и openapi_lib.js
И в файле openapi_code.js - к файлу xd_receiver.html
8. Всё готово.
Заходите на свой сайт. Открывайте файл openapi.html
Исходник http://flapps.ru/example/vk_openapi.rar