WordPressでGoogleによるワンクリックログインを追加する方法

ワンクリックGoogleログインを使用すると、訪問者は既存のアカウントを使用してサイトにサインアップまたはログインできます。さらに別のユーザー名とパスワードを作成する代わりに、ワンクリックでコンテンツやオンラインストアにアクセスできます。

このようなシンプルさをユーザーは高く評価していることがわかりました。Googleログインを提供することは、プロセスをより速く、より簡単に​​するだけでなく、ユーザーエクスペリエンスを向上させ、コンバージョンを促進し、カート放棄を減らすこともできます。

このステップバイステップガイドでは、WordPressサイトにワンクリックGoogleログインを追加する方法を説明し、ユーザージャーニー全体を効率化できるようにします。🚀

WordPressでワンクリックGoogleログインを追加する理由

WordPressのログインフォームにワンクリックGoogleログインを有効にすると、ユーザーはGoogleアカウントで素早くサインインできるため時間を節約できます。これにより、毎回ログイン情報を入力する必要がなくなります。

単純なブログを運営している場合、この機能は役に立たないかもしれません。

ただし、組織がプロフェッショナルなビジネスメールアドレスにGoogle Workspaceを使用している場合、チームメンバーは組織のGoogleアプリアカウントをログインに使用できます。

シングルサインオン機能（例：ワンクリックGoogleログイン）は、ログインが必要なあらゆるウェブサイト（例：マルチオーサーウェブサイト、会員制ウェブサイト、オンラインコースを販売しているウェブサイトなど）で非常に役立ちます。

完璧なユーザー登録フォームを作成する

WPForms は、WordPress向けの最高のドラッグ＆ドロップフォームビルダーです。ソーシャルログインも素晴らしいですが、WPFormsを使用すると、ユーザーから必要な情報を正確に収集するための完全にカスタムなユーザー登録フォームを作成できます。

数分で問い合わせフォーム、支払いフォーム、アンケートなども作成できます。

今すぐWPFormsを使い始める

次に、WordPressウェブサイトにワンクリックでGoogleログインを簡単に追加する方法を見てみましょう。

WordPressでワンクリックGoogleログインを追加する方法

まず、 Nextend Social Login and Register プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

このチュートリアルでは、Google、Twitter、Facebookログインをサポートする無料プラグインを使用します。 Nextend Social Loginの有料版もあり、PayPal、Slack、TikTokなど、さまざまなサイトのソーシャルログインを追加できます。

有効化後、WordPress管理エリアの 設定 » Nextend Social Login に移動する必要があります。この画面には、利用可能なさまざまなソーシャルログインオプションが表示されます。

WordPressウェブサイトにGoogleログインを追加するには、Googleロゴの下にある「開始する」ボタンをクリックする必要があります。

ここで、最初のステップはGoogleアプリを作成することになります。

Googleアプリの作成は技術的に聞こえるかもしれませんが、心配しないでください。

コードを知る必要はありません。すべてのステップを順を追って説明します。

Googleアプリの作成

このアプリを作成するには、WordPressダッシュボードとGoogle Developers Consoleを切り替える必要があります。WordPressダッシュボードを現在のタブで開いたままにし、新しいブラウザタブを開くことをお勧めします。

次に、Google Developers Consoleのウェブサイトにアクセスできます。まだログインしていない場合は、Googleアカウントでログインするように求められます。

次に、トップメニューから「プロジェクトを選択」をクリックする必要があります。ポップアップが表示されるので、「新しいプロジェクト」ボタンをクリックして続行してください。

これで「新規プロジェクト」ページが開きます。プロジェクト名を追加し、場所を選択する必要があります。プロジェクト名は「Googleログイン」など、好きなものを指定できます。

Google Workspace アカウントでログインした場合、組織名が自動的に入力されます。そうでない場合は、「組織なし」のままにしてください。

次に、「作成」ボタンをクリックして続行します。

次に、「APIとサービス」ダッシュボードにリダイレクトされます。このページで、左側のメニューにある「OAuth同意画面」をクリックする必要があります。

ここで、ログインを許可するユーザーの種類を選択する必要があります。

組織のGoogleアカウントを持つユーザーのみがログインする場合は、「内部」を選択してください。それ以外の場合は、ユーザーが組織外のメールアドレスを持っている場合は「外部」を選択してください。

例えば、@gmail.comアカウントを持つユーザーと@yourcompanyemail.comアドレスを持つユーザーなどです。

続行する準備ができたら、「作成」ボタンをクリックします。これで、アプリに関する情報の追加を開始できます。

まず、アプリ名フィールドに会社名を入力する必要があります。これは、ログイン時にユーザーに表示されます。例：「Smith Training ServicesはGoogleアカウントへのアクセスを求めています。」

また、Googleにログインしたメールアドレスを追加する必要があります。これにより、ユーザーはGoogleログイン画面について質問できるようになります。

それが完了したら、「アプリのドメイン」セクションまでスクロールダウンします。ここでは、ウェブサイトのホームページ、プライバシーポリシーページ、および利用規約ページへのリンクを追加する必要があります。

次に、「ドメインを追加」ボタンをクリックして、ウェブサイトのドメイン名（例：「example.com」）を追加する必要があります。

複数のウェブサイトにワンクリックGoogleログインを追加したい場合は、「+ドメインを追加」ボタンをクリックして別のドメインを追加できます。

最後に、Googleがプロジェクトの変更について通知できるように、1つ以上のメールアドレスを追加する必要があります。

終了したら、「保存して続行」ボタンをクリックしてください。

次に、スコープとテストユーザーのページが表示されます。これらの両方のページで、一番下までスクロールして「保存して続行」ボタンをクリックしてください。

このステップの最後のページには、OAuth同意画面設定の概要が表示されます。

次に、ログインプラグインがGoogle Cloudに接続するために必要となるキーを作成します。

左側のメニューから「認証情報」をクリックし、画面上部の「+ 認証情報を作成」ボタンをクリックする必要があります。「OAuth クライアント ID」オプションを選択してください。

これにより、「OAuthクライアントIDの作成」ページに移動します。

「アプリケーションタイプ」ドロップダウンから「Webアプリケーション」を選択する必要があります。

ページにいくつかの設定が追加されます。「承認済みリダイレクトURI」セクションまでスクロールダウンし、「+ URIの追加」ボタンをクリックする必要があります。

次に、次のURLをフィールドに入力する必要があります。

このURLは「https://」で始まる必要があります。Googleはこの機能が正しく機能するために安全な接続を必要とするため、非常に重要です。

https://example.com/wp-login.php?loginSocial=google

必ず「example.com」をご自身のウェブサイトのドメイン名に置き換えてください。

これが完了したら、「作成」ボタンをクリックして設定を保存します。設定が有効になるまで、5分から数時間かかる場合があります。

OAuthクライアントが作成されました！

「クライアントID」と「クライアントシークレット」を含むポップアップが表示されます。これらのキーをWordPress管理画面のプラグイン設定ページに貼り付ける必要があります。

キーを一つずつコピーするには、右側にある「コピー」アイコンをクリックするだけです。

Googleキーをプラグインに追加する

次に、ウェブサイトのブラウザタブに戻り、「設定」**»**「Nextendソーシャルログイン」の下にある「設定」タブをクリックします。ここに、クライアントIDとクライアントシークレットのフィールドが表示されます。

Google Cloud Consoleからキーをコピーして、これらのフィールドに貼り付ける必要があります。

それが完了したら、「変更を保存」ボタンをクリックして設定を保存してください。

次に、設定が正しく機能しているかテストする必要があります。これは、実際のユーザーがウェブサイトにログインしようとしたときにエラーに遭遇することを避けたいからです。

「設定を確認する」ボタンをクリックするだけで、プラグインが作成したGoogleアプリが正しく機能していることを確認します。

手順を正しく実行した場合、「正常に動作 - 無効」という通知が表示されるはずです。

このメッセージは混乱を招くかもしれませんが、実際には良い知らせです。「正常に動作」は、設定が正しく、Googleへの接続が成功したことを確認します。

「無効」は、ウェブサイト上のログインボタンがまだアクティブになっていないことを意味します。

これで「有効にする」ボタンをクリックすると、ユーザーに対してGoogleログインが有効になります。

それを行うと、Googleログインが有効になったことを確認するメッセージが表示されます。

ボタンのスタイルとラベルを選択する

Nextend のデフォルトのボタンのスタイルとラベルは非常に標準的で、ほとんどのウェブサイトで機能します。ただし、画面上部の「ボタン」タブをクリックすることでカスタマイズできます。

ソーシャルログインボタンで利用可能なさまざまなスタイルが表示されます。別のスタイルを使用するには、ラジオボタンをクリックして選択するだけです。

それが完了したら、「ログインラベル」フィールドのテキストを編集してボタンのテキストを変更することもできます。

必要であれば、HTMLを使用してログインラベルに基本的なフォーマットを適用できます。例えば、<b>と</b>タグを使用してテキストを太字にすることができます。

また、ユーザーがGoogleアカウントとあなたのウェブサイトをリンクしたり解除したりできる「リンクラベル」と「リンク解除ラベル」フィールドを編集することもできます。

ログインボタンをサイトの他の場所（サイドバーウィジェットや特定のページなど）に配置したい場合は、プラグインのショートコードを使用して簡単に行うことができます。

設定を保存するには、「変更を保存」ボタンをクリックしてください。

Googleアプリをテストモードから外す

さて、Google Cloudブラウザタブで最後に行うべきことがあります。クライアントIDとクライアントシークレットが表示されたポップアップがまだ表示されているはずです。ポップアップの下部にある「OK」をクリックすると、ポップアップを閉じることができます。

次に、左側のメニューから「OAuth 同意画面」をクリックする必要があります。

Googleアプリが「テスト」モードになっていることがわかります。これにより、限られた数のユーザーでアプリをテストできます。プラグインで設定を検証したときに「正常に動作」通知を受け取ったので、「本番稼働」モードに移行できます。

これは、「アプリを公開」ボタンをクリックすることで行います。次に、「本番環境にプッシュしますか？」というタイトルのポップアップが表示されます。

単に「確認」をクリックして、誰もがあなたのサイトでワンステップのGoogleログインを使用できるようにします。

このチュートリアルを注意深く実行した場合、検証ステータスは「検証は不要です」と表示されているはずです。

これで、アプリはすべてのGoogleユーザーと連携するようになります。

これで、ユーザーがあなたのウェブサイトにログインするときに、Googleでログインするオプションが表示されるようになります。

ただし、希望する場合は、標準のWordPressのユーザー名とパスワードを使用して引き続きログインできます。

訪問者にとってGoogleログインがどのように機能するかを以下に示します。

新規訪問者はこのボタンを使用して、サイトでアカウントを即座に登録できます。既存のユーザーは、アカウントのメールアドレスがGoogleのメールアドレスと同じであれば、このボタンを使用してログインできます。

ウェブサイトの他の場所にGoogleログインボタンを追加したい場合は、ショートコードを使用して行うことができます。Nextendの「使用法」タブをクリックすると、詳細を確認できます。

Googleログインに関するよくある質問

ウェブサイトにGoogleログインを追加することについて、読者からよく寄せられる質問をいくつかご紹介します。

WordPressサイトへのGoogleログインの追加は安全ですか？

はい、非常に安全です。このプロセスでは、Googleの標準OAuth 2.0プロトコルを使用します。これにより、お客様のウェブサイトはユーザーのGoogleパスワードを処理または保存することなく、資格情報を安全に保つことができます。

あなたのサイトは、ユーザーの身元を確認するためにGoogleから安全なトークンを受け取るだけです。

他のソーシャルメディアプラットフォームのログインオプションを追加できますか？

もちろんです。無料のNextend Social Loginプラグインは、FacebookとTwitterもサポートしています。有料版にアップグレードすると、LinkedIn、PayPal、Slack、TikTokなど、他の多くのプラットフォームを追加できます。

訪問者がGoogleアカウントを持っていない場合はどうなりますか？

標準のWordPressログインフォームは引き続き完全に機能します。Googleログインボタンを追加すると、便利で追加のオプションが提供されますが、デフォルトのユーザー名とパスワードフィールドは削除されません。

この機能は私のウェブサイトを遅くしますか？

いいえ、そうなるべきではありません。Nextend Social Loginプラグインは軽量でパフォーマンスが最適化されています。認証プロセスはGoogleの高速サーバーで行われるため、サイトの速度に目立った影響はありません。

GoogleログインはWooCommerceやメンバーシップサイトでも機能しますか？

はい、人気のeコマースプラグインやメンバーシッププラグインと連携して、素晴らしい効果を発揮します。チェックアウトや登録プロセスを簡素化することで、WooCommerceストアでのカート放棄を減らし、MemberPressのようなプラグインを使用しているサイトでのサインアップを増やすことができます。

ログインページのカスタマイズに関する追加リソース

この記事が、WordPressにGoogleによるワンクリックログインを追加する方法を学ぶのに役立ったことを願っています。

ウェブサイトのログインエクスペリエンスをカスタマイズする方法に関する他のガイドも参照することをお勧めします。

• WordPressにFacebookログインを追加する方法
• WordPressにソーシャルログインを追加する方法（簡単な方法）
• おすすめのWordPressログインページプラグイン（安全＆カスタマイズ可能）
• WordPressでマジックリンクを使ったパスワードなしログインを追加する方法
• WordPressでOTPによる電話番号でのログインを追加する方法
• カスタムWordPressログインページを作成する方法（究極ガイド）
• WordPressでログイン試行を制限すべき理由と方法
• WordPressでカスタムログインURLを追加する方法（ステップバイステップ）
• WordPressのログインおよび登録フォームにCAPTCHAを追加する方法
• WordPressでページを表示するためにログインを要求する方法
• WordPressに二要素認証を追加するための初心者ガイド（無料の方法）
• WordPressでユーザーログインを1台のデバイスに制限する方法

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。