JavaScript, Iframe, ВКонтакте API, HTML
Приложение получает информацию о пользователе и выводит её.
Для работы приложения нужен хостинг.
1. Создаём html файл.
Можно использовать специальную программу или любой текстовый редактор, например, блокнот.
Расширение файла должно быть html.
2. Пишем в созданый html файл код:
Код: Выделить всё
<html><head><!-- подключаем xd_connection.js --><script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script> <script type="text/javascript" charset="cp1251" >window.onload = (function() { // когда загрузится вся страница VK.init(function() { // инициализируем Vk API // узнаём flashVars, переданные приложению GET запросом. Сохраняем их в переменную flashVars var parts=document.location.search.substr(1).split("&"); var flashVars={}, curr; for (i=0; i<parts.length; i++) { curr = parts[i].split('='); // записываем в массив flashVars значения. Например: flashVars['viewer_id'] = 1; flashVars[curr[0]] = curr[1]; } // получаем viewer_id из полученных переменных var viewer_id = flashVars['viewer_id']; // выполняем запрос получения профиля VK.api("getProfiles", {uids:viewer_id,fields:"photo_big"}, function(data) { // обрабатываем полученные данные // выводим имя и фамилию в блок user_info document.getElementById('user_info').innerHTML = data.response[0].first_name + ' ' + data.response[0].last_name + '<br />'; // создаем img, для отображения аватарки var image=document.createElement('img'); // из полученных данных берем ссылку на фото image.src=data.response[0].photo_big; // добавляем img в блок user_info user_info.appendChild(image); }); });});</script></head><body><div id="user_info"><a href="http://flapps.ru">http://flapps.ru</a></div></body></html>xd_connection.js позволяет делать запросы к API ВКонтакте при помощи функции VK.api(String method, Object params, Function callback), при этом не нужно заботиться о подписи, версии Api, и анализе полученных данных, данные будут приходить в виде javascript объекта.
VK.api принимает 3 параметра:
1) Название метода api.
2) Объект с параметрами запроса.
3) Функция для обработки результата.
Есть другой, более простой и удобный способ получения flashVars. Он описан в уроке Получение параметров (viewer_id и т.п.) в IFrame приложении.
3. Загружаем файл на свой сервер.
4. Настраиваем приложение на сайте вконтакте.
Выбираем:
Состояние: Приложение включено и видно всем
Тип приложения: IFrame
Адрес IFrame: Ссылка на созданный html файл на вашем сервере. Например https://flapps.ru/vk.html
Страница должны быть доступна по протоколу https. Необходимо получить SSL сертификат (например, бесплатный Let's Encrypt).
5. Всё готово.
Исходник http://flapps.ru/example/iframe_example.rar
