Perl勉強メモ　アルパカDiary出張版

Amon2でFacebookAPIを使う　その１

Amon2, Facebook | 21:59 |

FacebookAPIを使う要件が出てきそうなのでいろいろ調査中。

perlでFacebookAPIを使うにはFacebook::Graphがいいんでしたよね！

Facebook::Graphのドキュメントにちょうどチュートリアルがあったので

試しに今回はその手順通りに設定していきたいと思います。

ただしそのままではなく一部Amon2用に置き換えてます。

また、今回は表示するデータを自分のニュースフィードにしてみました。

あと、Facebook アプリ登録画面ってログインするたびちょこちょこ変わってて

他のサイトの設定画面が参考にならなかったりするので

スクリーンショットも添付してみましょう。

Step 1: Set up the developer application on Facebook.

https://developers.facebook.com/ に行きます。

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!

コード

今回書いたコードをgithubに上げておきました。

https://github.com/toritori0318/Amon2-Facebook-Sample1

その２へ続く。。。

ツイートする