ニフクラmBaaSお役立ちブログ

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

JavaScript SDKのキッチンシンクアプリを作る【Facebook認証編】

キッチンシンクというのは、何かのフレームワークやライブラリがあった時に、その殆どの機能を体験できる仕組みになります。それがあることでフレームワークの全体像が分かったり、何か開発していて困った時に参考とできるコードになります。

元々MonacaとNCMBではアカウント連携機能があるのですが、NCMBからMonacaへ誘導した際にチュートリアルアプリを表示する機能は約1年ほど前になくなっています。チュートリアルアプリはデータの登録をしたり、写真を表示するアプリでした。つまりデータストアとファイルストアが体験できるというものです。アプリ自体はJavaScript SDKのver.1を使っていましたので、今となっては参考にはしづらいものでした。

この記事では旧チュートリアルアプリに変わるキッチンシンクアプリを作っていきたいと思います。ステップを踏んで紹介していきますので、実際に試す際の参考にしてください。今回は会員管理に続いてデータストアを使ったTodoアプリの作成です。

利用するフレームワーク

今回利用しているフレームワーク、ライブラリは次の通りです。

  • Onsen UI
  • Monaca CLI
  • NCMB
  • Bower

今回はOnsen UIをjQueryから使う形で進めています。ライブラリはBower経由でインストールしています。アプリのプレビュー表示を行うのに便利なのがMonaca CLIになります。インストールは Node.js をインストール後、 npm コマンドで行えます。

$ npm i monaca -g

ベースのコード

今回はNCMBMania/kitchensink-monaca: MonacaとJavaScript SDKを使ったキッチンシンクアプリです。にコードをアップロードしてあります。こちらを参考にしてください。ベースはOnsen UI V2 JS Navigationとなっています。

Facebook側での準備

Facebookアプリを作った後、Facebookログインを追加してください。その設定の中にある有効なOAuthリダイレクトURIとして「https://www.facebook.com/connect/login_success.html」を指定してください。

変更点について

JavaScript SDKだけではサーバレスなFacebook認証に対応していません。そこで代替になるライブラリのOpenFBを設置します。このライブラリはFacebookが用意しているコールバックURLへの転送に対応しています。まずOpenFBを使って初期化します。YOUR_FBAPP_IDは自分のものに読み替えてください。

var appId = 'YOUR_FBAPP_ID';
openFB.init({
  appId: appId,
  oauthRedirectURL: 'https://www.facebook.com/connect/login_success.html'
});

そしてログインボタンが押さえたタイミングでOpenFBを使って認証処理を行います。

openFB.login(function(response) {
  if (response.status === 'connected') {
  }else {
    return;
  }
  var authResponse = response.authResponse;
  var expire_date = new Date(
    authResponse.expires_in * 1000 + (new Date()
  ).getTime()).toJSON();
  var date = {__type:"Date", iso: expire_date};
  myInformation()
    : (省略)
});

myInformationの内容は次のようになります。自分の情報を取得し、Promiseとして返します。

var myInformation = function() {
  return new Promise(function(res, rej) {
    openFB.api({
      path: '/me',
      params: {
        fields: 'id,name'
      },
      success: function(response) {
        res(response);
      },
      error: function(response) {
        rej(response);
      }
    })
  });
}

myInformationの結果を受け取った後は次のように処理されます。

myInformation()
  .then(function(userData) {
    var user = new ncmb.User();
    user.signUpWith('facebook', {
      authData: {
        id: userData.id,
        access_token: authResponse.access_token,
        expiration_date: date
      }
    })
    // Facebookを使った会員登録処理完了
    .then(function(user) {
      return ncmb.User.loginWith(user);
    })
    // 会員登録処理失敗
    .catch(function(err) {
      console.log(err);
    })
    .then(function(user) {
      showDialog('ログイン完了', 'ログインしました');
      $('.member_login_status').text(user.userName);
      $('#navigator')[0].popPage();
    });
  }, function(err) {
    // Facebook側のエラー
    console.log(err);
  })

このようにしてMonaca/Cordovaアプリでも認証処理ができるようになります。なお、この認証処理はMonaca/Cordovaでしか動きませんので注意してください。通常のWebブラウザでは動作しません。


コードはNCMBMania/kitchensink-monaca: Monaca と JavaScript SDKを使ったキッチンシンクアプリです。にアップロードしてあります。Monacaアプリとして動かすこともできますのでぜひお試しください。