T.Yokoyamaのブログ: GAE/G＋AngularJSでGoogle+ SignInを利用する（１）

最近、公開されたGoogle+ SignInという、Google+アカウントを利用した認証
サービスを利用してみようと思ってがんばってみました。

Google+ SignInについては以下の記事をご覧ください。
http://googledevjp.blogspot.jp/2013/02/google-sns.html

で、本当は公開されているサンプルを動かせばいいのに、わざわざ苦戦する方向で
試してみました。

事前準備として、APIsConsoleで

Google+ APIをONにする。
ClientIDを作成する。（Web Applicationのものを作成してください。）

ClientIDは削除できないので選択を間違えると、無駄にIDが増えていくことになるので気をつけてください。（リダイレクト先は後でも変更可能です。）

ライブラリが提供されているので、実際にはHTMLだけ作成すればローカルのWebサーバを
経由するだけでGoogle+ SignInボタンは表示されます。

実際にSignInボタンを押すと、プロフィール情報が取得され、ブラウザで表示させる事が
できるようになります。

サンプルコードはgithubで公開しています。
https://github.com/tyokoyama/gplus-signin-sample

単純な例であれば、すぐ作れるようになりますが、私はAngularJSも一緒に使おうとして
だいぶはまりました。（SignIn直後にプロフィール情報を表示させる事は今も解決していません）

最初のSignIn後のリダイレクト先にAngularJSのコントローラの関数を指定できないので
以下のように強引に関数を呼び出すか、

var elem = document.getElementById('viewResult');
angular.element(elem).scope().signIn(authResult);

githubのサンプルコードのように、ボタンを配置してボタンを押した後で
プロフィール情報を取得しにいく。という事なら何とか可能でした。

実際の動きはPHPのQuickstartを見ると良いかもしれません。
（HTMLの部分はjQueryが使われています）
https://developers.google.com/+/quickstart/php

GAE/Gでも、PHPのプロジェクトからindex.htmlだけコピーするだけでも、
プロフィール情報が表示されるようになります。
（適当にAjaxでのリクエストが発生しますが、GAE/G側の実装がなければ404の応答になるだけ）

もうしばらく、いじり倒さないとだめだなと思ったのと、
生産性の低さに嘆く1日でした！

T.Yokoyamaのブログ

2013年3月1日金曜日

GAE/G＋AngularJSでGoogle+ SignInを利用する（１）

関連するGoogle+の投稿

0 件のコメント:

コメントを投稿

フォロワー