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）の有効化と、コンシューマーキーの設定を行います。
これで準備完了です。
認証を行う
認証を行う際には、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件取れているのが分かるかと思います。
まとめ
現在はTwitter認証のみですが、ほかのソーシャル認証にも対応していきます。Monacaアプリなどで認証を実装する際に役立ててください。
