Ради интереса я решил написать кнопку для Picasa для загрузки фотографий на сайт ВКонтакте (действительно лишь ради интереса — свои фотографии я туда не загружаю). О том, с какими трудностями мне пришлось столкнуться — расскажу в данной статье. Может, кому-нибудь поможет.
Хотелось сделать так, чтобы пользователю не нужно было:
1) скачивать/устанавливать дополнительное приложение для загрузки фотографий;
2) вводить свои e-mail и пароль.
Что из этого получилось, а что не получилось — читайте далее.
Picasa поддерживает 3 вида кнопок (подробно об этом описано в Picasa Button API):
1) запуск приложения;
2) открытие web-страницы;
3) передача данных web-странице.
С запуском приложения все просто. Picasa передает имена файлов в качестве параметров заданному приложению.
Плюсы данного подхода:
— простота разработки (для меня, по крайней мере).
Минусы:
— необходимость скачивания и установки дополнительного приложения;
— необходимость логиниться на сайт в данном приложении;
— невозможность получить описания фотографий из Picasa;
— невозможность получить фотографии нужного размера на стороне клиента (если только не встраивать данный функционал в свою программу).
Потому от данного подхода пришлось отказаться.
Второй подход (открытие web-страницы) тоже не подошел — нет смысла просто открывать web-страницу, нужно передавать ей фотографии.
Остановился я на третьем подходе (передача данных web-странице).
При использовании этого подхода Picasa сначала открывает заданную страницу в своем IE-минибраузере. Данной странице в POST передаются данные фотографий (сами фотографии — в виде ссылок на localhost, описания и т.п.). Размещенные на странице input'ы, Picasa заменяет данными фотографий при отправке формы. При чем после отправки формы приложение принудительно закрывает окно минибраузера.
Процесс загрузки фотографий на сайт ВКонтакте детально описан на самом сайте в разделе Разработчикам. Вкратце, о чем нужно знать (при использовании Open API):
— с помощью javascript необходимо войти на сайт, создать альбом, получить данные сервера для загрузки;
— в POST запросе отправить фотографии на полученный сервер (не более 5-ти фотографий за раз);
— снова с помощью javascript «сохранить» фотографии в альбоме.
К сожалению, приложение ВКонтакте (как flash-приложение, так и iframe-приложение) не может получить данных, переданных через POST. Единственный способ взаимодействия внешнего приложения с приложением ВКонтакте (когда внешнее приложение инициирует передачу данных) — передача параметров в url после символа #. Flash- и iframe-приложения реагируют на изменение данного параметра — получают новое значение этого параметра в функции типа onLocationChange. Но в любом случае, Picasa никаким образом не хочет передавать данные фотографий в таком виде (т.е. в виде vkontakte.ru/app123456#photo1,photo2..photoN).
Я попытался создать отдельную страничку на GAE, которая получает POST-данные от Picasa, сохраняет их в базе данных и редиректит на vkontakte.ru/app123456#, передавая после # уникальный ключ сохраненной записи.
Всё было бы хорошо, но почему-то редирект на страницу с любым приложением (как flash, так и iframe) ВКонтакте вызывает ошибку («отсутствует объект») во встроенном IE-минибраузер Picasa. Устранить данную ошибку мне так и не удалось, встроенный браузер не позволяет просмотреть исходный код страницы, а в полноценных браузерах подобной ошибки не возникает.
Пришлось сделать следующее:
— на клиентской стороне открывается страничка, которая, увы, но требует ввода e-mail'a и пароля, если пользователь не залогинен в IE;
— после нажатия кнопки Загрузить фотографии, Picasa сжимает фотографии до нужного размера, страничка создает на сайте ВКонтакте альбом (через Open API) и отправляет фотографии на сайт GAE, который уже отправляет их на сайт ВКонтакте. Пришлось сделать именно так, т.к. Picasa в своем POST-запросе отправляет сразу все фотографии, а ВКонтакте способен принять лишь 5 фотографий за запрос;
— загрузив фотографии на сайт, GAE-приложение сохраняет в memcache полученный результат;
— Picasa, отправив все фотографии, закрывает свой IE-минибраузер и открывает уже в дефолтном (!) браузере пользователя другую страницу, которая опять через Open API сохраняет фотографии в созданном ранее альбоме. Дабы не просить пользователя вводить e-mail и пароль еще раз, GAE-приложение передает cookies из IE в дефолтный браузер пользователя.
— в новой странице отображается процесс сохранения, а потом открывается соответствующий альбом. Хотелось сделать так, чтоб пользователь видел процесс сохранения уже в самом ВКонтакте, в iframe приложении. Но если пользователь не залогинен на сайте, и он (или программа) переходит по ссылке вида vkontakte.ru/app123456#некоторое_значение, то после ввода пароля происходит редирект на нужную страницу, но значение после символа # теряется — данных для сохранения не остается.
В данном функционале есть некоторые ограничения:
— фотографии пересылаются через сервер GAE, бесплатный эккаунт, потому все пользователи вместе могут загрузить не более 10Гб фотографий в день (но думаю, что этого достаточно);
— фотографии с сервера GAE отправляются на сервер ВКонтакте через urlfetch, который имеет ограничение на запрос — не более 1Мб; если фотография (после уменьшения размера в Picasa) окажется более 1Мб, то на сайт ВКонтакте она загружена не будет;
— описания фотографий на сайт ВКонтакте не попадают — пока так и не нашел метода API ВКонтакте, который умеет это делать.
Что еще нужно сделать:
— возможность загрузки фотографий в существующий альбом;
— проверка «приложения» администрацией сайта ВКонтакте, чтоб кнопку можно было скачать прямо с сайта.
Кстати, пока данная проверка не пройдена, — кнопку можно найти на сайте picasa2vkontakte.appspot.com.
Хотелось сделать так, чтобы пользователю не нужно было:
1) скачивать/устанавливать дополнительное приложение для загрузки фотографий;
2) вводить свои e-mail и пароль.
Что из этого получилось, а что не получилось — читайте далее.
Picasa поддерживает 3 вида кнопок (подробно об этом описано в Picasa Button API):
1) запуск приложения;
2) открытие web-страницы;
3) передача данных web-странице.
С запуском приложения все просто. Picasa передает имена файлов в качестве параметров заданному приложению.
Плюсы данного подхода:
— простота разработки (для меня, по крайней мере).
Минусы:
— необходимость скачивания и установки дополнительного приложения;
— необходимость логиниться на сайт в данном приложении;
— невозможность получить описания фотографий из Picasa;
— невозможность получить фотографии нужного размера на стороне клиента (если только не встраивать данный функционал в свою программу).
Потому от данного подхода пришлось отказаться.
Второй подход (открытие web-страницы) тоже не подошел — нет смысла просто открывать web-страницу, нужно передавать ей фотографии.
Остановился я на третьем подходе (передача данных web-странице).
При использовании этого подхода Picasa сначала открывает заданную страницу в своем IE-минибраузере. Данной странице в POST передаются данные фотографий (сами фотографии — в виде ссылок на localhost, описания и т.п.). Размещенные на странице input'ы, Picasa заменяет данными фотографий при отправке формы. При чем после отправки формы приложение принудительно закрывает окно минибраузера.
Процесс загрузки фотографий на сайт ВКонтакте детально описан на самом сайте в разделе Разработчикам. Вкратце, о чем нужно знать (при использовании Open API):
— с помощью javascript необходимо войти на сайт, создать альбом, получить данные сервера для загрузки;
— в POST запросе отправить фотографии на полученный сервер (не более 5-ти фотографий за раз);
— снова с помощью javascript «сохранить» фотографии в альбоме.
К сожалению, приложение ВКонтакте (как flash-приложение, так и iframe-приложение) не может получить данных, переданных через POST. Единственный способ взаимодействия внешнего приложения с приложением ВКонтакте (когда внешнее приложение инициирует передачу данных) — передача параметров в url после символа #. Flash- и iframe-приложения реагируют на изменение данного параметра — получают новое значение этого параметра в функции типа onLocationChange. Но в любом случае, Picasa никаким образом не хочет передавать данные фотографий в таком виде (т.е. в виде vkontakte.ru/app123456#photo1,photo2..photoN).
Я попытался создать отдельную страничку на GAE, которая получает POST-данные от Picasa, сохраняет их в базе данных и редиректит на vkontakte.ru/app123456#, передавая после # уникальный ключ сохраненной записи.
Всё было бы хорошо, но почему-то редирект на страницу с любым приложением (как flash, так и iframe) ВКонтакте вызывает ошибку («отсутствует объект») во встроенном IE-минибраузер Picasa. Устранить данную ошибку мне так и не удалось, встроенный браузер не позволяет просмотреть исходный код страницы, а в полноценных браузерах подобной ошибки не возникает.
Пришлось сделать следующее:
— на клиентской стороне открывается страничка, которая, увы, но требует ввода e-mail'a и пароля, если пользователь не залогинен в IE;
— после нажатия кнопки Загрузить фотографии, Picasa сжимает фотографии до нужного размера, страничка создает на сайте ВКонтакте альбом (через Open API) и отправляет фотографии на сайт GAE, который уже отправляет их на сайт ВКонтакте. Пришлось сделать именно так, т.к. Picasa в своем POST-запросе отправляет сразу все фотографии, а ВКонтакте способен принять лишь 5 фотографий за запрос;
— загрузив фотографии на сайт, GAE-приложение сохраняет в memcache полученный результат;
— Picasa, отправив все фотографии, закрывает свой IE-минибраузер и открывает уже в дефолтном (!) браузере пользователя другую страницу, которая опять через Open API сохраняет фотографии в созданном ранее альбоме. Дабы не просить пользователя вводить e-mail и пароль еще раз, GAE-приложение передает cookies из IE в дефолтный браузер пользователя.
— в новой странице отображается процесс сохранения, а потом открывается соответствующий альбом. Хотелось сделать так, чтоб пользователь видел процесс сохранения уже в самом ВКонтакте, в iframe приложении. Но если пользователь не залогинен на сайте, и он (или программа) переходит по ссылке вида vkontakte.ru/app123456#некоторое_значение, то после ввода пароля происходит редирект на нужную страницу, но значение после символа # теряется — данных для сохранения не остается.
В данном функционале есть некоторые ограничения:
— фотографии пересылаются через сервер GAE, бесплатный эккаунт, потому все пользователи вместе могут загрузить не более 10Гб фотографий в день (но думаю, что этого достаточно);
— фотографии с сервера GAE отправляются на сервер ВКонтакте через urlfetch, который имеет ограничение на запрос — не более 1Мб; если фотография (после уменьшения размера в Picasa) окажется более 1Мб, то на сайт ВКонтакте она загружена не будет;
— описания фотографий на сайт ВКонтакте не попадают — пока так и не нашел метода API ВКонтакте, который умеет это делать.
Что еще нужно сделать:
— возможность загрузки фотографий в существующий альбом;
— проверка «приложения» администрацией сайта ВКонтакте, чтоб кнопку можно было скачать прямо с сайта.
Кстати, пока данная проверка не пройдена, — кнопку можно найти на сайте picasa2vkontakte.appspot.com.