第69回 WordBench大阪- WordPress ログインに Google 認証を使ってみよう！
Download as PPTX, PDF1 like1,859 views
セッションとハンズオン
第69回 WordBench大阪- WordPress ログインに Google 認証を使ってみよう！
- 1. WordPress ログインに Google 認証を 使ってみよう！ 2017年10月15日 第69回 WordBench 大阪 京都大学東南アジア地域研究研究所 木谷 公哉（KITANI Kimiya） @kimipooh
- 2. 自己紹介 インフラ整備 ヘルプデスク 情報処理室長（助教） 東南アジアへの技術供与多言語に触れてもらう 一般 人材交流 篭もる 京都大学東南アジア地域研究研究所 HDDの容量増やしたい データ消えた T_T; ◯◯が動かないんだけど？ ◯◯について教えて欲しい ウェブサイト作りたいよ！ ラオスの図書館員 IT技術者向けに 図書系データベース についての講義
- 4. 自己紹介 日本チーム（TC と Google社員） コミュニティ活動 WordCamp Kansai 2016WordPress.org プロフィール インドネシア TCとの交流 Singapore Google Top Contributor Summit 2017 (2017年9月26日〜29日）
- 5. 本日の内容 セッション Google 認証を使うメリット Google 認証の流れ Google 認証のためのキーポイント ハンズオン WordPress ログインに Google 認証を 使ってみよう！
- 11. Google 認証を使うと・・・ WordPress ログイン 外部 http://◯◯/wp-login.php インターネット ログインページに BASIC認証や、IPアドレス制限をしているケースも多い 内部 Google 認証 暗号化 1. 安全な通信でログインできる！ 2. ユーザーにパスワードを教える必要なし！ ユーザーのメールアドレスに Googleアカウントを登録 パスワードは超強力にしておく（忘れてもいい）
- 12. Google 認証の流れ
- 15. Google 認証だけにしたい - ログインできなくなったら - 自動転送 http://◯◯/wp-login.php 登録されていない ユーザーの場合 FTPなどでアクセスしてプラグインを削除してもよし
- 16. Google 認証のキーポイント
- 17. WordPress Google Cloud Console キーワード クライアント ID クライアント シークレット ログイン URL ドメイン 登録 登録 Google 認証 （OAuth2） Google API Google アカウント
- 18. Google 認証 （OAuth 2.0）のた めのキー取得 クライアント ID クライアント シークレット
- 19. Google 認証（OAuth 2.0）のため のキー取得 ログインURL = 承認済みのリダイレクト ドメイン = 承認済みの JavaScript 生成元 例１）http://◯◯/ の場合 承認済みの JavaScript 生成元：http://◯◯ 承認済みのリダイレクト URI：http://◯◯/wp-login.php 例２）サイトは、 http://◯◯/ ログインは https://◯◯/wp-login.php 承認済みの JavaScript 生成元：http://◯◯ と https://◯◯ 承認済みのリダイレクト URI： http://◯◯/wp-login.php https://◯◯/wp-login.php 例３）http://◯◯/wordpress/ の場合（サブディレクトリ以下） 承認済みの JavaScript 生成元：http://◯◯ 承認済みのリダイレクト URI：http://◯◯/wordpress/wp-login.php
- 20. Google 認証（OAuth 2.0）のため のキー取得 ログインURL = 承認済みのリダイレクト ドメイン = 承認済みの JavaScript 生成元 例4）http://◯◯/wordpressA/ と http://◯◯/wordpressB/ の２つある場合 承認済みの JavaScript 生成元：http://◯◯ 承認済みのリダイレクト URI： http://◯◯/wordpressA/wp-login.php http://◯◯/wordpressB/wp-login.php 例5）http://◯◯/wordpressA/ と https://◯◯/wordpressB/ （SSL）の２つある場合 承認済みの JavaScript 生成元： http://◯◯ https://◯◯ 承認済みのリダイレクト URI： http://◯◯/wordpressA/wp-login.php https://◯◯/wordpressB/wp-login.php
- 21. Google 認証（OAuth 2.0）のため のキー取得 ログインURL = 承認済みのリダイレクト ドメイン = 承認済みの JavaScript 生成元 例6）SiteGuard WP Plugin プラグインなどで ログインURLを変更している場合 SiteGuard WP Pluginの場合には、そのプラグインで「ログインページ変更（デフォル ト設定）」をONにしている場合のみ、設定ある「変更後のログインページ名」のURL を設定する必要があります。OFFにしたときを想定して、その設定も追加しておきます。 承認済みの JavaScript 生成元： http://◯◯ 承認済みのリダイレクト URI： http://◯◯/login_△△ http://◯◯/wp-login.php
- 23. 流れ 1. Google 認証（OAuth 2.0）のためのキー取得 Google Cloud Console（Google Cloud Platform） https://console.cloud.google.com 2. WordPress プラグイン「Google Apps Login」 のインストールと設定 3. WordPress ユーザーのメールアドレスの設定 4. Google 認証でログインしてみよう！ クライアント ID クライアント シークレットキー
- 24. Google 認証のため のキー取得 クライアント ID クライアント シークレット STEP 1.
- 25. Step 1-1. Google Cloud Console に ログイン https://console.cloud.google.com
- 26. Step 1-2. Google API を有効にする https://console.developers.google.com
- 27. Step 1-3. 新しいプロジェクトを 作成する WordPress with Google Auth G Suite 向け警告 一般アカウントは 表示されません 覚えやすい名前
- 29. Step 1-6. OAuth 同意画面の設定 メールアドレス： Googleアカウント ユーザーに表示するサービス名 分かりやすい名称 WordPress with Google Auth
- 30. Step 1-7. 認証情報を作成（１） 「OAuth クライアント ID」を選択
- 32. Step 1-9. 認証情報を作成（２） Google Cloud Consoleでの作業完了 コピー＆ペーストで保存する そのまま表示しておく クリップボードへコピー するボタン
- 33. WordPress での作業に移る前に・・・ クライアント ID や クライアントシークレットを忘れた 新たにサイトを追加・変更したい！！ https://console.cloud.google.com または
- 34. WordPress での作業に移る前に・・・ 認証情報を新規作成 クライアント ID や クライアントシークレットの確認 サイトの追加が可能 １つの認証情報にサイトを沢山含めること もできますが、サブドメインぐらいに留め ておくのがよいかと思います。 ß ß
- 35. WordPress に 「Google Apps Login」 プラグインを導入 STEP 2.
- 36. Step 2-1. WordPress にログイン サイト/wp-admin サイト/wp-login.php
- 37. Step 2-2. プラグインのインストール 「Google Apps Login」 ①新規追加 ②検索 ③インストール ④有効化
- 38. Step 2-3. 「Google Apps Login」設定 クライアント ID クライアントシークレット
- 40. Step 3. 「Google Apps Login」設定 Googleアカウントのメールアドレスにする 新規ユーザーを作成してもよい
- 42. Step 4. 「Google Apps Login」設定 ① 一旦ログアウトする ② Login with Google ボタン からログインする ログインエラーになったら、Google Cloud Console で設定した 承認済み JavaScript 承認済みのリダイレクトURIをチェック
Editor's Notes
- #3: 最初はインフラ整備・ヘルプディスクがメインの助手でしたが、途中から研究開発にも軸足を置き、最近では一般向けの体験イベントや東南アジアへの技術供与などの活動も入ってきています。 大学の技術系スタッフは、このような活動をしている人もいると思いますが、私の場合には直接現地に赴いたり、コミュニティに参画していろいろやっている珍しいタイプといえます。
- #4: 最近はベトナムとラオスに行ってきました。 次はカンボジアです。
- #5: ここまでくると、大学の技術系スタッフ見かけませんね… Googleは、研究所で G Suite for Education サービスを導入したことで、Googleプロダクトを深く知るために始めたヘルプフォーラムへの質疑応答に端を発して、いつの間にか Top Contributor になっていました。 WordPress も研究所のウェブサイトで WordPress を採用したのをきっかけに WordBenchというコミュニティに参画して、いつのまにか WordCamp の実行委員をやったりするようになりました。 他にも関西オープフォーラムの実行委員をするなど、オープンソース関連のいくつかのコミュニティに深く関わっています。
- #18: WordPress から Google API を利用して Google 認証（OAuth2）を利用するために必要なキーワード
- #21: https:// と http:// 両方アクセスできるサイトは、両方いれておくのが無難。
- #24: 作業は２部構成になります。 最初は、Googleアカウントを使った認証のための準備です。サイトごとに登録していく感じになります。一度設定すれば追加すれば後は慣れですので、それほど難しくはありません。 次は、Google 認証用プラグインのインストールと設定になります。これはサイトごとに１度だけ行えば十分です。 最後に認証はメールアドレス（Googleアカウント）で行いますので、各ユーザーのメールアドレス設定をチェックします。 大体の流れはこのような感じになります。具体的な作業は後のハンズオンにて、実際に皆さんと一緒に試しながら進めていきます。 その前に、もう少し仕組みの説明と利用事例について紹介します。
- #27: Google Developer Console から直接 API管理ページにアクセスできます。 Google Cloud Console の API管理ページとは異なるUI（大体同じ）ですが、見ているリソースは同一です。 以後、Google Cloud Console をベースに説明していきます。
- #28: 12件のプロジェクトのみ作成できます。 1つのプロジェクト内に、複数のサイトを個別登録できるので問題ありません。 G Suiteの場合には、管理者によって Google Developer Consoleサービスが利用可能に設定されている必要があります。 許可されていない場合には、プロジェクト作成時に「不明なエラー」となって作成できません。