Amon2でFacebookAPIを使う その1
FacebookAPIを使う要件が出てきそうなのでいろいろ調査中。
perlでFacebookAPIを使うにはFacebook::Graphがいいんでしたよね!
Facebook::Graphのドキュメントにちょうどチュートリアルがあったので
試しに今回はその手順通りに設定していきたいと思います。
ただしそのままではなく一部Amon2用に置き換えてます。
また、今回は表示するデータを自分のニュースフィードにしてみました。
あと、Facebook アプリ登録画面ってログインするたびちょこちょこ変わってて
他のサイトの設定画面が参考にならなかったりするので
スクリーンショットも添付してみましょう。
Step 1: Set up the developer application on Facebook.
Step 2: Create your application.
https://developers.facebook.com/apps へ行き
「+新しいアプリケーションを作成」をクリックします。
Step 3: The Connect tab.
「アプリをFacebookに結合する方法を選択してください 」→「ウェブサイト」に
URL( ここでは http://localhost:5000/ )を入力します。
Step 4: Note your application settings.
"アプリケーションID"および"アプリケーションの秘訣"*1をメモしておくか、
このページをブックマークします。
後でこれらが必要になります。
Step 5: Create app
今回はAmon2で書くので、amon2-setup.pl を実行します
amon2-setup.pl FacebookAPI cd FacebookAPI
Step 6: Create your Facebook::Graph object.
Facebook::Graphはリクエストごとに使いまわしたいので
アプリケーションのサブルーチンにしてしまいます。
今回はFacebookAPI.pm に以下のような記述を追加しました。
use Facebook::Graph; sub fb { my $self = shift; if ( !defined $self->{fb} ) { my $conf = $self->config->{'Facebook::Graph'} or die "missing configuration for 'Facebook::Graph'"; my $fb = Facebook::Graph->new( postback => $conf->{postback}, app_id => $conf->{app_id}, secret => $conf->{secret}, ); $self->{fb} = $fb; } return $self->{fb}; }
Facebook::Graphの設定はconf/development.pl に追記しておきます。
'Facebook::Graph' => { postback => 'http://localhost:5000/facebook/postback', app_id => 'aaaaaaaaaaaaaaaaaaaaaa', secret => 'bbbbbbbbbbbbbbbbbbbbbb', },
Step 7: Create your application's connect page.
認証リダイレクトを作成する必要があります。
Facebookの必要なアクセス許可を行う場所です。http://developers.facebook.com/docs/authentication/permissions で
権限についての完全なリストがあります。
今回はサンプルと異なり、ニュースフィードを表示したいため
権限に read_stream を指定します。
vi lib/FacebookAPI/Web/Dispatcher.pm
get '/facebook' => sub { my ($c) = @_; $c->redirect( $c->fb->authorize->extend_permissions( qw(read_stream) )->uri_as_string ); };
Step 8: Create the Facebook access token postback page.
接続/認証ページには、アプリを承認するためにFacebookにユーザーをリダイレクトします。
ユーザーがFacebookからリダイレクトされるページを作成する必要があります。
これは、Step 6で作成したpostbackを指定します。
チュートリアルとは異なり、今回は取得したトークンをセッションに保持します。
vi lib/FacebookAPI/Web/Dispatcher.pm
get '/facebook/postback' => sub { my ($c) = @_; $c->fb->request_access_token($c->req->param('code')); $c->session->set('token' => $c->fb->access_token); $c->redirect( 'http://localhost:5000/' ); };
Step 9: Let's do something already!
アクセストークンを持っているとAPIへ要求を行うことができます。
vi lib/FacebookAPI/Web/Dispatcher.pm
get '/' => sub { my ($c) = @_; my $data; my $token = $c->session->get('token'); if ( $token ) { # loggedin $c->fb->access_token( $token ); $data = $c->fb->fetch('me/home')->{data}; } $c->render( 'index.tt', { data => $data, } ); };
テンプレートを書きます。
vi tmpl/index.tt
[% WRAPPER 'include/layout.tt' %] <section> [% IF data %] Hi! [% name %]. <section> [% FOR v IN data %] <ul> <li>[% v.created_time %] [% v.from.name %] [% v.message %] </li> </ul> [% END %] </section> <form method="post" action="/account/logout"> <input type="submit" value="logout" class="btn primary" /> </form> [% ELSE %] <a href="/facebook">login</a> [% END %] </section> [% END %]
Step 10: Start the application and let's test this puppy out.
サーバー上で(あなたがapp.psgiのフォルダにいると仮定して)次のコマンドを実行します。
plackup
次に http://localhost:5000/ を表示します。
login リンクをクリックすると認証ページヘ遷移し、
認可すると認証プロセスを経て最終的に自分のニュースフィードが表示されます。
yatta!
*1:秘訣って何…