FLASH GORDON VS AS3и не только

Создание AS3 iFrame приложения на Flash для Facebook на новом Graph API с использованием OAuth 2.0

Недавно Facebook анонсировал запуск нового Graph API который в корне отличается от старого REST API, а также о запуске новой системы авторизации OAUTH 2.0.
В связи с этим при разработке нового приложения встал вопрос об изучении этих двух вещей, результатами которого я хочу поделится с тобой, мой юный разработчик.
Этот метод подключения к API не претендует на эталон, но поможет начать твой тернистый путь.

Полезные ссылки:
http://developers.facebook.com/docs/
все документы о Graph API

http://developers.facebook.com/docs/api/
описание Graph API
http://developers.facebook.com/docs/reference/api/
объекты и методы Graph API
http://developers.facebook.com/docs/authentication/
об авторицазии OAuth 2.0
http://developers.facebook.com/docs/reference/javascript/
об использовании JavaScript SDK
http://www.adobe.com/devnet/facebook/html/popup_hiw_03.html
доступная схема взаимодействия для iFrame Flash приложения и Facebook API
http://blog.yoz.sk/2010/05/facebook-graph-api-and-oauth-2-and-flash/
howto с Flex примером с помощью которого был создан этот мануал

Капитан Очевидность подсказывает, что если переключить Facebook на родной английский язык, то интерфейс станет удобнее и красивше, а ориентироваться станет попроще.

Сначала немного теории.

Чтобы авторизоваться и начать работать с приложением пользователь должен пройти процедуру аунтефикации, которая основана на получении access_token ключа.
Для получения ключа выполняется следующая последовательность действий:

а. пользователь обращается к страничке приложения http://apps.facebook.com/some_application/;

б. fb делает редирект на сервер разработчика и грузит index.html с приложением;

в. приложение обращается к fb за аунтефикацией (в данном случае через JavaScript SDK) и доступом к расширенным параметрам управления профайлом;

г. пользователь подтверждает или неподтверждает доступ к параметрам на основе чего генерируется access_token;

д. fb делает запрос к callback.html и передаёт access_token;

е. callback.html c помощью java скрипта передает в swf ключ access_token;

ж. можно работать с api через приложение;

Теперь практика.

1. Чтобы получить возможность создавать и управлять своими приложениями, тебе необходимо установить себе приложение Developer.

2. Заходишь в Developer -> +Set Up New Application. Basic: заполняешь все доступные пониманию поля, загружаешь превьюхи.

Canvas -> Canvas Page URL: пишешь желаемое имя будущего приложение. Например: my_application

Canvas -> Canvas Callback URL: пишешь путь к папке где будет хостится твоё приложение. Например: http://www.myhost.ru/my_application/

Нужно заметить, что Facebook в отличии от Вконтакта не предоставляет возможность заливать свои swf файлы на свои серверы. Поэтому каждый разработчик должен иметь свой хостинг.

Connect -> Connect URL: опять путь к своей папке. Остальные поля пока не важны, жмешь Save Changes.

3. Качаешь два класса FacebookOAuthGraph и FacebookOAuthGraphEvent. Кладёшь их в папки sk.yoz.net и sk.yoz.events соответственно.

4. Создаешь класс своего приложения, у меня это FacebookTester.as (ссылка для скачки исходников внизу поста):

Импортируем наши классы:

import sk.yoz.events.FacebookOAuthGraphEvent;
import sk.yoz.net.FacebookOAuthGraph;

Определяем переменные:

private var clientId:String = "000000000000000"; //Application ID вашего приложения
private var scope:String = "publish_stream,user_photos,user_photo_video_tags,friends_photo_video_tags"; //просим у пользователя разные разрешения
private var facebook:FacebookOAuthGraph = new FacebookOAuthGraph();
private var redirectURI:String = "http://www.myhost.ru/my_application/callback.html"; //об этом ниже

Общение с API происходит через метод call:
facebook.call(api_method, data, url_method);
Где:
api_method - методы Graph API (например: “me/friends”), которые теперь называются ‘connections’.
data - необязательный параметр, передаваемые дополнительные параметры в виде URLVariables
url_method - необязательный параметр, POST или GET (по умолчанию)

Например, чтобы получить список своих друзей вызываем facebook.call(“me/friends”);
Все ответы от Graph API приходят в JSON формате и отображаются в окне result.

5. Создаем файл callback.html, он нужен для передечи полученного hash-ключа из браузера в приложение.

  <script type="text/javascript"><!--mce:0--></script>

You may now close this window.

6. Создаем index.html, непосредственно контейнер для нашего swf файла. В нем же осуществляется аунтефикация с помощью JavaScript SDK.

Не забудь заменить ’00000000000000′ на свой Application ID.

7. Заливаешь все файлы на свой сервер http://www.myhost.ru/my_application/ не забываете о волшебном crossdomain.xml

8. Идёшь на http://apps.facebook.com/my_application/ тестировать результат.

Нажимаешь на кнопку “Connect” – вываливается popup с запросом доступа. Разрешаешь. Facebook делает редирект на callback.html и передаёт access_token.
Теперь ты авторизован, о чем говорит сообщение authorized, и трэйс access_token.
В следующие заходы в приложение авторицация будет происходить в фоновом режиме, так как OAuth действует порядка 24 часов.

Далее ты можешь тестировать различные запросы к Graph API и видеть ответы от сервера в поле result.
Кнопка call нужна для запросов отдающих JSON.
Кнопка call binary нужна для запросов которые отдают результат в byte array виде (например “me/picture”), это картинки, видео и мп3.
Кнопка set status ставит статус вашему профайлу.

Архив с исходниками качать тут.

Задавайте вопросы, пишите уточнения или правки.
Статья будет постепенно усовершенствоваться и обновляться.

Tags: as3, facebook, flash, graph api, oauth, приложение

This entry was posted on Monday, May 31st, 2010 at 12:46 pm and is filed under API, Facebook, Социализация. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.