0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ニフクラ mobile backendを拡張するNCMBプロキシを開発中です(Facebook認証)

Last updated at Posted at 2023-02-23

ニフクラ mobile backendでは認証やデータストア(クラウドデータベース)、ファイルストア(ファイルストレージ)、プッシュ通知など様々な機能があります。そして、サーバーレスで拡張できるスクリプト機能もあります。

しかし、実際のアプリ要件は多彩で、場合によっては他にも様々な機能が望まれます。すべての需要を満たすのは困難な場合もあります。そこで、NCMBのフロントとして動作するプロキシソフトウェアを開発中です。

このプロキシを使うことによって、小さなニーズはプロキシ側で実装できるようになります。今回はプロキシによるFacebook認証機能を紹介します。

追加する機能(予定)

現状は透過的なプロキシ + リアルタイム通知くらいしかありませんが、以下のような機能を実装する予定です。

  • 認証をJSON Web Tokenに
  • GitHub認証
  • ソーシャル認証(標準ではサーバー認証が必要ですが、プロキシだけで認証できるように)
  • Webhooks
  • 署名なしでデータストア操作
  • 全リクエストログ記録

他にもデータストアの集計機能、GraphQL機能なども追加できると便利そうです。なお、Webhooksなどの機能はプロキシ経由でしか実現できませんので注意してください(管理画面で操作しても実行されません)。

NCMBのFacebook認証の課題

NCMBで標準提供されているFacebook認証は以下の課題があります。

  • 有効期限をNCMBの日付フォーマットに合わせて作成する必要がある

Facebook認証は外部サーバー不要ですが、Monacaアプリの場合にはInAppBrowserで外部JavaScriptをインジェクションするなど、多少面倒な仕組みが必要です。

また、有効期限をNCMBの日付フォーマットに合わせる必要があり、多少面倒です。

そうした点をプロキシサーバーでは解決できます。

インストール

NCMBMania/ncmb-proxyのリポジトリをクローンします。

git clone git@github.com:NCMBMania/ncmb-proxy.git

ライブラリをインストールします。

npm i

設定の編集

setting.example.yml をコピーして setting.yml を作成します。そして、ファイル内にあるアプリケーションキー、クライアントキーをそれぞれお持ちのものに書き換えてください。

applicationKey: YOUR_APPLICATION_KEY
clientKey: YOUR_CLIENT_KEY

サーバーを起動

サーバーを起動する際には、以下のコマンドを実行します(まだ開発中なので、開発用サーバーが立ち上がります)。

npm run dev

例えばローカルの場合、 http://localhost:3000 にてサーバーが立ち上がります。

デモ

デモサーバーを https://ncmb.moongift.dev で立ち上げてあります。これを実際に使っているデモをこちらに立ち上げています

使い方

設定の追加

settings.yaml に以下の項目を追加してください。これらはFacebook管理画面で取得できます(コールバックURLは自分で設定します。開発モードであればlocalhostが利用できます)。

facebook:
  callbackUrl: コールバック用のURL
  appId: "FacebookアプリID"
  appSecret: "Facebookアプリのシークレット"

クライアント側の変更

以下はJavaScript SDKでの実装です。新しいウィンドウを (プロキシサーバーのURL)/auth/facebook で開きます。

document.querySelector('#btn').addEventListener('click', async (e) => {
  window.open(`https://${fqdn}/auth/facebook`);
});

そして、windowのイベントリスターでmessageを受け取ります。この内容をNCMB.Userオブジェクトに適用し、 loginWith で認証し、ローカルに認証データを保存します。

window.addEventListener('message', async function (e) {
  const user = new ncmb.User;
  for (const key in e.data) {
    user.set(key, e.data[key]);
  }
  await ncmb.User.loginWith(user);
});

Facebookの設定

Facebookでアプリを作成したら、そのOAuthコールバックURLとして (プロキシサーバーのURL)/auth/facebook/callback を設定してください。

image.png

他、必要な情報はApp IDとApp secretになります。

メリット

プロキシサーバーを使うことで、以下のメリットがあります。

  1. アプリIDすらアプリ側に記述が不要です。

ただし、この認証はWebサーバーを介するものなので、ユーザー体験としてはFacebookアプリを呼び出す方式の方が良さそうです。

まとめ

プロキシサーバーを使うことで、キーを隠蔽できたり、リアルタイム通信などの追加機能が利用できます。NCMBをより便利に使いこなすために、ぜひご利用ください。

NCMBMania/ncmb-proxy

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?