mBaaSではソーシャル認証としてTwitter/Facebook/Google+をサポートしています。OAuth2認証では一度各認証サービスへ行き、そこで認証することでユーザ情報が得られます。そのため、戻り先であるサーバサイドを用意しないといけないのが一般的です。
しかしFacebookとGoogle+についてはJavaScript SDKにより、Webブラウザだけでも認証が行えます。今回はその実装方法を紹介します。
Google Cloud Platformでプロジェクト作成
最初にGoogle Cloud Platformにてプロジェクトを作ります。
認証情報を見ると、Android/iOS/サーバ/Webブラウザ向けに4つのキーが自動生成されます。この中で使うのは Browser key です。
また、OAuth 2.0クライアントを作ります。Webアプリケーション向けのキーを作成します。Browser Keyをクライアントシークレット client_secret 、OAuth 2.0用のキーをクライアントIDとしてメモしておきます。
さらにAPIとしてGoogle+ APIを有効にしておきます。これは認証したユーザ情報の取得に必要です。
mBaaSの設定
mBaaSではアプリ設定のSNS連携にあるGoogle連携を有効にしてください。 Google Client ID は空でも大丈夫なようです。
ライブラリの読み込み
ライブラリはCDNでも配信されていますので、今回はこれを使います。onloadで読み込み完了時に実行する関数を指定できます。
<script src=https://apis.google.com/js/client.js?onload=ready></script>
認証処理
認証処理のコードです。今回は #auth ボタンをクリックした際に呼び出しています。まず、Google+で認証を行います。その結果をトークンとして設定し、Google+ APIを呼び出します。うまくいけば取得できたIDとアクセストークンをmBaaSの認証情報として利用します。
document.querySelector('#auth').onclick = async (e) => { gapi.client.setApiKey(client_secret); // Google+の認証実行 const token = await auth(); // 返ってきたトークンを設定 gapi.auth.setToken(token); // Google+ライブラリの読み込み await load(); // 自分の情報を読み取り const result = await gapi.client.plus.people.get({ "userId": "me" }); // NCMBの認証 const authInfo = { id: result.result.id, access_token: token.access_token }; const user = new ncmb.User; // ユーザ登録処理 await user.signUpWith('google', authInfo); // ログイン処理 await ncmb.User.loginWith('google', authInfo); document.querySelector('#userName').innerHTML = user.userName; }
Google+の認証処理は以下のようになります。
const auth = () => { return new Promise((res, rej) => { gapi.auth.authorize({ client_id: client_id, scope: scope, immediate: true }, res); }) }
さらにGoogle+ APIの呼び出し処理は下記の通りです。
const load = () => { return new Promise((res, rej) => { gapi.client.load('plus','v1', res); }); }
まとめ
user.signUpWith('google', authInfo); だけでもユーザ情報は取得でき、さらにセッションIDも入っています。ただし、セッション情報が localStorage に保存されないので再読込すると認証情報が消えてしまいます。そのため ncmb.User.loginWith('google', authInfo); を実行して認証処理とセッションIDの保存を行っています。
この方法を使えば静的なWebサイトであってもmBaaSの認証機能が使えるようになります。なお、GoogleのOAuth2認証では何らかのURL（静的であっても）が必要なので、Monacaアプリではこの方法は使えなさそうです。ご注意ください。
SNS連携 (JavaScript) : Google連携 | ニフクラ mobile backend
