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

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

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

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

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

Googleワンクリックログインを使用すると、ユーザーはGoogleアカウントを使用してWordPressサイトに即座にサインインできます。これにより、毎回ユーザー名とパスワードを覚えて入力する必要がなくなります。

この機能により、あなたとユーザーの両方にとってログインがより速く簡単になります。特に役立つ状況をいくつかご紹介します。

• Google Workspaceを使用しているチーム：チームメンバーは、個別のWordPress認証情報を作成する代わりに、仕事用のGoogleアカウントでログインできます。
• 複数著者サイト：ライターや編集者は、追加のパスワードを管理することなく、ダッシュボードにすばやくアクセスできます。
• 会員サイト：会員はより速くサインインでき、全体的なユーザーエクスペリエンスが向上します。
• オンラインコースサイト：学生は簡単にログインでき、学習教材にスムーズにアクセスできます。

ユーザーが非常に少ないシンプルな個人ブログを運営している場合は、この機能は必要ないかもしれません。しかし、人々が定期的にログインするウェブサイトでは、Googleワンクリックログインはプロセスをはるかに便利にすることができます。

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

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

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

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

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

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

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

Googleアプリの作成は技術的に聞こえるかもしれませんが、心配しないでください。コードを知る必要はありません。すべてのステップをガイドします。

Googleアプリの作成

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

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

これで「新規プロジェクト」ページが開きます。プロジェクト名を追加し、場所を選択する必要があります。プロジェクト名は「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でも私たちを見つけることができます。