Загрузка фотографий ВКонтакте и постинг через VK API

[BigPig]

Всем привет!
Сравнительно недавно я разобрался с тем, как нужно загружать фотографии в социальную сеть ВКонтакте из приложения на Construct 2 и сегодня я решил запилить урок, чтобы помочь с этим остальным.
Честно говоря, я убил на поиски информации и реализацию как минимум год, при этом что-то начало получаться лишь через 10 месяцев.
Сразу скажу: этот урок никак не связан с плагином Cocoon Share. Рассматривается загрузка c использованием модифицированного плагина AquaBarbus и PHP.

Что потребуется для данного урока:
1. Модифицированный плагин VK.API [прикреплён]
2. Плагин Canvas или поведение ExtractImage для объекта Sprite
3. Версия PHP 5.6 и выше
4. Хостинг приложений с поддержкой PHP и HTTPS (Я использовал Heroku)

Итак, начнём!

 1. Создание приложения ВК

Для начала, зайдём ВКонтакте на страницу https://vk.com/apps?act=manage и нажмм на большую синюю кнопку "Создать приложение"

Далее, заполняете необходимую информацию вроде имени приложения и его типа.
После этого нас бросает на страницу управления приложением. Переходим на вкладку "Настройки" и копируем оттуда ID нашего приложения. Страницу можно не закрывать.

После этого можно перейти к следующему этапу

 2. Работа в Construct 2

ПРЕДУПРЕЖДЕНИЕ!При экспорте проекта стоит отключить минимизацию js, так как в консоли браузера будет появляться ошибка onload и приложение будет виснуть намертво!

Заходим в Construct, создаём новое пустое приложение и добавляем следующие плагины:
Vkontakte (Для взаимодействия с API)
Array (В него мы запишем данные для отправки на сервер)
AJAX (При помощи него мы и отправим)
Canvas (Нужен, чтобы было что отправлять)
Touch (Для работы с Canvas)
Ну и добавим один textbox и одну кнопку, чтобы отправлять данные и отслеживать результат.

Перейдём в параметры плагина VK и в поле ID приложения вставим ID, полученное в шаге 1.

Разместим в любом месте canvas, кнопку и текстбокс и перейдём в Event Sheet.

Чтобы не отправлять каждый раз одну и ту же картинку, я решил внести игровой элемент, кому это не нужно, могут пропускать От сюда..
Добавим условие: если пользователь касается canvas то мы рисуем линию от точки прикосновения до левого верхнего угла объекта выбранным из метода choose цветом:

В браузере это выглядит следующим образом:

И до сюда
Теперь добавим следующее условие: если мы нажали на кнопку, то VK получает адрес для загрузки изображения (В нашем случае на стену)
И, если адрес получить удалось, то формируем следующий массив данных:
В ячейку с индексом X = 0 мы пишем сервер от вк в том виде, в каком он пришёл к нам,
с индексом 1: Canvas.imageurl то есть base64 изображения, которое мы отправим
и с индексом 2 отправим ID Пользователя, найти который можно в Expressions плагина VK

Сформировали массив данных? самое время его отправить!
Создам POST запрос в AJAX к полному адресу скрипта на вашем сайте и в теле запроса отправляем тег, по которому сервер определит что это и есть данные (На скриншоте подписано как "up_data") и далее наш массив в формате, пригодном для отправки.

Сразу добавим условия, что если запрос успешно выполнен, то мы сохраняем фотографию методом Save Wall Photo (Именно Wall!), и если получиться сохранить то отправляем запрос на добавление записи на стене с полученной ссылкой на фото.

Так же, если запрос не выполняется, то в текстбокс пишем, что у нас "Не получилось..."
Полный код должен выглядеть так:

Теперь переходим к серверной части вашего приложения

 3. Пыхтим над PHP

Самая сложная для меня часть, так до этого я ни разу с ней не работал. Сразу скажу, что этот код работает на PHP версий 5.6 и больше. Для более старых версий можно найти скрипты в Интернете, но за их работоспособность я, конечно, не отвечаю.
Открываем любой удобный для вас текстовый редактор (Я использую Notepad++, но и Блокнот подойдёт) и начинаем писать серверную часть.
1. Добавим два заголовка, которые позволят отправлять приложению POST запросы, если они у вас на разных доменах:

2. Добавим строку, которая позволит вам загрузить запрос целиком (Не знаю, почему, но без этой строки запрос иногда доходил не полностью)

Ну и дальше начинается магия: мы получаем запрос по тегу который указали в проекте на C2, расшифровываем его, создам файл, конвертируем его в файл, годный к отправке и инициализируем отправку изображения на сервер ВК, адрес которого мы также передали в запросе. На скриншоте всё неплохо прокомментированно, в конце также приложу исходный файл.

Сохраняем под именем upload.php

 4. Загружаем код и настраиваем приложение

Думаю, с загрузкой особых проблем не возникнет, но обычные хосты типа Dropbox или GoogleDrive(Пока он ещё есть) не подойдут, так как они не поддерживают выполнение php скриптов.
Я использую платформу для развёртывания Heroku, кому интересно, вот ссылка по настройке и загрузке проекта + на странице приложения на Heroku тоже будет короткая инструкция.

Ну вот, после того как вы загрузили своё приложение на сайт и убедились что адреса корректно прописаны как в приложении на C2, так и на скрипте, возвращаемся к странице настройки приложения ВК.

Выставляем: приложение включено и доступно всем, запрашивать доступ к стене, фотографиям, друзьям.
Тип приложения Iframe, вставляете ссылки на index.html вашего проекта, меняете размер под себя.

Готово! Можно приглашать друзей и загружать свои шедевры фотографиями к себе на стену
Протестировать мой вариант можно здесь: https://vk.com/app4534932

Проектные файлы:
Плагин с доработками и поддержкой новой версии API(5.53)

nbproject.zip

(29.04 КБ) Скачиваний: 125

PHP-скрипт здесь

 

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

<?php
header('Access-Control-Allow-Origin: http://yourhostingsite.com');
header('Access-Control-Allow-Origin: https://yourhostingsite.com');

ini_set('post_max_size', '23M');

//Получаем запрос от приложения с адресом загрузки и фотографией, декодируем его в массив и
//записываем в $c2ArrayData непосредственно нужный элемент данных ['data']
$jsonString = $_POST['up_data'];
$jsonAsArray = json_decode($jsonString,true);   
$c2ArrayData = $jsonAsArray['data'];

//Получаем base64 изображения и декодируем его
$encodedData = $c2ArrayData[1][0][0];
$encodedData = str_replace(' ', '+', $encodedData);
$decodedData = file_get_contents($encodedData);

//Создаем на сервере файл изображения с именем содержащим id пользователя
$file = 'file'.$c2ArrayData[2][0][0];
$fp = fopen($file,'w');
fwrite($fp, $decodedData);
$pngfile = basename($file) ;
fclose($file);

//Вызываем метод, конвертирующий файл в пригодный для отправки
$cfile = curl_file_create($pngfile, 'image/png', 'file.png');

//Записываем в переменную адрес загрузки и в объект данные созданного файла
$upload_url = urldecode($c2ArrayData[0][0][0]);
$request_params = array('photo' => $cfile);

//Инициируем запрос
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $upload_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $request_params);
$response = curl_exec($ch);
$info = $response;
curl_close($ch);

//Возвращаем результат приложению
echo $info;
?>

Файл проекта

1.capx

(172.87 КБ) Скачиваний: 88

Плагин Canvas (обычный, можно не заменять, если он уже установлен)

canvas.zip

(10.23 КБ) Скачиваний: 76

На этом всё, спасибо, что прочитали урок. Для меня это первый опыт, поэтому может он будет не совсем удобен к прочтению . Буду рад, если вы посмотрите моё приложение ВКонтакте, где также реализована загрузка изображений.

[Dev_stars]

Спасибо, но это слишком легко)
Хоть я и не пользуюсь больше С2, все равно спасибо))

[Sir_G]

моя рекомендация - никогда не использовать обычный блокнот для редактирования кода. он сохраняет в формате utf8+BOM, из-за этого потом возникает много вопросов, почему код не работает

[Sailer]

да. лучше использовать Notepad++

[Dev_stars]

"да. лучше использовать Notepad++"
Лучше использовать Sublime text 3

[danila_11]

Ребят, а как быть тем, кто хочет загрузить фото пользователя в свое приложение?
https://vk.com/app5343263

[BigPig]

Ребят, а как быть тем, кто хочет загрузить фото пользователя в свое приложение?
https://vk.com/app5343263

Если нужно получить фотографию, которая стоит на аватарке, то можно загрузить в массив ВК OwnDataJsonArr и посмотреть поля photo, photo_medium, photo_big

[AlphaOne]

а как канвас скрин загрузить на стену?

[BigPig]

а как канвас скрин загрузить на стену?

На скрипт отправляешь CanvasSnapshot вместо картинки из плагина. Не забудь только заснэпшотить сначала)