GITkitを使ってみる Part1

GDD2011のBreakoutセッションでOAuth2.0やOpenIDなどのユーザ認証に関する内容がありました。

Google Developer Day 2011 Japan: 「データアクセスと本人認証のための OAuth と OpenID」

OAuth2.0をとても分かりやすく (日本語で！) 説明しているセッションです。興味のある方はぜひ見てみて下さい。
このセッションの中で触れられていたものに、Account ChooserやGITkitというものがありました。OAuth2.0を使ったユーザ認証を行う場合の、最新のユーザインターフェイスとのこと。
結構いい感じのUIだったので、ぜひとも試してみたいと感じていました。・・・で今回App Engineを使って手を付け始めたわけです。

参考にしたサイトはこちら。
Google Identity Toolkit

少しずつ進めていきたいと思います。

とりあえず表示してみる

感じをつかむだけであれば、こちらのサイトが秀逸です。

Basic Demo Store
Demo RP Site using GIT

どちらも左上のSign inボタンを押すとAccount Chooserを見ることが出来ます。

ではこのUIを自分のアプリで実現します。とりあえず表示するだけなら、結構簡単に出来ます。

API ConsoleでGITkit用のプロジェクトを作成
GITkitプロジェクトで生成されたスクリプトをHTMLファイルにコピペ

表示するだけならほんと簡単です。でも実際にユーザ認証する場合はもうちょっと面倒です。

私が実験したコードはこんな感じ。

# -*- coding: utf-8 -*-
from google.appengine.ext import webapp
from google.appengine.ext.webapp import template
from google.appengine.ext.webapp.util import run_wsgi_app

import os

class MainPage(webapp.RequestHandler):
    def get(self):
        path = os.path.join(os.path.dirname(__file__), "login.html")
        self.response.out.write(template.render(path, {}))

application = webapp.WSGIApplication([('/', MainPage)], debug=True)

def main():
    run_wsgi_app(application)

if __name__ == "__main__":
    main()

単にHTMLファイルを返しているだけのアプリです。HTMLファイル (テンプレート) はこんな感じ。

<!doctype html>
<html lang=en>
    <head>
        <meta charset=utf-8>
        <title>GITkit使ってみる！</title>
        
        <!-- ここからAPI Consoleで自動生成されたスクリプト -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/googleapis/0.0.4/googleapis.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/jsapi"></script>
        <script type="text/javascript">
            google.load("identitytoolkit", "1", {packages: ["ac"], language:"ja"});
        </script>
        <script type="text/javascript">
        $(function() {
            window.google.identitytoolkit.setConfig({
                developerKey: "ここにAPIキーが入ります",
                companyName: "Hogehoge",
                callbackUrl: "http://localhost:8080/callback",
                realm: "",
                userStatusUrl: "/userStatus",
                loginUrl: "/login",
                signupUrl: "/signup",
                homeUrl: "/home",
                logoutUrl: "/signout",
                idps: ["Gmail", "Yahoo"],
                tryFederatedFirst: true,
                useCachedUserStatus: false
            });
            $("#navbar").accountChooser();
        });
    </script>
    <!-- ここまでAPI Consoleで自動生成されたスクリプト -->

    </head>
    <body>
        <div id="navbar">ログイン</div>
    </body>
</html>

↑中の

<div id="navbar">ログイン</div>

で例のボタンが表示されます。
各種URLのハンドラを設定する必要がありますが、とりあえず表示するのであればこれでOK。早速実行してみます。

すかさずログインボタンを押してみます。

おぉ〜出た出た。めでたしめでたし。
次は各種URLハンドラを実装してみます。