mBaaSではソーシャルサービスを使った認証機能を提供しています。2020年10月現在、Twitter/Facebook/Google/Appleといったプロバイダーに対応しています。Facebookを除くOAuthサービスプロバイダーでは、自前のサーバを立てて認証を行わなければいけません。
そうした手間を軽減するために、認証サーバを開発しています。今回はGoogle認証の紹介です。
コードを取得する
コードはNCMBMania/auth_server: NCMBの認証を管理するサーバですにあります。これを取得してください。
git clone https://github.com/NCMBMania/auth_server.git
Herokuへのダイレクトデプロイも考えたのですが、Apple認証は証明書のファイルが必要なのでやめました。なお、ローカルでの準備さえできていれば、Heroku上にデプロイすることもできます。
Google Cloud ConsoleでOAuth2クライアントを作成する
Google Cloud Consoleでプロジェクトを作成し、さらにOAuth2クライアントを作成します。また、何らかのAPIを有効化しておきます。Google+ APIはまだ残っていますが、いつなくなるかは不明です。
設定をする
設定ファイルは config.json になります。 config.example.json をコピーして編集してください。secretは認証用セッションの暗号化に使われるもので適当な長い文字列を指定します。
スコープはOAuth2リクエストで指定しなければいけません。Google Cloud Consoleで有効にしたAPIによって異なるので注意してください。
{
"url": "https://example.com",
"ncmb": {
"applicationKey": "YOUR_APPLICATION_KEY",
"clientKey": "YOUR_CLIENT_KEY"
},
"twitter": {
"consumerKey": "YOUR_CONSUMER_KEY",
"consumerSecret": "YOUR_CONSUMER_SECRET"
},
"facebook": {
"appId": "YOUR_APP_ID",
"appSecret": "YOUR_APP_SECRET"
},
"google": {
"clientId": "YOUR_CLIENT_ID",
"clientSecret": "YOUR_CLIENT_SECRET",
"scope": [
"YOUR_SCOPE"
]
},
"secret": "SOMETHING_LONG_STRING"
}
管理画面で設定する
次にNCMBの管理画面でソーシャル認証（Google）の有効化と、クライアントIDの設定を行います。
これで準備完了です。
認証を行う
認証を行う際には、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('google');
console.log(ncmb.User.getCurrentUser());
}
実際に動かしているところです。ウィンドウが開いて、そこでGoogle認証が完了すると、認証完了の状態になります。
まとめ
現在はTwitter/Facebook/Google認証に対応しています。Apple認証についても早めに対応していきます。Monacaアプリなどで認証を実装する際に役立ててください。
