IFrame, jQuery, ВКонтакте API 3.0
В этом уроке вы узнаете как создать IFrame приложение для повышения рейтинга (метод secure.addRating).
Такое приложение не будет одобрено или проверено. Но вы можете встроить функцию повышения рейтинга в своё IFrame приложение.
У вашего приложения может быть свой уникальный дизайн, поэтому я не оформлял приложение из этого урока. Используются стандартные поля ввода и кнопки.
В уроке показано как:
- получить параметры viewer_id и auth_key
- вызвать действие при нажатии на кнопку (jQuery)
- вытащить данные из input и textarea (jQuery)
- выполнить запрос к api (метод getProfiles)
- отправить post запрос php скрипту (jQuery)
- правильно обрабатывать ответы от api сервера в php скрипте
- использовать json формат
Если вы ещё никогда не делали IFrame приложения вконтакте, советую сначала прочитать урок IFrame-приложение ВКонтакте. Вывод информации о пользователе.
Если вы не знаете какой нужен хостинг и как использовать класс APIServerPHPClass - прочтите урок Вызов серверных методов.
Если не работали с jQuery, то загляните в раздел Уроки jQuery.
Код файла index.html
Код: Выделить всё
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>http://flapps.ru</title><script src="js/jquery-1.5.1.min.js" type="text/javascript"></script><script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script><script type="text/javascript" charset="cp1251" >$(document).ready(function(){ // когда страница загрузится VK.init(function() { // получаем flashVars VK.loadParams(document.location.href); // вытаскиваем viewer_id и auth_key из полученных переменных var viewer_id = VK.params.viewer_id; var auth_key = VK.params.auth_key; // проверка uid $('#check_uid').click(function(){ // вытаскиваем uid из поля uid_to var uid_to = $('#uid_to').val(); // выполняем запрос получения профиля VK.api("getProfiles", {uids:uid_to,fields:"photo_big"}, function(data) { // обрабатываем полученные данные // выводим имя и фамилию в блок user_info $('#user_info').html('<a href="http://vkontakte.ru/id' + data.response[0].uid + '">' + data.response[0].first_name + ' ' + data.response[0].last_name + '</a>' + '<br /><img src="' + data.response[0].photo_big + '" />'); }); }); $('#add_rate').click(function(){ // вытаскиваем uid, rate и message из полей var uid_to = $('#uid_to').val(); var rate = $('#rate').val(); var message = $('#message').val(); // отправляем post запрос, передаём данные скрипту $.post('http://flapps.ru/apps/addrating/addrating.php', { "viewer_id": viewer_id, "auth_key": auth_key, "uid": uid_to, "rate": rate, "message": message }, function(data){ // функция после выполнения передачи данных скрипту // success и error нужны для того чтобы оформить вывод сообщения. Например, чтобы выводить сообщения в разные блоки. if (data.success) { // если скрипт вернул success $('#result_flapps').html(data.success.msg); } else { // если скрипт вернул error $('#result_flapps').html(data.error.msg); } }, "json"); }); // запустим функцию "клик по кнопке проверить", чтобы сразу загрузить информацио о введенном uid. Можно её убрать. $('#check_uid').click(); }); // подсчет необходимого количества голосов // до 100 - по 0,6. от 100 - по 0,5. $('#rate').keyup(function() { var rate = parseInt($('#rate').val()); if (rate>0) { if (rate<100) { $('#votes').html((rate * 6*100)/1000); } else { $('#votes').html((rate * 5*100)/1000); } } else { $('#votes').html('Ошибка'); } }); });</script></head><body> Кому: id<input type="text" id="uid_to" value="1306422"><input type="button" id="check_uid" value="Проверить"><div id="user_info"></div><br /> На сколько: <input type="text" id="rate" value="1"> Необходимо голосов <span id="votes">0.6</span><br />Сообщение:<br /><textarea id="message" rows="3" cols="40">Рейтинг</textarea><br /><input type="button" id="add_rate" value="Повысить"> <p id="result_flapps">http://flapps.ru</div> </body></html>
Код: Выделить всё
<?/* http://flapps.ru/forum/ - форум о создании приложений */header('Content-Type: text/javascript; charset=utf-8');require 'vkapi.class.php'; $api_id = '1728947'; // id приложения$secret_key = 'qwerty12345asdfgh678'; // Защищенный ключ $auth_key = $_POST['auth_key']; // auth_key из FlashVars приложения$viewer_id = $_POST['viewer_id']; // id просматривающего приложение // рассчитывается ключ авторизации$real_key = md5($api_id."_".$viewer_id."_".$secret_key); if ($auth_key == $real_key){ $uid = $_POST['uid']; $rate = $_POST['rate']; $message = $_POST['message']; // если uid указан верно if (is_numeric($uid)) { // снимаем со счета пользователя голоса if ($rate<100) { $votes = $rate*60; } else { $votes = $rate*50; } $VK = new vkapi($api_id, $secret_key); $resp = $VK->api('secure.withdrawVotes', array('uid'=>$viewer_id, 'votes'=>$votes)); if ($resp['response']>0) { // голоса успешно списаны // повышаем рейтинг $resp = $VK->api('secure.addRating', array('uid'=>$uid, 'rate'=>$rate, 'message'=>$message)); if ($resp['response']>0) { echo '{"success": { "msg":"Рейтинг повышен!" } }'; } else { switch($resp[error]['error_code']) { case 113: echo '{"error": { "msg":"Неверный id пользователя!" } }'; break; case 147: echo '{"error": { "msg":"На балансе приложения недостаточно голосов!" } }'; break; default: echo '{"error": { "msg":"Произошла ошибка!" } }'; } } } else { // голоса не списаны switch($resp[error][error_code]) { case 502: echo '{"error": { "msg":"На вашем балансе недостаточно голосов!" } }'; break; default: echo '{"error": { "msg":"Произошла ошибка! Голоса не списаны." } }'; } } } else { // в поле "Кому" - не число echo '{"error": { "msg":"В поле «Кому» должен быть введен корректный ID!" } }'; } } else echo 'Ошибка безопасности.';?>
Несмотря на описание метода в документации
на деле, при успешном повышении рейтинга сервер api возвращает ответ:Пример ответа в формате JSON
{"response":{"rating_added":2}}
{"response":1}
Загружаем файлы на сервер и тестируем.
Исходник http://flapps.ru/example/iframe_addrating.rar