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

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

Facebook SDKのシングルサインオンを使ってMonacaアプリでログインする

f:id:mbaasdevrel:20180416173615p:plain

mBaaSではソーシャル連携サービスとして、各種SNS(Facebook、Twitter、Google+)でログインする機能があります。通常、MonacaアプリではJavaScript SDKを使うのですが、標準で提供されているJavaScriptのFacebook SDKはサーバサイドを想定しており、ログインに使えません。

解決する方法としてFBopenを使ってWebViewで認証する方法がありますが、これは毎回ID、パスワードを入力する手間があります。Facebookアプリを使っているのであれば、そちらの認証情報が使いたいと思うでしょう。

それを可能にするCordovaプラグインがjeduan/cordova-plugin-facebook4: Use the latest Facebook SDK in your Cordova and Ionic projectsになります。今回はこのプラグインを使ってmBaaSの認証を行う方法を紹介します。なお、独自プラグインになりますのでMonacaのゴールドプラン以上が必要です。

今回はiOSで行っています。iOSの場合、プロビジョニングプロファイルが必要になります。あらかじめ取得しておいてください。

Facebookアプリの登録

Facebookアプリは開発者向けFacebookで登録します。Facebookアプリを登録後、プラットフォームとしてiOSを追加します。その際、バンドルIDの設定と、シングルサインオンを有効にしてください。

f:id:mbaasdevrel:20180416173917p:plain

プラグインのインストール

プラグインは Monaca IDE上でcordova-plugin-facebook4を指定するか、Zipファイルとしてダウンロードした上でMonaca IDEにてアップロードします。

コード

認証するためのコードはとても簡単です。一つ目の引数がパーミッション、二つ目が処理成功時のコールバック、そして三つ目がエラー時のコールバックになります。

利用できるパーミッションはリファレンス - Facebookログインにて確認してください。

facebookConnectPlugin.login(
  ['email', 'public_profile'],
  (success) => res(success),
  (error) => rej(error)
)

mBaaSの認証データにする

処理成功時のレスポンスのauthキーに必要な情報が揃っています。ただし有効期限だけはタイムスタンプから変換する必要があります。

const auth = res.authResponse;
const expire_date = new Date(auth.expiresIn * 1000 + (new Date()).getTime()).toJSON();
const date = {
  __type: "Date",
  iso: expire_date
};

後はアクセストークンなどの必要な情報も集めてJSONにします。

const authData = {
  id: auth.userID,
  access_token: auth.accessToken,
  expiration_date: date
};

認証する

後はNCMBのJavaScript SDKが提供する User.loginWith メソッドを使います。

ncmb.User.loginWith('facebook', authData)

この処理はPromiseを返しますので、then/catchを使って成否判定を行います。

f:id:mbaasdevrel:20180416174102g:plain

まとめ

こうした処理を記述することで、Facebookアプリを使っていればタップだけで認証処理が完了します。ID/パスワードの入力はもちろん、多要素認証の数字を入れたりする必要もありません。プラグインを使う必要はありますが、慣れればとても簡単にFacebook認証が可能になるでしょう。

ぜひ皆さんのアプリで使ってみてください。

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