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

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

Google+認証をWebブラウザだけで行う

mBaaSではソーシャル認証としてTwitter/Facebook/Google+をサポートしています。OAuth2認証では一度各認証サービスへ行き、そこで認証することでユーザ情報が得られます。そのため、戻り先であるサーバサイドを用意しないといけないのが一般的です。

しかしFacebookとGoogle+についてはJavaScript SDKにより、Webブラウザだけでも認証が行えます。今回はその実装方法を紹介します。

Google Cloud Platformでプロジェクト作成

最初にGoogle Cloud Platformにてプロジェクトを作ります。

f:id:mbaasdevrel:20180720123716p:plain

認証情報を見ると、Android/iOS/サーバ/Webブラウザ向けに4つのキーが自動生成されます。この中で使うのは Browser key です。

f:id:mbaasdevrel:20180720123752p:plain

また、OAuth 2.0クライアントを作ります。Webアプリケーション向けのキーを作成します。Browser Keyをクライアントシークレット client_secret 、OAuth 2.0用のキーをクライアントIDとしてメモしておきます。

f:id:mbaasdevrel:20180720123810p:plain

さらにAPIとしてGoogle+ APIを有効にしておきます。これは認証したユーザ情報の取得に必要です。

f:id:mbaasdevrel:20180720123850p:plain

mBaaSの設定

mBaaSではアプリ設定のSNS連携にあるGoogle連携を有効にしてください。 Google Client ID は空でも大丈夫なようです。

f:id:mbaasdevrel:20180720123938p:plain

ライブラリの読み込み

ライブラリは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

中津川 篤司

中津川 篤司

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