ニフティクラウド mobile backendでは会員管理機能を提供しています。一般的なユーザIDとパスワードの組み合わせの他、メールアドレスとパスワードであったり、Twitter/Facebook/Googleといったソーシャルログインもサポートしています。
今回はその中の一つ、Google認証についてJavaScript SDKで実装してみたいと思います。
Googleの準備
Google Developer Consoleにアクセスして新しいプロジェクトを作成します。
作成したら、Google+ APIを有効にします。
次にCredentialsを表示して、新しいOAuth 2.0クライアントを作成します。種類はWebアプリケーションとします。
そして、リダイレクトのURLを自分で設置するHTTPサーバのアドレスに指定し(例えば http://localhost:8000/redirect.html )、最後にClient IDをコピーしておきます。
mBaaSの準備
mBaaSで新規アプリを作成後、アプリ設定>SNS連携>Google連携のところにあるGoogle Client IDに先ほどGoogle Developer Consoleで作成したClient IDを貼り付けてください。また、Google連携の許可を忘れずに許可するとしておいてください。
HTMLファイルの準備
まず必要なライブラリをBowerを使って準備します。
bower install jquery bower install hello bower install ncmb
jQueryは必須ではありません。helloはOAuth 2.0の処理を簡単にしてくれるライブラリです。
index.htmlを作成し、内容を次のようにします。apikeyとclientkeyはmBaaSの管理画面にて取得してください。
<!DOCTYPE html> <html> <head> <title>Google Login JavaScript Example</title> <meta charset="UTF-8"> </head> <script src="bower_components/ncmb/ncmb.min.js"></script> <script src="bower_components/hello/dist/hello.all.min.js"></script> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script> var apikey = "YOUR_APPLICATION_KEY"; var clientkey = "YOUR_CLIENT_KEY"; var ncmb = new NCMB(apikey, clientkey); </script> <script src="app.js"></script> <body> <div class="login">ログイン</div> <div class="logout">ログアウト</div> <div id="status"></div> </body> </html>
さらに redirect.html を次の内容で作成します。
<html> <head> <title>Hello, redirecting...</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> </head> <body> <div class="loading"><span>•</span><span>•</span><span>•</span></div> <h2>Please close this window to continue.</h2> <script> window.onbeforeunload = function(){ document.getElementsByTagName('h2')[0].innerHTML="Redirecting, please wait"; } </script> <script src="bower_components/hello/dist/hello.all.min.js"></script> </body> </html>
最後にapp.jsを作成します。まずイベントのハンドリング部分だけ紹介します。
hello.init({ google: 'YOUR_GOOGLE_CLIENT_KEY' }, {redirect_uri: 'redirect.html'}); $(function() { // ログイン処理 $(".login").on("click", function(e) { e.preventDefault(); hello('google').login(); }); // ログアウト処理 $(".logout").on("click", function(e) { e.preventDefault(); hello('google').logout().then(function() { $("#status").html("ログインしていません"); }); }); // ログインしている時に呼ばれるイベント hello.on('auth.login', function(auth) { hello('google').api('me').then(function(json) { auth.authResponse.userId = json.id; statusChangeCallback(auth); }, function(e) { alert('Whoops! ' + e.error.message); }); }); });
hello.on('auth.login')
ではログインしている場合に限って自分の情報を取得し、Google+上のIDを取得しています。このためにGoogle+ APIの許可が必要になります。そして mBaaSのログイン処理を行う statusChangeCallback を実行しています。
function statusChangeCallback(response) { auth = response.authResponse; var expire_date = new Date( auth.expires_in * 1000 + (new Date()).getTime()).toJSON(); var date = {__type:"Date", iso:expire_date}; // Date型を保存できる形式に成型 var authData = {id:auth.userId, access_token:auth.access_token, expiration_date:date}; var user = new ncmb.User(); user.signUpWith("google", authData) // ユーザの登録 .then(function(user){ return ncmb.User.loginWith(user); // SNS連携したユーザでログイン }) .then(function(user){ // ログイン後処理 $("#status").html("ログイン中"); }) .catch(function(err){ // エラー処理 }); }
この処理についてはFacebook認証と殆ど変わりません。signUpWithの引数がgoogleになったくらいです。
これで処理が完成になります。ログインをクリックすると別ウィンドウが開いて認証を実行し、認証が完了するとmBaaSの管理画面に新規ユーザが登録されているはずです。
ソースコードはmoongift/NCMBGoogleAuthJSにありますので参考にしてください。また、詳細な使い方についてはSNS連携 (JavaScript) : Google連携 | ニフティクラウド mobile backendを参照してください。
なお、このままの実装だとMonacaアプリでは使えません(HTTPサーバが立っている訳ではないので)。そこでInAppBrowserと組み合わせる方法があります。android - How to use Google Login API with Cordova/Phonegap - Stack Overflowに詳しい方法が載っていますので、試してみてください。