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

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

Parse ServerでFacebook認証を行う

NCMBは2024年3月末をもって終了します

Parse ServerはオープンソースのmBaaS(mobile Backend as a Service)です。NCMBと仕組みが似ており、移行先としてお勧めしています。自分で立てるか、Parse Serverのクラウドサービスも利用できます。

Parse Serverでもソーシャル認証を提供しており、Facebook認証も利用できます。本記事では、Parse ServerでFacebook認証を行う方法を紹介します。

Facebookアプリの作成

Meta for Developersにて、Facebookアプリを作成します。アプリの作成は、こちらを参照してください。

また、Facebook Loginを有効にして以下の2つの設定を取得しておきます。

  • App ID
  • App Secret

Parse Serverの設定

このFacebook認証の設定は、環境変数では設定できません(2023年12月現在)。 本来であれば PARSE_SERVER_AUTH_PROVIDERS に設定すれば良いのですが、設定しても思った通りに適用されなかったので、注意してください。

そこで、Parse Serverの起動用JSONファイルで設定します。

{
  "appId": "appId",
      : 省略
  "auth": {
    "facebook": {
      "appIds": ["アプリID"],
      "enabled": true,
      "appSecret": "アプリシークレット"
    }
  }
}

これで準備完了です。

Facebook認証の実装

次はクライアント側の実装です。以下はJavaScript SDKを利用した例です。

ファイルの読み込み

Parse ServerとFacebook SDKを読み込みます。

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<script src="https://npmcdn.com/parse@4.3.1/dist/parse.min.js"></script>

Parse ServerとFacebook SDKの初期化

次にParse ServerとFacebook SDKを初期化します。Facebook SDKの初期化は、window.fbAsyncInit に記述します。

const FACEBOOK_APP_ID = 'YOUR_FACEBOOK_APP_ID';

const PARSE_SERVER_URL = 'https://YOUR_DOMAIN/parse';
const PARSE_JAVASCRIPT_KEY = 'YOUR_JAVASCRIPT_KEY';
const PARSE_APP_ID = 'YOUR_APP_ID';

Parse.initialize(PARSE_APP_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = PARSE_SERVER_URL;

window.fbAsyncInit = function() {
    Parse.FacebookUtils.init({
        appId: FACEBOOK_APP_ID,
        status: true,
        cookie: true,
        xfbml: true,
        version: 'v2.3',
    });
};

認証処理

認証はログイン、新規登録ともに同じコードで行います。 Parse.FacebookUtils.logIn を呼び出すだけです。

document.querySelector('#facebook-login').addEventListener('click', async () => {
    const user = await Parse.FacebookUtils.logIn("email,public_profile");
    console.log(user);
});

他の言語での実装

他のSDKでの実装については、下記を参照してください。

データについて

ユーザーのデータは _User クラスに保存されます。また、Facebookに関する情報は authData に保存されます。この辺りはNCMBと同じです。

Parse Serverのデータ

{
  "facebook": {
    "id": "10156590592258454",
    "access_token": "EAA...R8G",
    "expiration_date": "2024-02-20T09:08:34.882Z"
  }
}

NCMBのデータ

{
  "facebook":{
    "id":"10156590592258454",
    "access_token":"EAA...MZD",
    "expiration_date":{
      "__type":"Date",
      "iso":"2023-06-22T09:02:36.980Z"
    }
  }
}

データの違い

Parse Serverでは、 expiration_date が日付の文字列で保存されています。一方、NCMBでは __typeiso に分かれて保存されています。

まとめ

Parse ServerでFacebook認証を行う方法を紹介しました。Parse Serverは、NCMBと仕組みが似ているため、移行先としてお勧めしています。移行に伴う変更量が、他のサービスと比べて少なく済むはずです。

ソーシャル認証は設定なども必要で、Parse Serverのドキュメントにも詳しくは記載されていませんでした。もし利用される場合には、本記事を参考にしてください。

中津川 篤司

中津川 篤司

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