IFrame-приложение ВКонтакте. Вывод информации о пользователе

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

IFrame-приложение ВКонтакте. Вывод информации о пользователе

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

IFrame-приложение ВКонтакте. Вывод информации о пользователе
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>
В методах ВКонтакте API произошли изменения, используйте вместо метода getProfiles метод users.get
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
Аватара пользователя
Влад
Модератор
Модератор
Сообщения: 654
Зарегистрирован: 29 апр 2010, 22:24

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение Влад »

АААА! Супер пупер!!!!! Спасибо Александр!!!!!!!!!!!!!!!!!!!!!!
Аватара пользователя
Влад
Модератор
Модератор
Сообщения: 654
Зарегистрирован: 29 апр 2010, 22:24

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение Влад »

Подскажите пожалуйста как предать

Код: Выделить всё

var viewer_id = flashVars['viewer_id'];
в скрипт .php хочу попробовать сделать запись Id в БД
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

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

Влад
Javascript - XMLHTTPRequest.
Или подключай, например, jQuery. Там get, post.
В обоих случаях нужны знания Javascript.
Аватара пользователя
Влад
Модератор
Модератор
Сообщения: 654
Зарегистрирован: 29 апр 2010, 22:24

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение Влад »

гуглил не подуше как-то, пробовал - не получилось
lol123
Сообщения: 36
Зарегистрирован: 18 фев 2010, 17:19

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение lol123 »

Не пойму, почему не могу вывести nickname, sex, bdate. Возвращает андефайнды одни.
Аватара пользователя
Влад
Модератор
Модератор
Сообщения: 654
Зарегистрирован: 29 апр 2010, 22:24

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение Влад »

lol123 что именно приходит?
Аватара пользователя
alexei
Разработчик
Разработчик
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение alexei »

Расширение файла должно быть html.
А нельзя php, aspx, htm? Где надо исправить?
Аватара пользователя
Влад
Модератор
Модератор
Сообщения: 654
Зарегистрирован: 29 апр 2010, 22:24

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение Влад »

php можно - пробовал
Аватара пользователя
alexei
Разработчик
Разработчик
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение alexei »

Уже получилось. Жаль что приходиться все тащить за собой при переходе не другие страницы. Всю QueryString(((. Или почти ее всю.
Ответить