REST protocolを使って Google Friend Connect をサーバサイドで統合できる雰囲気を確認してみた

おはようございます。なかじまんです。

Google Friend Connect (GFC) というと、ガジェットや JavaScript API といったクライアントサイドの実装を連想することが多いと思いますが、Google Friend Connect APIs は REST protocol にも対応するので、GFC をサーバサイドで統合するという選択もありうるわけです。

そのサーバサイドでの統合がどんな雰囲気になるのか、簡単なサンプルを書いて試してみました。GFC にサインインして VIEWER のプロフィールを取得して表示するというものです。どんな振る舞いをするのか、その動画を用意しました。



ソースコードは、次のとおりです。Aptana Jaxer を使っていますので、runat="server" がサーバサイドのコードです。

<script type="text/javascript" src="/js/jquery.js" runat="both"></script>
<script type="text/javascript" runat="server">
jQuery(function($) {
var fcauth = Jaxer.Util.Cookie.get('fcauth03382920006806842951');
if (!fcauth)
return $('.signin,.signout').toggle();

GFC にサインインすると cookie の "fcauth+サイトID" としてトークンが払い出されます。ですので、サーバサイドでは、この cookie があるかないかで、サインインしているか判断できます。ここでは cookie の有無で、サイインとサインアウトのリンクと切り替えています。

var url = 'http://www.google.com/friendconnect/api' +
'/people/@viewer/@self?' + $.param({ fcauth: fcauth });

VIEWER のプロフィールを取得する URL を組み立てます。このとき fcauth パラメータに、前述の cookie 値を指定します。

var text, person;
try {
text = Jaxer.Web.get(url, { as: 'text' });
person = eval('(' + text + ')').entry;
} catch (e) {
throw new Error(''+e);
}

VIEWER のプロフィールを取得します。JSON 形式のレスポンスをデコードしています。entry がプロフィールになります。

$('#person span').text(person.displayName);
$('#person img').attr('src', person.thumbnailUrl);
$('#person textarea').val(text);
});
</script>

取得したプロフィールから名前とサムネイルを取り出して表示します。あと、デバッグのためレスポンスをそのまま表示しています。

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('friendconnect', '0.8');</script>
<script type="text/javascript">
google.friendconnect.container.setParentUrl('/');
google.friendconnect.container.loadOpenSocialApi({
site: '03382920006806842951',
onload: function() {
if (!window.times)
window.times = 1;
else
window.times++;
if (window.times > 1)
location.reload();
}
});
</script>

GFC のサインインは JavaScript API を使って、クライアントサイドで実現しています。

loadOpenSocialApi は、ウェブページを表示したときや、サインイン、サインアウトなど、GFC アカウントの状態に変化があったとき呼び出されます。ここでは window.times に呼び出された数を記憶しておいて、1回目はウェブページを表示したとき、2回目以降は、サインインまたはサインアウトと判断して、ウェブページをリロードを制御しています。

なお、(試していませんが)GFC の REST protocol は two-legged OAuth も使えます。

<p>
<a class="signin" style="display:none;" href="#signin"
onclick="google.friendconnect.requestSignIn();">Sign in</a>
<a class="signout" href="#signout"
onclick="google.friendconnect.requestSignOut();">Sign out</a>
</p>
<p id="person">
<span></span><br />
<img /><br />
<textarea rows="10" cols="80"></textarea>
</p>

サインインとサインアウトのリンク、VIEWER のプロフィールを表示するタグです。

クライアントサイドとサーバサイドとそれぞれを組み合わせ... といった統合のバリエーションが多数ありうるわけです。複雑すぎやしないかという印象もありますが、ウェブサイトに統合することを前提としたプロダクトであると思えば、結果的にこういう形になるのかなとか、まだまだどう評価してよいか判断できない感じです。