今運用している会員サイトにユーザーが登録の手間を省けるようにGoogleログイン機能を入れたい。
実はそれはジャイアニズムというプラグインを使えば解決することができます。
ジャイアニズムを使うことでGoogleやLINEログインといったSNSログインを簡単に導入することができます。
なので、今回はジャイアニズムを使ってGoogleログインを導入する方法をご紹介していきます。
今回の記事を読むことで、どういう流れでGoogleログインを導入や流れの確認をすることができるのでぜひ最後まで読んでみてください。
ジャイアニズムとは
ジャイアニズムとはWordPressにSNSログインを実装することができる国産のプラグインになります。
SNSを使って登録もできるので、ユーザーに登録フォームの入力の手間を省いて登録率アップにもつなげることができます。
ジャイアニズムででできること
ジャイアニズムでは、次のSNSログインを実装することができます。
・Facebook
・Twitter
・Google
・Instagram
・LINE
今回はGoogleとジャイアニズムを連携する方法を紹介していきます！
Googleのコンソールにアクセス
まずは下記のリンクからGoogleのコンソールにアクセスします。
コンソールとは、管理画面のようなものです。
ちなみに、Googleとジャイアニズムを連携するにはGoogleのアカウントが必要になります。
なので、作っていない場合はGoogleのアカウントを先に作るようにしましょう。
コンソール画面にアクセスしたら、「プロジェクト作成」を作成をクリックしてプロジェクトを作成画面に移動します。
プロジェクト画面に移動したら、それぞれ作成していきます。
今回はGoogleログインを実装するので、「goolge-login」などの名前を入力するようにします。
ちなみに、ここのプロジェクト名には英数字、引用符、ハイフン、スペース、感嘆符のみ使用できるようです。
組織は特に入力しなくても大丈夫です。
初めて作成する場合は作成をクリックすると、利用規約画面が表示されると思います。
それぞれ入力して、同意しましょう。
Googleの認証情報の取得
プロジェクトを作成したら次は、ジャイアニズムと連携するために必要なGoogleの認証情報の取得しましょう。
まずは作成したプロジェクト名をクリックして、詳細ページに移動します。
クリックすると、プロジェクトのトップページに移動します。
移動したら、メニューの左上のにある三本線のメニューをクリックしましょう。
クリックしたら「APIとサービス」というところにカーソルをもっていきます。
カーソルを持っていくと「認証情報」という項目が表示されるので、それをクリックしましょう。
Googleログインを使うために必要な認証情報を新規作成するように言われます。
なので、「認証情報を作成」をクリックして認証情報を作成します。
この時に表示される項目の中から、「OAuthクライアントID」をクリックするようにしましょう。
同意画面の設定
「OAuthクライアントID」をクリックすると先に「同意画面を設定」するように言われるので設定していきます。
「同意画面を設定」をクリックしましょう。
「同意画面を設定」をクリックすると項目が表示されるのでそれぞれ入力していきます。
作成が完了すると、アプリケーションの種類が選択できるようになります。
アプリケーションの選択
選択できるようになったら、アプリケーションを選択するようにしましょう。
今回はWordPressでログインを実装するので、「ウェブアプリケーション」を選択しましょう。
選択するとそれぞれ入力画面が表示されます。
名前の部分は任意のものに変更しましょう。
承認済みのリダイレクトURLには後で紹介するジャイアニズムの認証URLを設定するようにします。
作成するとジャイアニズムとGoogleを連携するために必要な「クライアント ID」と「クライアントシークレット」が表示されます。
忘れずにコピペして、メモを取っておきましょう。
これで、ジャイアニズムとGoogleを連携するために必要な認証情報の取得は完了です。
ジャイアニズムの設定画面に移動
「チャンネルID」と「チャンネルシークレット」をそれぞれ取得ができたら、今度はジャイアニズムの設定画面に移動します。
設定画面に移動すると下記のような項目が表示されると思います。
ジャイアニズムには次のような基本設定があります。
１．現在の登録設定
２．ログイン画面
３．ボタンサイズ
現在の登録設定について
現在の登録設定については、WordPressのデフォルトの設定を使用するか、ジャイアニズムの設定を使用するかを選べます。
特に理由がなければここは、ジャイアンらしく登録を「登録を強制する」にチェックを入れておきましょう。
ログイン画面設定について
ここでは、すべてのログイン画面にログインボタンを表示するか、ログインボタンを手動で設定するかを選ぶことができます。
特に理由がなければ、「すべてのボタンをログイン画面に表示する」を選んでおきましょう。
ボタンサイズについて
ここでは、ボタンサイズを「中」か「大」の２つのサイズから選ぶことができます。
好きなサイズを選ぶようにしましょう。
ジャイアニズムとGoogleを連携
ジャイアニズムとGoogleを連携するには、ジャイアニズムの設定画面を下にスクロールしていきましょう。
すると、Googleの設定画面が表示されるので、設定に必要な項目を埋めていきます。
ジャイアニズムで必要な項目には次のような項目があります。
・Googleと接続
・Client ID
・Client Secret
・リダイレクトURL
Googleと接続について
Googleと連携して、Googleログインを実装するかどうかを聞かれます。
ここはONにします。
Client ID
ここには「Googleの認証情報の取得」のところで作成したクライアントIDを入力します。
Client Secret
ここには「Googleの認証情報の取得」のところで作成したクライアントシークレットを入力します。
リダイレクトURL
ここはリダイレクトさせる場合に設定します。
リダイレクトURLのコピーのボタンをクリックして、表示されたURLをコピーしてください。
表示されたURLをコピーできたら、「Google API Console」の部分をクリックしましょう。
コピーができたら、さきほどの「アプリケーションの選択」の「承認済みのリダイレクトURL」の部分にコピーしたURLを設定しましょう。
これでリダイレクトURLの設定は完了です。
ここの設定をしておかないとGoogleログインの機能が使用できないので、しっかりと設定しておきましょう。
必要な項目を埋めたら「変更を保存」をクリックしましょう。
これで、ログイン画面に移動するとGoogleログインのボタンが表示されていると思います。
まとめ
今回はジャイアニズムを使ってGoogleログインを実装する方法を紹介しました。
ジャイアニズムは他のSNSログイン(InstagramやLINE)などにも対応しているので、他にも対応させたいものがあれば対応させることができます。
ジャイアニズムはSNSログインを付与するプラグインなので、これだけで会員サイトを作成するとかはできません。
ただ、今の会員サイトにSNSログインを実装したいなどの場合は、とても便利なプラグインなのでぜひ使ってみてください！
