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

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

ソーシャル認証を一括管理する認証サーバを開発中です(Twitter認証の使い方)

f:id:mbaasdevrel:20201022153722p:plain

mBaaSではソーシャルサービスを使った認証機能を提供しています。2021年1月現在、Twitter/Facebook/Google/Appleといったプロバイダーに対応しています。Facebookを除くOAuthサービスプロバイダーでは、自前のサーバを立てて認証を行わなければいけません。

そうした手間を軽減するために、認証サーバを開発しています。まずはTwitter認証の紹介です。

コードを取得する

コードはNCMBMania/auth_server: NCMBの認証を管理するサーバですにあります。これを取得してください。

git clone https://github.com/NCMBMania/auth_server.git

Herokuへのダイレクトデプロイも考えたのですが、Apple認証は証明書のファイルが必要なのでやめました。なお、ローカルでの準備さえできていれば、Heroku上にデプロイすることもできます。

設定をする

設定ファイルは config.json になります。 config.example.json をコピーして編集してください。secretは認証用セッションの暗号化に使われるもので適当な長い文字列を指定します。

{
  "url": "https://example.com",
  "ncmb": {
    "applicationKey": "YOUR_APPLICATION_KEY",
    "clientKey": "YOUR_CLIENT_KEY"
  },
  "twitter": {
    "consumerKey": "YOUR_CONSUMER_KEY",
    "consumerSecret": "YOUR_CONSUMER_SECRET"
  },
  "secret": "SOMETHING_LONG_STRING"
}

管理画面で設定する

次にNCMBの管理画面でソーシャル認証(Twitter)の有効化と、コンシューマーキーの設定を行います。

f:id:mbaasdevrel:20201022153722p:plain

これで準備完了です。

認証を行う

認証を行う際には、JavaScriptファイルを読み込みます。

<script src="https://example.com/auth.js"></script>

次に AUTH_URL として認証サーバのURLを設定します。

const AUTH_URL = 'https://example.com';

準備できたら、認証を行うイベントを実行します。 ncmb_auth('サービスプロバイダー名') で認証できます。awaitを使うことで、終了時には認証が通った状態になります。

document.querySelector('.auth').onclick = async e => {
  await ncmb_auth('twitter');
  console.log(ncmb.User.getCurrentUser());
}

実際に動かしているところです。ウィンドウが開いて、そこでTwitter認証が完了すると、認証完了の状態になります。未認証の状態ではデータは1件ですが、認証後は2件取れているのが分かるかと思います。

f:id:mbaasdevrel:20201022153740g:plain

まとめ

現在はTwitter認証のみですが、ほかのソーシャル認証にも対応していきます。Monacaアプリなどで認証を実装する際に役立ててください。

中津川 篤司

中津川 篤司

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