概要

最近はどのサイトでもSNSからのログインだったり、登録するサイトが当たり前になっています。

よく見かけるこんな感じのボタンですね。。

今回はjsだけを使って簡単にGoogle Sign-Inを実装してみます。

Googleアカウントの作成

まずはじめにGoogleアカウントを作成しましょう。
可能ならそのアプリ専用に作った方がいいと思います。

Google Cloud Platformでの設定

まずは先ほど作ったGoogleアカウントでログインしましょう。

左上の[Project]からプロジェクトを作成を選択します。

プロジェクト名はわかりやすい任意の名前をつけて、場所はとりあえずこのままで作成します。

先ほど作成したプロジェクトを選択して左のメニューから
[APIとサービス]→[認証情報]を選択

[認証情報を作成]→[OAuth クライアント ID]から今回使うOAuth認証情報を作成します。

今回は[ウェブアプリケーション]を選択して[名前]を入力します。

[承認済みのJavaScript生成元]には作ったアプリのDomainを入力します。(複数選択可能)
例:http://localhost:8080

[承認済みのリダイレクトURI]にはユーザーが認証された後にリダイレクトされるURLを設定します。
例:http://localhost:8080/login/callback

[作成]するとクライアントIDが発行されるのでメモしといてください。

実装

では実装してみましょう。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="google-signin-client_id"content="YOUR_CLIENT_ID.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
  </body>
</html>

正直HTMLにこの記述するだけでGoogle Sign-Inの実装はできちゃいます。
[YOUR_CLIENT_ID]は先ほどメモしたクライアントIDを入力しましょう。
簡単ですよね。

更にログインしたユーザーのプロフィール情報を取得するにはgetBasicProfile()メソッドを使用します。

JavaScript


function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // GoogleのID
  console.log('Name: ' + profile.getName()); // アカウント名
  console.log('Image URL: ' + profile.getImageUrl()); // プロフィール画像
  console.log('Email: ' + profile.getEmail()); // ユーザーのメールアドレス
}

ちなみにログアウトを追加したい場合は、こんな感じで書けます。

HTML

<a href="#" onclick="signOut();">ログアウト</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      // ログアウトした後の処理
    });
  }
</script>

まとめ

今回はJSを使ってGoogle OAuth 2.0 認証を使ったGoogle Sign-Inの実装をしました。
ほんとこれだけでログイン機能の実装はできてしまうので皆さんも今時のおしゃれサイトにする際は使ってみてください。
ただ、実際の運用に使う際はこれだけだとセキュリティーガバガバなのでサーバーサイドでIDトークン検証したりなど、工夫が必要ですね。
また別でサーバーサイドでの処理などの実装もあげるのでよかったらみてください。

Google OAuth 2.0 認証を使ったGoogle Sign-Inの実装（JS編）

概要

Googleアカウントの作成

Google Cloud Platformでの設定

実装

まとめ

参考