LoginSignup
1
1

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-02-23

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

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

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

追加する機能(予定)

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

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

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

NCMBのGoogle認証の課題

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

  • 別途サーバーが必要

Google認証は認証後、リダイレクトを受け取る外部サーバーが必要です。プロキシサーバーを利用することで、コーディングレスでGoogle認証を導入できます。

インストール

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 に以下の項目を追加してください。スコープは自由に設定できますが、デフォルトはprofileとemailのようです。

google:
  clientId: "クライアントID"
  clientSecret: "クライアントシークレット"
  callbackUrl: "(プロキシサーバーのURL)/auth/google/callback"
  scope:
    - profile
    - email

クライアント側の変更

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

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

そして、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);
});

Googleの設定

Google Cloud Consoleでプロジェクトを作成し、さらにOAuth2クライアントを作成します。

Untitled.png

OAuthコールバックURLとして (プロキシサーバーのURL)/auth/google/callback を設定してください。

メリット

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

  1. クライアントIDなどをアプリ側に記述する必要がありません
  2. サーバーの用意が不要です

まとめ

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

NCMBMania/ncmb-proxy

1
1
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
1
1