Google+ログインボタンを使ったユーザー登録とログイン機能の作り方

ソーシャルアカウントログイン

最近、ユーザー登録やログイン機能をユーザーのソーシャルアカウントで行うサイト(サービス)が増えてきています。ユーザーが利用しているソーシャルアカウントを使ってユーザー登録とログインを行うと様々なメリットがあります。

  • ユーザーが新たにユーザー登録する手間がなく、すぐにサービスを利用できる。
  • ユーザーが自身が利用しているソーシャルにログインさえしてあれば、サービスにシングルサインオンができる。
  • ユーザーにとって様々なサイトにログインするための情報が一元化になる。
  • サービス提供者にとってはログインやユーザー登録の機能を提供する必要がなくなるため、新しいサービスを提供する時の初期コストが下がる。
  • などなど

Googleも他の大手ソーシャル(Facebookなど)と同様にソーシャルログインボタンを提供し始めました。

Google+ ログインボタン


Google+ ログインボタンを利用することによって、ログイン処理やユーザー登録処理に必要な情報(ユーザー名、メールアドレス、性別・・・)の取得がもちろん、Google が今まで提供してきた様々なサービスをAPIを通してサイトに追加できます。具体的には、ユーザーがログインすると、ユーザーに代わって API リクエストを行うための OAuth トークンを取得できます。このトークンを使用することで、Googleで保持しているユーザーの様々な情報にアクセスできます。

また、Googleは「クライアント側フロー」と「サーバー側フロー」の2種類のGoogle+ ログイン方法を提供しており、用途に合わせて選べます。

クライアント側フロー

クライアント側フローはJavaScriptを利用して、ユーザーがサイトに訪れた際やサイト内で特定の操作(ボタンクリックなど)をした際に、ユーザーの代わりにGoogleが提供している様々なサービスを利用するためのフローです。

注意しないといけないのは、クライアント側フローはユーザーがサイトから離れた際にユーザーの代わりに何かを処理することができません。ユーザーのアクションに合わせて毎回APIアクセスするためのトークンが発行されます。

サーバー側フロー

サーバー側フローは簡単に言えば、初回のみユーザーにアプリ承認を求めます。ユーザーがアプリ承認を行った後、ユーザーがオフライン(サイトから離れた)になった場合も、サーバーは継続的にユーザーの代わりにGoogle API にアクセスできるフローです。

サーバー側フローを使うためには、以下のフローをよく理解し実装する必要があります。


  • 1) 画面上にGoogle+ ログインボタンを表示し、ユーザーにそのボタンをクリックさせる
  • 2) ボタンをクリックすると、Google API Server が承認画面をユーザーに表示する
  • 3) ユーザーがアプリ承認を行うことによってワンタイムコードがクライアント側に返される
  • 4) JavaScriptで非同期処理などでワンタイムコードをサーバーにPOSTする
  • 5) サーバーは受け取ったワンタイムコードを使って、ユーザーデータにアクセスするためのアクセストークンとリフレッシュトークンをGoogle API Serverに要求する
  • 6) Google API Serverがアクセストークンとリフレッシュトークンをサーバーに返す
  • 7) サーバーは取得したアクセストークンとリフレッシュトークンをセッションもしくはDBに保存し、ログイン後の画面もしくはメッセージをユーザーに表示する

上記の承認フローが完了すれば、サーバーは取得したアクセストークンとリフレッシュトークンを使って好きなタイミングにユーザーの代わりに様々なGoogle APIを利用できるようになります。

また、説明の中に「ワンタイムコード」とありましたが、この「ワンタイムコード」を使ったOAuth2承認方法を「ワンタイムOAuth承認」といいます。通常のOAuth2承認は後述する「Client secret」が盗まれる可能性があると指摘されています。それに比べるとワンタイムコード方式では「Client secret」はサーバーとGoogle API サーバー間でのみ利用されるため、盗まれる可能性が極めて少なくなり安全とされています。

どっちのGoogle+ ログインフローを利用すべきか

では具体的にどっちのフローを利用すべきかを考えてみましょう。

例えば、訪れるたびに訪れたユーザーのGoogle カレンダーにAPIを通して何かを書き込むサイトを運営しているとします。それ以外は特にAPIを使う必要がないとすれば、APIアクセスのトリガーはユーザーがサイトに訪れるというアクションのみになります。この場合はクライアント側フローで十分です。※サーバー側フローを使っても実現できます。

でも同じサイトで、夜の決まった時間にユーザーのカレンダーから書き込んだ古い情報を自動的に削除しないと行けないとなるとどうでしょうか。この場合、ユーザーの特定のアクションがトリガーではなく、時間がトリガーになります。ユーザーがオフラインでも時間になれば実行しないといけないとなると、サーバー側フローを利用することになります。

クライアント側フローはGoogleが提供しているJavaScriptライブラリを使えば簡単にできるので、必要な方は「Google+ ログイン」をご覧ください。

サーバー側フローはまだ日本語の文献が少ないので、今回はGoogle App Engineを使ってサーバー側フローについてサンプルを作りながら説明してみたいと思います。

Google+ログインボタンを使ったユーザー登録とログイン機能の作り方の詳細はこちら

  1. Google+ログインボタンを使うためのGoogle App Engineアプリを作成する
  2. Google+ログインボタンをサイトに設置する
  3. Google+ログインボタンを使ってユーザー登録とログイン管理を行う