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

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

MonacaアプリにJavaScriptだけでFacebook認証を実装する

f:id:mbaasdevrel:20180416173615p:plain

Facebookアプリのシングルサインオンは便利な仕組みですが、Monacaアプリではプラグインを使わなければなりません。そのため、有料プランが必須になります。無料プランで、これからMonacaを触っていこうと考えている方にとっては敷居が高いかも知れません。

そこで今回はJavaScriptだけでNCMBのFacebook認証を実現する方法を紹介します。

ライブラリについて

認証を必要なライブラリは以下の二つです。

  • OpenFB
  • NCMB

今回はその他、UI用にOnsen UIを使っています。

Facebookの設定

Facebookではアプリを作成します。そして、OAuthリダイレクトURIとして https://www.facebook.com/connect/login_success.html を指定します。

f:id:mbaasdevrel:20180417161418p:plain

認証処理について

ログインボタンを押した後の処理を紹介します。全体の流れは次のようになります。OpenFBは作成したFacebookアプリのIDで初期化します。

// ログインボタンを押した時の処理
this.querySelector('#login').onclick = (e) => {
  let response;
  openFB.init({
    appId: localStorage.getItem('facebookAppId')
  });
  facebookLogin()
    .then(authResponse => {
      response = authResponse;
      return facebookMyData();
    }, err => console.error(err))
    .then(user => {
      return facebookLoginWithNCMB(response, user);
    })
    .then((user) => {
      // ログイン完了
      me.querySelector('#loginStatus').innerText = `ログイン完了:${user.objectId}`;
    });
}

f:id:mbaasdevrel:20180417161546p:plain

Facebookログイン

FacebookログインはOpenFBを使うことで、こんな簡単に実装できます。

// OpenFBによるFacebookログイン
const facebookLogin = () => {
  return new Promise((res, rej) => {
    openFB.login(function(response) {
      return response.status === 'connected' ? 
        res(response.authResponse) :
        rej(response);
    }, {scope: 'email'});
  })
}

f:id:mbaasdevrel:20180417161603p:plain

多要素認証にも対応できます。

ユーザIDの取得

認証したらFacebookのユーザIDを取得します。これもOpenFBを使うことで簡単に実現できます。

// FacebookのユーザIDを取得
const facebookMyData = () => {
  return new Promise((res, rej) => {
    openFB.api({
      path: '/me',
      success: function(user) {
        res(user);
      },
      error: function(error) {
        rej(error);
      }
    });
  })
}

NCMBにログイン

認証情報とユーザ情報の二つでNCMBへFacebookログインできるようになります。本来であれば有効期限も必要なのですが、OpenFBでは取得できないので強制的に30日間としています。

// NCMBへFacebookの認証情報でログイン
const facebookLoginWithNCMB = (auth, user) => {
  const expire_date = new Date(2592000 * 1000 + (new Date()).getTime()).toJSON();
  const date = {
    __type: "Date",
    iso: expire_date
  };
  const authData = {
    id: user.id,
    access_token: auth.accessToken,
    expiration_date: date
  };
  return ncmb.User.loginWith('facebook', authData);
};

これで認証したユーザの情報が得られます。

f:id:mbaasdevrel:20180417161629p:plain

まとめ

ソーシャルログインは簡単に実現できます。なお、InAppBrowserを使う関係なのか、毎回認証と多要素認証を行わないといけないようです。通常、認証を何度も繰り返すことはないと思いますが、開発時は面倒に感じられるでしょう。

また、この外部ブラウザを開く方法はデスクトップのブラウザではテストできません。Monacaデバッガーなどを使ってテストしてください。

今回のコードはNCMBMania/MonacaFacebookAuth: MonacaアプリでFacebook認証を行い、その認証データでNCMBへソーシャルログインしますにアップロードしてあります。実装時の参考にしてください。

SNS連携 (Monaca) : Facebook連携 | ニフクラ mobile backend

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。