Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

第69回 WordBench大阪- WordPress ログインに Google 認証を使ってみよう!

セッションとハンズオン

  • Login to see the comments

第69回 WordBench大阪- WordPress ログインに Google 認証を使ってみよう!

  1. 1. WordPress ログインに Google 認証を 使ってみよう! 2017年10月15日 第69回 WordBench 大阪 京都大学東南アジア地域研究研究所 木谷 公哉(KITANI Kimiya) @kimipooh
  2. 2. 自己紹介 インフラ整備 ヘルプデスク 情報処理室長(助教) 東南アジアへの技術供与多言語に触れてもらう 一般 人材交流 篭もる 京都大学東南アジア地域研究研究所 HDDの容量増やしたい データ消えた T_T; ◯◯が動かないんだけど? ◯◯について教えて欲しい ウェブサイト作りたいよ! ラオスの図書館員 IT技術者向けに 図書系データベース についての講義
  3. 3. 自己紹介 ベトナム社会科学通信院 ラオス国立農林業研究所 ラオス国立図書館 ベトナム国家図書館 フィールドワーク
  4. 4. 自己紹介 日本チーム(TC と Google社員) コミュニティ活動 WordCamp Kansai 2016WordPress.org プロフィール インドネシア TCとの交流 Singapore Google Top Contributor Summit 2017 (2017年9月26日〜29日)
  5. 5. 本日の内容  セッション Google 認証を使うメリット Google 認証の流れ Google 認証のためのキーポイント  ハンズオン WordPress ログインに Google 認証を 使ってみよう!
  6. 6. ハンズオン用確認! Google アカウント持っていますか テスト用 WordPress をお持ちですか
  7. 7. Google 認証を使うメリット
  8. 8. WordPress にログインしても らうために・・・ WordPress ログイン 内部 外部 IDとパスワード IDとパスワード 事前にIDとパスワードを伝える インターネット
  9. 9. IDとパスワードを伝える方法って 面倒・・・ 内部 外部電話 メール FAX オンラインストレージ 手渡し(紙) ちょっと面倒 まさかね.. FAX  メール通知になっていたり そのストレージに アクセスするには.. 確実だけど.. 数が多いと大変そう…
  10. 10. ログインページが非暗号・・・ WordPress ログイン 内部 外部 http://◯◯/wp-login.php インターネット 非暗号だと盗聴されるよ! サーバーが外部だと、「内部」「外部」関係なくインターネット経由になる
  11. 11. Google 認証を使うと・・・ WordPress ログイン 外部 http://◯◯/wp-login.php インターネット ログインページに BASIC認証や、IPアドレス制限をしているケースも多い 内部 Google 認証 暗号化 1. 安全な通信でログインできる! 2. ユーザーにパスワードを教える必要なし! ユーザーのメールアドレスに Googleアカウントを登録 パスワードは超強力にしておく(忘れてもいい)
  12. 12. Google 認証の流れ
  13. 13. 登録されていない ユーザーの場合 実際の画面 すでに Googleアカ ウントでログイン している場合 Googleアカ ウントでロ グインして いない場合 http://◯◯/wp-login.php
  14. 14. Google 認証だけにしたい 自動転送 http://◯◯/wp-login.php すでに Googleアカ ウントでログイン している場合
  15. 15. Google 認証だけにしたい - ログインできなくなったら - 自動転送 http://◯◯/wp-login.php 登録されていない ユーザーの場合 FTPなどでアクセスしてプラグインを削除してもよし
  16. 16. Google 認証のキーポイント
  17. 17. WordPress Google Cloud Console キーワード クライアント ID クライアント シークレット ログイン URL ドメイン 登録 登録 Google 認証 (OAuth2) Google API Google アカウント
  18. 18. Google 認証 (OAuth 2.0)のた めのキー取得 クライアント ID クライアント シークレット
  19. 19. Google 認証(OAuth 2.0)のため のキー取得 ログインURL = 承認済みのリダイレクト ドメイン = 承認済みの JavaScript 生成元 例1)http://◯◯/ の場合 承認済みの JavaScript 生成元:http://◯◯ 承認済みのリダイレクト URI:http://◯◯/wp-login.php 例2)サイトは、 http://◯◯/ ログインは https://◯◯/wp-login.php 承認済みの JavaScript 生成元:http://◯◯ と https://◯◯ 承認済みのリダイレクト URI: http://◯◯/wp-login.php https://◯◯/wp-login.php 例3)http://◯◯/wordpress/ の場合(サブディレクトリ以下) 承認済みの JavaScript 生成元:http://◯◯ 承認済みのリダイレクト URI:http://◯◯/wordpress/wp-login.php
  20. 20. Google 認証(OAuth 2.0)のため のキー取得 ログインURL = 承認済みのリダイレクト ドメイン = 承認済みの JavaScript 生成元 例4)http://◯◯/wordpressA/ と http://◯◯/wordpressB/ の2つある場合 承認済みの JavaScript 生成元:http://◯◯ 承認済みのリダイレクト URI: http://◯◯/wordpressA/wp-login.php http://◯◯/wordpressB/wp-login.php 例5)http://◯◯/wordpressA/ と https://◯◯/wordpressB/ (SSL)の2つある場合 承認済みの JavaScript 生成元: http://◯◯ https://◯◯ 承認済みのリダイレクト URI: http://◯◯/wordpressA/wp-login.php https://◯◯/wordpressB/wp-login.php
  21. 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
  22. 22. ハンズオン 実際に導入してみよう!
  23. 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. 24. Google 認証のため のキー取得 クライアント ID クライアント シークレット STEP 1.
  25. 25. Step 1-1. Google Cloud Console に ログイン https://console.cloud.google.com
  26. 26. Step 1-2. Google API を有効にする https://console.developers.google.com
  27. 27. Step 1-3. 新しいプロジェクトを 作成する WordPress with Google Auth G Suite 向け警告 一般アカウントは 表示されません 覚えやすい名前
  28. 28. Step 1-5. 作成したプロジェクト へ移動 クリック
  29. 29. Step 1-6. OAuth 同意画面の設定 メールアドレス: Googleアカウント ユーザーに表示するサービス名 分かりやすい名称 WordPress with Google Auth
  30. 30. Step 1-7. 認証情報を作成(1) 「OAuth クライアント ID」を選択
  31. 31. Step 1-8. 認証情報を作成(2) どこで利用するのかわかるように 自分のサイト名称とか ドメイン ログイン URL
  32. 32. Step 1-9. 認証情報を作成(2) Google Cloud Consoleでの作業完了 コピー&ペーストで保存する そのまま表示しておく クリップボードへコピー するボタン
  33. 33. WordPress での作業に移る前に・・・ クライアント ID や クライアントシークレットを忘れた 新たにサイトを追加・変更したい!! https://console.cloud.google.com または
  34. 34. WordPress での作業に移る前に・・・ 認証情報を新規作成 クライアント ID や クライアントシークレットの確認 サイトの追加が可能 1つの認証情報にサイトを沢山含めること もできますが、サブドメインぐらいに留め ておくのがよいかと思います。 ß ß
  35. 35. WordPress に 「Google Apps Login」 プラグインを導入 STEP 2.
  36. 36. Step 2-1. WordPress にログイン サイト/wp-admin サイト/wp-login.php
  37. 37. Step 2-2. プラグインのインストール 「Google Apps Login」 ①新規追加 ②検索 ③インストール ④有効化
  38. 38. Step 2-3. 「Google Apps Login」設定 クライアント ID クライアントシークレット
  39. 39. メールアドレスを確認 しよう STEP 3.
  40. 40. Step 3. 「Google Apps Login」設定 Googleアカウントのメールアドレスにする 新規ユーザーを作成してもよい
  41. 41. Google 認証でログイン してみよう! STEP 4.
  42. 42. Step 4. 「Google Apps Login」設定 ① 一旦ログアウトする ② Login with Google ボタン からログインする ログインエラーになったら、Google Cloud Console で設定した 承認済み JavaScript 承認済みのリダイレクトURIをチェック
  43. 43. 最後に Google 認証は通信面での安全 性は極めて高い Google アカウントを不 正アクセスされたら意 味がない 2段階認証を導入しましょう!

×