Google+ログインボタンを使うためのGoogle App Engineアプリを作成する

連載トップでソーシャルアカウントログインの概要とGoogle+ ログインボタンの概要について説明しました。今回はGoogle+ログインボタンをGoogle App Engineで使うための環境作成について説明します。必要な環境としてはGoogle プロジェクトの作成とGoogle App Engineアプリの作成・ライブラリ追加です。では順番に見ていきましょう。

Google プロジェクトの登録

まず、Google App Engine管理画面にて新しいアプリを作成します。ここでは「g-plus-login-test」という名前のアプリを作成しています。

アプリが無事に作成されたら、Google Developers Consoleにアクセスすると、プロジェクトの一覧に先ほど作成したGoogle App Engineアプリが表示されるはずです。

先ほど作成したアプリをクリックし、詳細設定を行います。まず左のメニュー内の「APIS & auth」をクリックし、その中の「APIs」で「Google+ API」を有効にします。

 

次にメニュー「Credentials」内の「CREATE NEW CLIENT ID」をクリックしてAPIを利用するためのクライアントを作成します。


ここで作成するクライアントの詳細設定は以下です。

  • アプリケーション タイプとして [Web application] を選択します。
  • [Authorized Redirect URIs] フィールドで、例として表示されているURI を削除します。
  • [Authorized JavaScript Origins] フィールドにhttp://localhost:8888、http://<app id>.appspot.com、https://<app id>.appspot.com/を追加します。


この例の中のhttp://localhost:8888 はローカル開発環境で確認するためのURIです。残りの二つは本番用のURIになります。必要に応じて登録してください。

「Create Client ID」ボタンをクリックするとクライアントが作成されます。この時、Client IDとClient secretが同時に取得できるので、それらをメモしておき、あとで使うことになります。


次にメニュー「Consent screen」クリックして承認画面の設定を行います。ここで最低限設定しないと行けない項目は「Email address」、「Product name」です。


必要な項目を記入後に、「Save」ボタンをクリックします。

これでGoogle+ APIを使うためのプロジェクトの登録が完了しました。次はGoogle App Engineアプリの作成について見ていきましょう。


Google App Engine アプリ

Google App Engineアプリではまずアプリを作成し、Google+ APIライブラリを追加する必要があります。


Google App Engineアプリの作成

今回作成するGoogle App Engineアプリの構成は以下になります。アプリの作成手順についてはGoogle App Engine開発の基本となりますので、今回は割愛させて頂きます。

  • Eclipse
  • Google App Engine Plugin For Eclipse
  • Slim3(フレームワーク)

Google+ APIライブラリの追加

作成したGoogle App EngineアプリでGoogle+ APIを使うためには、ライブラリを追加する必要があります。

まず、Eclipseで作成したアプリ(g-plus-login-test)を右クリックし、表示されたコンテキストメニュー内の「Google」 > 「Google API の追加」をクリックします。


すると「Google API の追加」画面が表示されます。ここで「Google+ API」を選択して「完了」ボタンをクリックします。


ライブラリの追加処理が無事に完了すると、アプリの参照ライブラリに「Google+ API」を利用するためのライブラリ群が表示されるはずです。


また、今回はOAuth2もGoogle App Engineアプリで利用するため、こちらのAPIも同じ手順で追加してください。

これでGoogle+ APIを使うためのGoogle App Engineアプリの準備がすべて完了しました。次回は「ユーザー登録を行うためのGoogle+ログインボタンをサイトに設置する方法」から説明していきます。