mixiページアプリとOAuthの関係

2012/01/05

■mixiページアプリとOAuthの関係

こんばんは、ritouです。

今年もがんばりましょう。

mixiページアプリをご存知でしょうか？

上記リンクを見た限り、こんな感じでしょうか。

mixiページ内でiframe使って表示
Page/pageApp APIやそれ以外のMixi Graph APIも利用できる
公開申請して通ればいろんなmixiページにあなたのmixiページアプリが使われるかも！

このmixiページアプリを作ってみたところ、みんな大好きなOAuthがふんだんに使われていますので今回はしくみとOAuthの使われどころを紹介します。

試しに作ってみた

とりあえず何か作りたいなと思ったので、簡単な拡散用のページアプリを作成してみました。その名も「拡散希望」。

mixiページ名とURLを取得
mixiボイスを投稿することで友人に拡散
Facebookのいいね！やTwitterに書き込むことでmixiの外にも拡散

開発中のステータスにあるmixiページアプリは、自分が管理しているページにしか入れられず、しかも管理者しか利用できない(見えない)ので、URLをさらしてもどうにもなりません。

最初にmixiページアプリを選択して起動したときの画面はこちら。

ここでやっていることを紹介します。

起動時 : 署名付きリクエストを処理

起動時にOAuth 1.0系の署名付きのリクエストが送られます。mixiアプリと同じですね。

署名付きリクエストの検証 << mixi Developer Center (ミクシィデベロッパーセンター)を参考にして、OAuth::Lite::ServerUtilを用いて検証しました。

このOAuth::Lite、便利ですね。

PC用とスマートフォン用でRSAの公開鍵が違うのでxoauth_signature_publickeyパラメータなどで判定するのがよさそうです。

sub validate {
    my $req = shift;

    if ( $req->param('xoauth_signature_publickey') and $req->param('oauth_signature') ) {

        my $method = $req->method;
        my $url = $req->uri;
        my $params = $req->params;

        my $util = OAuth::Lite::ServerUtil->new();
        $util->support_signature_method('RSA_SHA1');

        my $ca = ( substr($req->param('xoauth_signature_publickey'), 0, 7) eq 'page_pc' ) ? $mixi_ca_pc : $mixi_ca_touch;
        $public_key = Crypt::OpenSSL::CA::X509->parse($ca)
                      ->get_public_key()
                      ->to_PEM();

        my $ret = $util->verify_signature(
                      method          => $method,
                      url             => $url,
                      params          => $params,
                      consumer_secret => $public_key,
                  );
        return $ret;
    }else{
        return 0;
    }
}

githubソース : lib/MixiPageApp1/OAuthUtil/SignedRequest.pm at master from ritou/p5_MixiPageApp1_sample - GitHub

署名検証後 : mixiページの情報を取得

mixiページから送られてたリクエストだということが確認できた後は、ページの情報を取得します。

ユーザーの認可が不要な、いわゆる2leggedな処理になります。

このとき、OAuth 2.0のClient Credentialsの仕様に沿ってAccess Tokenを取得して、Page APIにアクセスする必要があります。

OAuth::Lite2::Client::ClientCredentialsを使うと簡単です。

このOAuth::Lite2、便利ですね。作った人すごいですね！

sub get_from_clientcredentials {
    my $config = shift;

    my $client = OAuth::Lite2::Client::ClientCredentials->new(
        id               => $config->{client_id},
        secret           => $config->{client_secret},
        access_token_uri => q{https://secure.mixi-platform.com/2/token} 
    );

    my $access_token = $client->get_access_token() or return '';

    return $access_token;
}

githubソース : lib/MixiPageApp1/OAuthUtil/AccessToken.pm at master from ritou/p5_MixiPageApp1_sample - GitHub

あとはリソースアクセスです。

ページ基本情報を取得するAPIの仕様はこちら : Page API << mixi Developer Center (ミクシィデベロッパーセンター)

sub get_page_info{
    my ($access_token, $page_id) = @_;

    # build request
    my $endpoint = sprintf(q{https://api.mixi-platform.com/2/pages/%s}, $page_id);
    my $req = HTTP::Request->new( GET => $endpoint );
    $req->header( Authorization => sprintf(q{OAuth %s}, $access_token) );

    # get response
    my $res = LWP::UserAgent->new->request($req);
    return decode_json($res->content);
}

githubソース : lib/MixiPageApp1/OAuthUtil/Resource.pm at master from ritou/p5_MixiPageApp1_sample - GitHub

レスポンスからidとdisplayNameを取り出せば拡散用のURLが作れそうです。あとはテンプレートに渡してFacebookやTwitterのJSをごにょごにょすれば外への拡散リンクが作成できますね。

ボイス投稿準備その1 : ユーザーに対してプロフィールデータ取得とボイス投稿の認可を要求

プロフィール情報の取得とボイス投稿をするためには、OAuth 2.0の認可要求が必要です。

これはJavaScriptが用意されているのですが、mixiページを表示したらみんなに強制的にPermisionくれくれするのもあれかなと思い、ボタン押したら同意画面出てくるようにしました。

いい感じで認可画面が表示されます。

JavaScriptの仕様 : JavaScript API << mixi Developer Center (ミクシィデベロッパーセンター)

githubソース : root/base/Root.tmpl at master from ritou/p5_MixiPageApp1_sample - GitHub

ボイス投稿準備その2 : OAuth 2.0 Webserver Flowのcallback処理したらAPIアクセスの準備完了

戻り先を用意しておきます。(/Authorization/callbackとか)

ここではOAuth::Lite2::Client::WebServerを使ってAccess Tokenの取得まで行います。

このOAuth::Lite2、便利ですね。作った人すごいですね！こういう人の隣の席とかで働けたら幸せですね！

sub get_from_authorizationcode {
    my ($config, $code) = @_;

    my $client = OAuth::Lite2::Client::WebServer->new(
        id               => $config->{client_id},
        secret           => $config->{client_secret},
        authorize_uri    => q{https://mixi.jp/connect_authorize.pl},
        access_token_uri => q{https://secure.mixi-platform.com/2/token} 
    );

    my $access_token = $client->get_access_token(
        code         => $code,
        redirect_uri => $config->{redirect_uri}
    ) or return '';

    return $access_token;
}

githubソース : lib/MixiPageApp1/OAuthUtil/AccessToken.pm at master from ritou/p5_MixiPageApp1_sample - GitHub

あとはボイスへの投稿ですね。

sub post_voice{
    my ($access_token, $message) = @_;

    # build request
    my $endpoint = q{https://api.mixi-platform.com/2/voice/statuses/update};
    my $req = HTTP::Request->new( POST => $endpoint );
    $req->header( Authorization => sprintf(q{OAuth %s}, $access_token) );
    $req->content_type('application/x-www-form-urlencoded');
    $req->content('status='.uri_escape($message));
    	
    # get response
    my $res = LWP::UserAgent->new->request($req);
    return decode_json($res->content);
}