Open API ВКонтакте

Только готовые уроки по использованию ВКонтакте API. Flash + PHP + API. НЕ IFrame!
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Open API ВКонтакте

Сообщение Александр »

Open API ВКонтакте

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;} 
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 {'  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;}
6. Создаём файл openapi.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 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>
7. Загружаем файлы на сервер.
Загрузить можно в любой каталог. Не забудьте прописать правильные пути к файлам.
В файле openapi.html - пути к openapi_code.js и openapi_lib.js
И в файле openapi_code.js - к файлу xd_receiver.html


8. Всё готово.
Заходите на свой сайт. Открывайте файл openapi.html


Исходник http://flapps.ru/example/vk_openapi.rar
Аватара пользователя
Pavlo0a
Сообщения: 26
Зарегистрирован: 08 авг 2010, 18:25

Re: Open API ВКонтакте

Сообщение Pavlo0a »

Что то не работает =\
Аватара пользователя
boombast1k
Сообщения: 332
Зарегистрирован: 23 июн 2011, 07:31

Re: Open API ВКонтакте

Сообщение boombast1k »

у меня тоже :|

Open API security breach: http://xxx.com/vk_openapi/openapi.html
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Re: Open API ВКонтакте

Сообщение Александр »

boombast1k
В настройках приложения так?
Open API
Адрес сайта: http://xxx.com
Базовый домен: xxx.com

Во всех браузерах Open API security breach?
Аватара пользователя
boombast1k
Сообщения: 332
Зарегистрирован: 23 июн 2011, 07:31

Re: Open API ВКонтакте

Сообщение boombast1k »

нет :oops:

кстати насчет этого, а если я приложение создал давно и теперь у меня этой формы куда вводить адрес сайта, что мне делать?
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Re: Open API ВКонтакте

Сообщение Александр »

boombast1k
Проблема создать новое?
Аватара пользователя
boombast1k
Сообщения: 332
Зарегистрирован: 23 июн 2011, 07:31

Re: Open API ВКонтакте

Сообщение boombast1k »

ну у меня просто все для приложения настроено которое сейчас стоит...
ну, а если так то все нормально)
blacktyan
Сообщения: 3
Зарегистрирован: 06 авг 2011, 17:28

Re: Open API ВКонтакте

Сообщение blacktyan »

а через api возможно узнать кол-во новых сообщений?
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Re: Open API ВКонтакте

Сообщение Александр »

blacktyan
Каких сообщений? Личных? Для Desktop приложений есть метод messages.get.
blacktyan
Сообщения: 3
Зарегистрирован: 06 авг 2011, 17:28

Re: Open API ВКонтакте

Сообщение blacktyan »

Александр писал(а):blacktyan
Каких сообщений? Личных? Для Desktop приложений есть метод messages.get.
Чтобы после авторизации через oauth, на моем сайте выводилось кол-во новых личных сообщений, типа:
Мои Сообщения (3)
Желательно JS
не могу найти, но может есть?
Ответить