WordPressサイトのダッシュボード(管理画面)にSNSアカウントを使ったログイン機能を実装する方法をお探しの方向け
WordPressサイトのダッシュボードにログインする場合、通常、以下いずれかの方法でログインします。
- ID + パスワード
- メールアドレス + パスワード
しかし、プラグインを使うと、SNSアカウントやGoogleアカウントでダッシュボードにログインできる機能を実装できます。
この記事では、GoogleアカウントでWordPressのダッシュボードにログインできるプラグイン「Gianism(ジャイアニズム)」の使い方を解説します。
好きなところから読めます
Googleアカウントで管理画面にログインできるプラグイン「Gianism」
「Gianism(ジャイアニズム)」は、Googleアカウントを使ってWordPressのダッシュボードにログインできる機能を実装できる国産のプラグインです。
本記事ではGoogleアカウントによる実装方法を解説しますが、Gianismを使うことでGoogleアカウント以外にSNSアカウントでログインできるよう、設定できます。
Googleアカウント以外に利用できるSNSアカウント
Gianismでログイン可能なSNSアカウントは4つあります。
- LINE
上記のとおりです。
SNSアカウントによるユーザー登録も可能
Gianismはダッシュボードのログインだけでなく、SNSアカウントによるユーザー登録もできます。
例えば、会員サイトを運営しているような場合、Gianismを使えば会員登録時の入力の手間を省く事ができます。
ちなみに、このGianismというプラグイン。
設定画面にログインすると日本人には馴染みのある名言(迷言?)が表示されます。
WordPressのプラグインは英語表記が多い中、非常に親しみを感じるプラグインです。
Googleアカウントで管理画面にログインできるよう設定する手順
それでは、Gianismを使ってGoogleアカウントでダッシュボードにログインできるよう設定する手順を解説します。
- 手順①:Gianismのインストール
- 手順②:Gianismの設定
- 手順③:Google Cloud Platformで認証情報取得
- 手順④:プロジェクトの作成
- 手順⑤:APIサービスの選択
- 手順⑥:認証情報の作成
- 手順⑦:発行された認証情報をプラグインに設定する
上記のとおりです。
手順①:Gianismのインストール
まずは「Gianism」をインストールします。
ダッシュボード>プラグイン>新規追加 を選択します。
プラグイン検索窓に「Gianism」と入力するとプラグインが表示されますので、「今すぐインストール」をクリックします。
インストール終了後「有効化」をクリックして、プラグインを有効化します。
有効化すると管理画面上部に以下のような表示が出現しますので、「Gianism設定」をクリックし、Gianism設定に移動します。
ダッシュボード>設定>Gianism設定 からも設定画面に移動できます。
手順②:Gianismの設定
設定画面に移動し、Googleアカウントの設定項目まで画面をスクロールすると、「Cliant ID」と「Cliant Seacret」という入力項目があります。
こちらはGoogle Cloud PlatformのGoogle APIコンソールで認証情報を取得する必要があるので、Google Cloud Platformに移動します。
手順③:Google Cloud Platformで認証情報取得
Googleアカウントでのログインを行うために、認証情報を取得します。
以下のリンクをクリックして、Google Cloud Platformにログインして下さい。
公式サイト:Google Cloud Platform
ログインすると下図画面が表示されますので、「プロジェクトの作成」をクリックします。
手順④:プロジェクトの作成
新しいプロジェクトという画面が表示されますので、①任意のプロジェクト名を入力し、②「作成」をクリックして下さい。
手順⑤:APIサービスの選択
次に、APIサービスを選択します。
「APIサービスの有効化」、若しくは「すべて表示」のいずれかをクリックして下さい。
API選択画面が表示されますので、左側メニューにある「ソーシャル」を選択して下さい。
ソーシャル関連のAPIが表示されますので、「Google+API」を選択します。
「Google+API」の詳細画面が表示されますので、「有効にする」をクリックします。
「Google+API」の概要が表示されますので、「認証情報を作成」をクリックします。
手順⑥:認証情報の作成
「Cliant ID」と「Cliant Seacret」を取得するため、認証情報を作成します。
プロジェクトへの認証情報の追加
各項目の設定方法は次のとおりです。
- ①使用するAPI:「Google+API」を選択します。
- ②APIを呼び出す場所:「ウェブサーバー」を選択します。
- ③アクセスするデータの種類:「ユーザーデータ」にチェックを入れます。
- ④必要な認証情報:上記を設定しましたら、クリックして下さい。
OAuth2.0クライアントIDを作成する
OAuth2.0クライアントIDを作成します。
各項目の設定方法は次のとおりです。
- ①名前:任意の名称を入力します(このままでもOKです)
- ②承認済みのJavaScript生成元:URLを入力します。
- ③承認済みのリダイレクトURL:URLの末尾に「google-auth」と記載したURLを入力します。「https://ドメイン名/google-auth」
- ④OAuthクライアントIDを作成:上記を入力したらクリックします。
プロジェクトへの認証情報の追加
プロジェクトへの認証情報の追加を設定します。
各項目の設定方法は次のとおりです。
- ①メールアドレス:Google Cloud Platformにログインしたアドレスが表示されているか確認します。
- ②ユーザーに表示するサービス名:任意の名称を入力します。
- ③次へ:上記を入力したらクリックします。
プロジェクトへの認証情報の追加
「Cliant ID」が発行されますが、後で取得できますので、「完了」をクリックします。
完了をクリックするとダッシュボードに戻り、作成した認証情報が表示されますので、OAuth2.0クライアントIDという項目にある名前をクリックします。
認証情報が発行されますので、発行されたクライアントIDとクライアントシークレットをGianismプラグインの設定画面に入力します。
手順⑦:発行された認証情報をプラグインに設定する
Gianism設定画面に戻り、Google Cloud Platformで取得したクライアントIDとクライアントキーを入力します。
各項目の設定方法は次のとおりです。
- ①Googleと接続:「ON」にする
- ②Client ID:発行されたクライアントIDを入力
- ③Client Secret:発行されたクライアントシークレットを入力
- ④変更を保存:上記を設定したらクリックして設定を保存します。
次に、プラグインの一般設定画面に戻ります。
①設定画面上部にある「設定」タブを選択し、②「すべてのボタンをログイン画面に表示する」にチェックを入れ、③「変更を保存」をクリックします。
以上でGoogleアカウントでログインする設定は完了です。
試しにログアウトしてみると、下図のようにGoogleアカウントのボタンが表示されました。
これで、Googleアカウントを使ってWordPressにログインできるようになります。
まとめ
以上、Googleアカウントを使って、WordPressサイトの管理画面にログインする方法を解説しました。
Googleの設定は面倒かもしれませんが、一度設定すればワンクリックでログインできるようになりますし、セキュリティ対策にもなりますので、Googleアカウントによるログインに興味のある方は、是非お試しください。