
グーグルアカウントを使ってWordPressのログインを行う
先日のWordBenchのセミナーで取り扱ったテーマになるのですが、備忘録として残しておきたいと思います。(セミナーの記事はこちらからどうぞ。)
通常はWordPressユーザーのIDとパスワードを入力してWordPressのログインを行いますが、今回はグーグルのアカウントを使用してログインを行う方法になります。
実装手順としてはまず、グーグルアカウント認証のクライアントIDとクライアントシークレットというキー情報を取得します。そしてWordPress側で「Google Apps Login」というプラグインを導入し、先ほどのキー情報などを設定していくという2段階になります。
またこの機能実装にはグーグルアカウントが必要になるのであらかじめ用意しておきます。
任意のプロジェクト名を入力し作成します。
ダッシュボードに画面が切り替わるので、プロジェクトを選択するところから先ほど作成したプロジェクトを選択します。
再度ダッシュボードに戻り、サイドメニューから「APIとサービス」→「認証情報」を選択します。
認証情報の詳細画面にて「OAuth同意画面」のタブを選択し、メールアドレスがグーグルアカウントで使用しているものかを確認し、任意のサービス名を入力し保存します。それ以外の項目は空欄でもOKです。
次に「認証情報」のタブを選択し「認証情報を作成」メニューから「OAuthクライアントID」をクリックします。
クライアントID作成画面で、アプリケーションの種類を「ウェブアプリケーション」に選択し、名前をサイト名などの任意のものを入力します。そして制限事項の項目にて「承認済みのJavascript生成元」にはサイトのホームURLを、「承認済みのリダイレクトURI」にはログインページのURLを入力して保存します。
認証情報が保存されると、OAuthのクライアントIDのリストに追加されるので、サービス名をクリックすると詳細画面へ遷移し、「クライアントID」と「クライアントシークレット」が作成されているのが確認できます。これらはあとで入力するのでコピーしておきます。
プラグインの有効化が完了すると、サイドメニューの「設定」→「Google Apps Login」と追加されるので選択し、「Main Setup」タブの「Client ID」に先ほどコピーしたクライアントIDを、「Client Secret」にはクライアントシークレットの値を入力して保存します。
次にグーグルアカウント認証の対象となるユーザーを選択しメールアドレスをグーグルアカウント認証で使っているものに変更します。
以上で設定作業は完了で、ログイン画面にアクセスするとIDとパスワード入力欄に加えてグーグルアカウントでのログインボタンが追加されています。クリックするとグーグルのログイン画面に遷移し、もしグーグルアカウントでログインしている状態であればそのまま管理画面に入ることができます。
ちなみにですが、プラグイン設定の画面で「Advanced Options」を選択するとより細かな設定を行うことができます。
いかがでしょうか、WordPressを頻繁に使う場合やログイン情報の管理が面倒、リスクが木になるという場合にはとても便利なのではないでしょうか。グーグルアカウントをお持ちの方はぜひ試してみてはいかがでしょうか。
1. Google Cloud Platformでクライアントキー情報を取得
まずは「Google Cloud Platform」と呼ばれるGoogleAppsの各種APIなどを管理するデベロッパー向けのサイトにアクセスします。 【Google Cloud Platform】 https://console.cloud.google.com/ サイトへアクセスすると「ダッシュボード」あるいは「リソースの管理」などが表示されるのでまずは新規プロジェクトを作成します。「プロジェクトを作成」をクリックします。
任意のプロジェクト名を入力し作成します。
ダッシュボードに画面が切り替わるので、プロジェクトを選択するところから先ほど作成したプロジェクトを選択します。
再度ダッシュボードに戻り、サイドメニューから「APIとサービス」→「認証情報」を選択します。
認証情報の詳細画面にて「OAuth同意画面」のタブを選択し、メールアドレスがグーグルアカウントで使用しているものかを確認し、任意のサービス名を入力し保存します。それ以外の項目は空欄でもOKです。
次に「認証情報」のタブを選択し「認証情報を作成」メニューから「OAuthクライアントID」をクリックします。
クライアントID作成画面で、アプリケーションの種類を「ウェブアプリケーション」に選択し、名前をサイト名などの任意のものを入力します。そして制限事項の項目にて「承認済みのJavascript生成元」にはサイトのホームURLを、「承認済みのリダイレクトURI」にはログインページのURLを入力して保存します。
認証情報が保存されると、OAuthのクライアントIDのリストに追加されるので、サービス名をクリックすると詳細画面へ遷移し、「クライアントID」と「クライアントシークレット」が作成されているのが確認できます。これらはあとで入力するのでコピーしておきます。
2. WordPress側でGoogle Apps APIのプラグイン設定
引き続き今度はWordPressでの作業になります。まずは今回使用する「Google Apps Login」というプラグインをインストールし有効化しておきます。
プラグインの有効化が完了すると、サイドメニューの「設定」→「Google Apps Login」と追加されるので選択し、「Main Setup」タブの「Client ID」に先ほどコピーしたクライアントIDを、「Client Secret」にはクライアントシークレットの値を入力して保存します。
次にグーグルアカウント認証の対象となるユーザーを選択しメールアドレスをグーグルアカウント認証で使っているものに変更します。
以上で設定作業は完了で、ログイン画面にアクセスするとIDとパスワード入力欄に加えてグーグルアカウントでのログインボタンが追加されています。クリックするとグーグルのログイン画面に遷移し、もしグーグルアカウントでログインしている状態であればそのまま管理画面に入ることができます。
ちなみにですが、プラグイン設定の画面で「Advanced Options」を選択するとより細かな設定を行うことができます。
いかがでしょうか、WordPressを頻繁に使う場合やログイン情報の管理が面倒、リスクが木になるという場合にはとても便利なのではないでしょうか。グーグルアカウントをお持ちの方はぜひ試してみてはいかがでしょうか。
categories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)