ニフティクラウド 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に詳しい方法が載っていますので、試してみてください。
