Facebookアプリのシングルサインオンは便利な仕組みですが、Monacaアプリではプラグインを使わなければなりません。そのため、有料プランが必須になります。無料プランで、これからMonacaを触っていこうと考えている方にとっては敷居が高いかも知れません。
そこで今回はJavaScriptだけでNCMBのFacebook認証を実現する方法を紹介します。
ライブラリについて
認証を必要なライブラリは以下の二つです。
- OpenFB
- NCMB
今回はその他、UI用にOnsen UIを使っています。
Facebookの設定
Facebookではアプリを作成します。そして、OAuthリダイレクトURIとして https://www.facebook.com/connect/login_success.html を指定します。
認証処理について
ログインボタンを押した後の処理を紹介します。全体の流れは次のようになります。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}`; }); }
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'}); }) }
多要素認証にも対応できます。
ユーザ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); };
これで認証したユーザの情報が得られます。
まとめ
ソーシャルログインは簡単に実現できます。なお、InAppBrowserを使う関係なのか、毎回認証と多要素認証を行わないといけないようです。通常、認証を何度も繰り返すことはないと思いますが、開発時は面倒に感じられるでしょう。
また、この外部ブラウザを開く方法はデスクトップのブラウザではテストできません。Monacaデバッガーなどを使ってテストしてください。
今回のコードはNCMBMania/MonacaFacebookAuth: MonacaアプリでFacebook認証を行い、その認証データでNCMBへソーシャルログインしますにアップロードしてあります。実装時の参考にしてください。