こんばんは, ritouです。
GoogleがOAuth 2.0対応のAPIを出していることは既に知られているかと思います。
今回のGoogle I/O、Google+プラットフォームがモバイル向けに進化したとブログに書かれていたのを見ました。
Google+ Platformがモバイルに進出します
何が提供されたのか
ここにあります。
Google+ Platform | Google Developers
- Easy sign up and sign in : G+でログイン的なボタン. OAuth認証！
- Be shared and discovered : G+でシェアする的なボタン
- Get recommended : +1的なボタン
- Become part of history : G+ History APIってのが使えるよ
- Build in personalization : これらのG+APIを使ってあなたのアプリにパーソナライズしてほげほげ
- 1がなぜレコメンド？についてはこちらの記事で説明されていますね。
Google+1ボタンが設置サイトのお薦めコンテンツを表示する機能を実装 | Token Spoken
History APIについてはこちらの記事で説明されていますね。
その新しいAPIはGoogle+ヒストリーAPIと言い、なんとGoogle+だけではなく、他のSNSやソーシャルメディア、モバイルサイトから串刺しで自分の投稿や写真、チェックインなどの情報をGoogle+に取り込み、アーカイブしたりストリームに共有したり出来るというかなり強力なものとなるようです。
Googleが全てのSNSにおける過去のアクティビティをGoogle+に統合するためのヒストリーAPIをプレビュー公開 | Token Spoken
日本語で言うと行動履歴なんとかって感じでしょうか。
Android/iOSの実装に関してはこの週末にがんばって実装してみる方もいらっしゃると思いますので、私はMobile Webと書かれている部分に注目しました。
シェアとボタンが、簡単に使えるようになり、G+アカウントでログインとHistory APIをOAuthで提供するという感じに見えます。
G+でシェアボタンつけてみる
Share | Google+ Platform for Web | Google Developers
これは簡単。JS呼び出してあとはDivタグとかで設置可能です。
ここのページでURLとか細かい設定を選択すると動的にタグを作ってくれます。
+1ボタンつけてみる
これも簡単。JS呼び出して(ry
G+でログインを実装して、History APIを使ってみた
ここが今回のメインです。
いくつか、準備が必要です。
- Google Developer PreviewにJoinする(しないとHistory API使えない)
- Developer ConsoleからClientを登録する
- サービスでG+ APIとG+ History APIを利用するように設定する
ここまでの手順はドキュメントに書いてあります。
次に、実装になります。
OAuth 2.0で実装するわけですが、今回はAuthrization code grant, ドキュメント上ではServer-side flowと書かれている方を実装します。
Client-side flowと書かれているImplicitの方も興味深い実装になっているので別途まとめる予定です。
実装にあたり、Pythonのサンプルが提供されていました。
GAE使えばすぐ動きそうな構成になっていましたが、今回は使いません。
そのPythonのサンプルをphpで書き換えて、試せる環境を用意しました。
http://www8322u.sakura.ne.jp/php-gplus-mobile/index.php
シェアボタン、＋１ボタンもつけています。
上の方にも書いたDeveloper PreviewにJoinしているかつそのユーザーでログインしていないとサインインボタンが見えず、試せないので注意が必要です。
1. JSを使ってボタンを生成＋クリックするとポップアップ！
OAuth 2.0のAuthorization Requestの生成時に、Googleが提供するJSを利用することで"G+でサインインボタン"が表示できます。
ドキュメントにはこう書いてあります。
<!-- Place this tag where you want the sign-in button to render -->
<g:plus action="connect"
clientid="{CLIENT_ID}" state="{STATE}" redirecturi="{REDIRECT_URI}"
callback="{CALLBACK_FUNCTION}"></g:plus>
<!-- Place this asynchronous JavaScript just before your </body> tag -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>1点、気を付けなければいけないのは、このまま利用するとG+ APIしかScopeが指定されません。
ユーザーが同意して最終的に受け取ったAccess TokenではG+ History APIを利用できないので、このJSを利用するときにscopeの部分を少し変える必要があります。
<!-- Place this tag where you want the sign-in button to render -->
<g:plus action="connect"
clientid="{CLIENT_ID}" state="{STATE}" redirecturi="{REDIRECT_URI}"
scope="https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/plus.moments.write"
callback="{CALLBACK_FUNCTION}"></g:plus>
<!-- Place this asynchronous JavaScript just before your </body> tag -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>よく見たら下の方に細かい指定が書いてありました。
The https://www.googleapis.com/auth/plus.me scope, which provides access to your user's identity on Google+, is implicitly included. You do not need to specify it.
You must specify https://www.googleapis.com/auth/plus.moments.write here to write moments with the history API.
Google+ Platform | Google Developers
これでボタンをクリックするとポップアップで同意画面が表示されます。
2．redirect_uriでAuthorization Codeを受け取りAccess Tokenを取得
OAuth 2.0のフローに従い、Clientはクエリパラメータで受け取ったcodeパラメータを利用して、Access Tokenなどを取得します。
(ID厨的に注目したいのは、Access Tokenと一緒にid_tokenが取得できることです。
これはOpenID Connectで定義されているものであり、特にImplicitのToken置き換え攻撃への対策などでも注目されている機能です。
このID Tokenのハンドリング等についてはもう少し調べて別途まとめますので、今回は割愛します。)
3. G+ APIをたたいてプロフィールデータを取得
Access Tokenを付けて下記のURLにGETでアクセスすることでG+のプロフィールデータを取得できます。
デモでは"Logged in as (displayName)"のように利用しています。
4. G+ History APIをたたいてmomentを送信
History APIに"moment"と呼ばれるアクティビティをPOSTで送ることで、G+ Historyに書き込まれます。
もちろんAccess Tokenが必要です。
momentにはいくつか種類があります。説明はここにあります。Google+ Platform | Google Developers
デモにもサンプルmomentとしてたくさんのmomentが用意されているので、これからポチポチ試して理解しようと思います。
デモではCustom momentとして自分で送る内容を指定できます。
今回は、サンプルではなく実際のYouTubeのvideoを見ましたよというmomentを書き込みます。
targetはViewActivity, URLにYouTubeのURLを指定します。
Google+ Platform | Google Developers
{
"type":"http://schemas.google.com/ViewActivity",
"target":{
"url":"http://www.youtube.com/watch?v=1ktA4cYz1F4&feature=relmfu"
}
}
このAPIをたたいた後に、G+のHistoryページで確認します。
https://plus.google.com/history
出てますね。
ここまででG+ History APIの使い方は終わりです。
モバイルって書いてあったけど今回試した機能はPC側でも普通に便利でした(サンプルも普通にPC用だし)。
OAuth 2.0の機能さえ理解できればHistory APIも利用自体は簡単なので、開発者は注目していくべきだと思います。
ID厨的なネタとしては、Client-side flow(Implicit)のあたりとID Tokenの扱いについてもう少し調べてまとめる予定です。
ではまた！
