【まめ知識】WordPressでGoogle Apps認証！（2017年9月版）#wordpress #wctokyo

WordCamp Tokyo 2017 のアンカンファレンスで自身が推奨するプラグインとして出して結構好評だったので、その使い方についてのマニュアルを作成しておきます。これは 2017年9月16日に実際に試した内容です。

Google Apps Login プラグイン を使った Googleアカウントによるログインはとても便利です！ WordPressを複数管理する場合、外注先やクライアントにパスワードを逐一教えたり、アカウントを管理するのは大変ではありませんか。このアカウント認証を Google にやってもらえれば、そのあたりの管理が簡単になります！またログインページが非暗号（http://◯◯/wp-admin）だったとしても認証は暗号化（Google側の認証なので）されますから安心ですよ！まぁログイン後の通信は暗号化されませんので、管理画面は最低でも暗号化したほうがいいですけどね。

Googleアカウントでログイン

適切な設定をすれば、下図のように WordPress ログインに Googleでログインするボタンができます。あらかじめ WordPress に 登録されたユーザーのメールアドレスと Googleアカウントで認証されたメールアドレスが一致すればログインできます。そのため Googleアカウントに２段階認証を導入する等、Googleアカウントのセキュリティを強化しておけば非常に強固なログインシステムになりますし、便利です。

でも設定方法って結構分かりづらいんですよね。そこで纏めてみました。
※認証は、一般のGoogleアカウント、G Suite アカウントの両対応です。

必要なこと

1. Google Cloud Platform より、Google Apps Login で利用する クライアントID（Client ID）, クライアントシークレット（Client secret）を発行します。
2. Google Apps Login の設定（設定 > Google Apps Login）より、「１」で発行した値を入力して保存します。

これだけです。「２」はとても簡単です。「１」がちょっと初めての方は馴染みがなくとっつきにくいと思いますので、詳しく説明していきます。

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

Google Cloud Platform に最初にログインすると、利用についての同意画面が出てきます。もし英語表示されたら、https://console.cloud.google.com/start?hl=ja からアクセスすると日本語になります。以下は英語ですが、両方共 YESを選択して、AGRESS AND CONTINUEボタンを押して下さい。押した後に、https://console.cloud.google.com/start?hl=ja にアクセスしても日本語で表示されます。
※もしG Suiteアカウントを利用してログインできない場合には、G Suite管理者に「Google Developers Console」サービスが有効になっているか確認してもらってください。



すると下図の画面になるはずです。
今回利用するのは、「Google API」ですので基本的に無料です。




では順を追って説明していきます。

1.  「Google APIを利用する」をクリックします。
   
2. 一度もプロジェクトを作成していない場合には、プロジェクト作成画面になります。
   プロジェクト名は何でもいいですが、分かりやすいものにすることをオススメします。ここでは「Google Login for WordPress」としておきます。
   
3. すると、下図のようにプロジェクトページに遷移します。
   もし遷移しなければ、再度トップページの「Google APIを利用する」をクリックして作成したプロジェクトを選択してください。
   
4. 「認証情報」のタブに移動してください。
   
5. 「認証情報を作成」ボタンをクリックし、「OAuth クライアント ID」を選択してください。
   
6. 各プロジェクトで初めて利用するときに、「同意画面」でサービス名を設定する必要があります。下図のように「同意画面を設定」ボタンをクリックしてください。
   
7. 下図のような画面になるので、「ユーザーに表示するサービス名」を設定してください。なんでも構いませんが、分かりやすい名前をオススメします。ここでは「Google Login for WordPress」にしてみます。入力したら「保存」ボタンをクリックしてください。
   
8. すると下記のようにクライアント IDの作成画面が出ます。
   下記の入力をして「作成」ボタンをクリックしてください。
    アプリケーションの種類：ウェブ アプリケーション
    名前：任意（どの WordPress でつかうか分かるような名前がオススメ）
    制限事項（特定のWordPressのみで有効にする設定）
   　承認済みの JavaScript 生成元：WordPressのURLドメイン
   　承認済みのリダイレクト URI： WordPressのURL/wp-login.php
   
   
   例１）http://◯◯/ の場合
   　承認済みの JavaScript 生成元：http://◯◯
   　承認済みのリダイレクト URI：http://◯◯/wp-login.php
   例２）サイトは、 http://◯◯/  ログインは https://◯◯/wp-admin/　承認済みの JavaScript 生成元：http://◯◯ と https://◯◯
   　承認済みのリダイレクト URI：http://◯◯/wp-login.php と https://◯◯/wp-login.php
   例３）http://◯◯/wordpress/ の場合
   　承認済みの JavaScript 生成元：http://◯◯
   　承認済みのリダイレクト URI：http://◯◯/wordpress/wp-login.php
   例4）http://◯◯/wordpressA/ や http://◯◯/wordpressB/ の２つある場合　承認済みの JavaScript 生成元：http://◯◯
   　承認済みのリダイレクト URI：http://◯◯/wordpressA/wp-login.php と http://◯◯/wordpressB/wp-login.php
   例5）SiteGuard WP Plugin プラグインなどで ログインURLを変更している場合
   SiteGuard WP Pluginの場合には、そのプラグインで「ログインページ変更（デフォルト設定）」をONにしている場合のみ、設定ある「変更後のログインページ名」のURLを設定する必要があります。OFFにしたときを想定して、その設定も追加しておきます。
   　承認済みの JavaScript 生成元：http://◯◯
   　承認済みのリダイレクト URI：http://◯◯/login_△△ と http://◯◯/wp-login.php
   
   
   以上のようにドメインごとに纏めて設定しておくと便利です。もちろん WordPress サイトごとに設定することも可能です。ここは管理者が一緒ならまとめて、そうでないなら分けるとよいのではないかと思います。
   
   さて以下は、手持ちテストサイト「https://demo.dev」で説明します。
   　承認済みの JavaScript 生成元：https://demo.dev
   　承認済みのリダイレクト URI：https://demo.dev/wp-login.php
   ということです。
   
9. するとようやく欲しかった 「クライアントID（Client ID）」「クライアントシークレット（Client secret）」が表示されましたね！これをコピー＆ペーストでメモしておきます。もしメモをし忘れても、あとからチェックできます。
   

Google Apps Login のインストールと設定

1. 公式プラグインですので、通常のプラグイン同様「Google Apps Login」で検索してインストールし、有効化してください。
   
2. 設定 > Google Apps Login を開き、先ほどメモった「クライアントID（Client ID）」「クライアントシークレット（Client secret）」を入力して「変更を保存」ボタンを押して下さい。
   
   
3. 一度ログアウトしてみてください。
   下図のように「Login with Google」ボタンが表示されているはずです。
   
4. 最後に通常ログインして、現在のアカウントでも新規アカウントでもいいので、WordPress のユーザープロフィールのメールアドレス欄に、Googleアカウントが有効なメールアドレスを入力してください。手っ取り早いのは Gmailアドレスです。
   そして「プロフィールを更新」してください。
   
   
5. 一旦ログアウトして、「Login with Google」ボタンを押してみて下さい。
   うまくいけば、Googleログイン画面が出てきます。WordPressに登録したアカウントのメールアドレスでログインしてください。
   
   もし設定がミスしていれば、 Googleのエラーが表示されます。
   大抵は、「承認済みの JavaScript 生成元」「承認済みのリダイレクト」のいずれかが間違っていると思いますのでサイトチェックしてください。
   
   もしGmailや G Suite 以外のメールアドレスの場合で、Googleアカウントを作成していない場合には、https://accounts.google.com/SignUp?hl=ja の「現在のメールアドレスを使用する」のリンクをチェックして、作成してみてください。
   
6. うまくいけばログインできるはずです！！

Applendix A. ２度目以降に、Google Cloud Platform へログインしたときに、どこにいけばいい？

Google Apps Loginプラグインのために、作成したプロジェクトにアクセスしようと思っても「どこだ？」って思った人もいるはず。



から「プロジェクト設定に移動」したら



ほら、こんなところに迷い込んでしました。

そうどこにあるかというとトップの「API」から「APIの概要に移動」を選択しなければならないのです！



すると



ようになり「認証情報」タブをクリックすると、下図のように作成した認証にアクセスできます。

Applendix B. 2つ目の認証コードを発行するのはどうする

1. 既存プロジェクト内で「認証情報を作成」する　クライアントごとに作成するのか、多くなってきたら分けるのか、それぞれで判断すればよいと思います。
2. 新規プロジェクトを作成する　下図のように「Google Cloud Platform の右側の▼ をクリックして出て来る画面の右端にある「＋」でプロジェクトを作成できます。
    ※プロジェクト数は制限があるのでうまくつかうとよいと思います。
   まぁ新たにそれ専用の Googleアカウントを作ってしまえばいいのですけどね。
   

2017年9月16日 @kimipooh