ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

JavaScriptでGoogle認証を実装する

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