Open API ВКонтакте

Только готовые уроки по использованию ВКонтакте API. Flash + PHP + API. НЕ IFrame!

Open API ВКонтакте

Сообщение Александр » 19 авг 2010, 19:55

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 с таким содержимым
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.     <title>Open API XD Receiver</title>
  6.   </head>
  7.   <body>
  8.     <script src="http://vkontakte.ru/js/api/xd_receiver.js" type="text/javascript"></script>
  9.   </body>
  10. </html>



4. Создаём файл openapi_lib.js
  1. var
  2.   vk_members_data = {},
  3.   lastCommentsResponse,
  4.   lastCommentsPage = null,
  5.   baseURL = window.location.protocol + '//' + window.location.hostname + '/';
  6.  
  7.  // функция для вывода полученной информации
  8. function ge() {
  9.   var ea;
  10.   for (var i = 0; i < arguments.length; i++) {
  11.     var e = arguments[i];
  12.     if (typeof e == 'string')
  13.       e = document.getElementById(e);
  14.     if (arguments.length == 1)
  15.       return e;
  16.     if (!ea)
  17.       ea = new Array();
  18.     ea.push(e);
  19.   }
  20.   return ea;
  21. }
  22.  
  23. function array_unique(ar){
  24.   if (ar.length && typeof ar !== 'string') {
  25.     var sorter = {};
  26.     var out = [];
  27.     for (var i=0, j=ar.length; i<j; i++) {
  28.       if(!sorter[ar[i]+typeof ar[i]]){
  29.         out.push(ar[i]);
  30.         sorter[ar[i]+typeof ar[i]]=true;
  31.       }
  32.     }
  33.   }
  34.   return out || ar;
  35. }
  36.  
  37. // функция авторизации
  38. function doLogin() {
  39.   VK.Auth.login(
  40.     null,
  41.     VK.access.FRIENDS | VK.access.WIKI // запрашиваем доступ к друзьям и вики
  42.   );
  43. }
  44. // функция выхода
  45. function doLogout() {
  46.   VK.Auth.logout(logoutOpenAPI);
  47. }
  48. function logoutOpenAPI() {
  49.   window.location = baseURL;
  50. }
  51.  


5. Создаём файл openapi_code.js
  1. window.onload = function() { // когда вся страница загрузиться
  2.     // инициализируем "приложение"
  3.     window.vkAsyncInit = function() {
  4.         VK.init({
  5.             apiId: 1728947, // заменяем на id своего приложения
  6.             nameTransportPath: '/vkopenapi/xd_receiver.html'    // заменяем на ссылку к файлу xd_receiver.html на вашем сервере
  7.         });
  8.     };
  9.     (function() {
  10.         var el = document.createElement('script');
  11.         el.type = 'text/javascript';
  12.         el.src = 'http://vkontakte.ru/js/api/openapi.js';
  13.         el.charset="windows-1251";
  14.         el.async = true;
  15.         document.getElementById('vk_api_transport').appendChild(el);
  16.     }());  
  17. }
  18.      
  19. // получаем данные о пользователе. id пользователя считываем из переменной 1280
  20. function getInitData() {
  21.   var code;
  22.   code = 'return {'
  23.   code += 'me: API.getProfiles({uids: API.getVariable({key: 1280}), fields: "photo"})[0]';
  24.   code += '};';
  25.   VK.Api.call('execute', {'code': code}, onGetInitData);
  26. }
  27. // данные получены
  28. function onGetInitData(data) {
  29.     var r;
  30.     if (data.response) {
  31.         r = data.response;
  32.         if (r.me) {
  33.             ge('openapi_user').innerHTML = r.me.first_name + ' ' + r.me.last_name;
  34.             ge('openapi_userlink').href = '/id' + r.me.uid;
  35.             ge('openapi_userphoto').src = r.me.photo;
  36.         }
  37.     }
  38. }
  39.  
  40. // авторизуемся
  41. function loginOpenAPI(){
  42.     doLogin();
  43.     // и вызываем функцию getInitData()
  44.     getInitData();
  45.     return false;
  46. }


6. Создаём файл openapi.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Open API flapps.ru</title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
  6. <script src="/vkopenapi/openapi_lib.js" charset="windows-1251"></script>
  7. <script src="/vkopenapi/openapi_code.js" charset="windows-1251"></script>
  8. </head>
  9. <body>
  10. <!-- vk_api_transport необходим для работы с Open API  -->
  11. <div id="vk_api_transport"></div>
  12. <!-- кнопка входа  -->
  13. <a href="#" id="vk_login" onclick="loginOpenAPI()">Войти</a>
  14. <!-- блок, в котором будет выводиться информация о пользователе  -->
  15. <div id="userinfo">
  16.     <a href="#" id="openapi_userlink"><img src="" id="openapi_userphoto" alt="img" /></a>
  17. </div>
  18.  
  19. <div id="message">Привет, <span id="openapi_user">Пользователь!</span></div>
  20.  
  21. <!-- ссылка для выхода  -->
  22. <div id="logout"><a href="#" onclick="doLogout()">Выйти</a></div>
  23. <a href="http://flapps.ru/forum">Форум Вконтакте API</a>
  24.  
  25.  
  26.   </body>
  27. </html>

Заменяем ссылки к файлам на свои
  1. <script src="/vkopenapi/openapi_lib.js" charset="windows-1251"></script>
  2. <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


Исходник Чтобы увидеть ссылку - зарегистрируйтесь

За это сообщение автора Александр поблагодарили - 5:
jagger, LextoR, Noise Gate, RSivakov, turikhay
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



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

Сообщение Pavlo0a » 07 мар 2011, 00:53

Что то не работает =\
Изображение
Аватара пользователя
Pavlo0a

 
Сообщения: 26
Зарегистрирован: 08 авг 2010, 18:25
Откуда: Украина
Благодарил (а): 3 раз.
Поблагодарили: 0 раз.

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

Сообщение boombast1k » 30 июл 2011, 02:39

у меня тоже :|

Open API security breach: http://xxx.com/vk_openapi/openapi.html
Аватара пользователя
boombast1k

 
Сообщения: 332
Зарегистрирован: 23 июн 2011, 07:31
Благодарил (а): 14 раз.
Поблагодарили: 14 раз.

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

Сообщение Александр » 31 июл 2011, 20:57

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

Во всех браузерах Open API security breach?
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

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

Сообщение boombast1k » 31 июл 2011, 22:40

нет :oops:

кстати насчет этого, а если я приложение создал давно и теперь у меня этой формы куда вводить адрес сайта, что мне делать?
Аватара пользователя
boombast1k

 
Сообщения: 332
Зарегистрирован: 23 июн 2011, 07:31
Благодарил (а): 14 раз.
Поблагодарили: 14 раз.

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

Сообщение Александр » 01 авг 2011, 21:43

boombast1k
Проблема создать новое?
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

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

Сообщение boombast1k » 01 авг 2011, 21:45

ну у меня просто все для приложения настроено которое сейчас стоит...
ну, а если так то все нормально)
Аватара пользователя
boombast1k

 
Сообщения: 332
Зарегистрирован: 23 июн 2011, 07:31
Благодарил (а): 14 раз.
Поблагодарили: 14 раз.

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

Сообщение blacktyan » 06 авг 2011, 17:30

а через api возможно узнать кол-во новых сообщений?
blacktyan

 
Сообщения: 3
Зарегистрирован: 06 авг 2011, 17:28
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

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

Сообщение Александр » 06 авг 2011, 18:49

blacktyan
Каких сообщений? Личных? Для Desktop приложений есть метод messages.get.
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

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

Сообщение blacktyan » 07 авг 2011, 10:52

Александр писал(а):blacktyan
Каких сообщений? Личных? Для Desktop приложений есть метод messages.get.


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

 
Сообщения: 3
Зарегистрирован: 06 авг 2011, 17:28
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

След.

Вернуться в Уроки по использованию ВКонтакте API



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0