1
0

More than 1 year has passed since last update.

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

Posted at

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

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

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

追加する機能(予定)

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

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

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

NCMBのTwitter認証の課題

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

  • サーバーが必要である
  • コンシューマーキー、コンシューマーシークレットを認証時に送信する必要がある

Twitter認証は外部サーバーを立てる必要があります。mBaaSなので、サーバーレスな環境を維持したい時に不便です。

また、認証時にコンシューマーキーなどを送信する必要があるのも不便です。そうした重要なキーはなるべくアプリ内部には保持したいと考えないでしょう。

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

インストール

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 で立ち上げてあります。これを実際に使っているデモをこちらに立ち上げています

Untitled.jpeg

使い方

設定の追加

settings.yaml に以下の項目を追加してください。

twitter:
  callbackUrl: コールバックURL
  consumerKey: Twitterのコンシューマーキー
  consumerSecret: Twitterのコンシューマーシークレット

クライアント側の変更

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

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

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

最初に redirect パラメーターを渡すことで、別タブではなく認証後に戻ってくる指定も可能です。

Twitterの設定

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

メリット

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

  1. Twitter認証時にプロキシサーバー以外のサーバーが不要
  2. コンシューマーキーなどはサーバー側で隠蔽できる

まとめ

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

NCMBMania/ncmb-proxy

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