WordPressにOAuthログインを追加する方法(ステップバイステップ)

ユーザーがウェブサイトにログインしやすくすればするほど、アクティブなメンバーになり、コンテンツに関与する可能性が高くなることを学びました。

そこにOAuthログインが登場します。これにより、人々はGoogle、Facebook、Xなどの既存のソーシャルアカウントを使用して、ワンクリックでWordPressサイトにサインインできます。

しかし、ここで重要なのは、OAuth ログインは理論上はシンプルに聞こえますが、正しく設定するのは難しいということです。最も信頼性の高いソリューションを見つけるために、実際の WordPress ウェブサイトでさまざまなプラグインや方法をテストしました。

今日は、WordPressにOAuthログインを追加するための私の実績のある方法を共有します。正しく設定し、一般的な落とし穴を回避し、サイトでスムーズに動作させる方法を説明します。

WordPressにOAuthログインを追加する

💡簡単な回答: WordPressにOAuthログインを追加するには、Nextend Social Loginのようなソーシャルログインプラグインをインストールします。次に、Googleなどのプロバイダーで開発者アプリを作成し、APIクライアントIDとシークレットを取得します。

最後に、これらのキーをプラグインの設定に入力して、サイトでのワンクリックソーシャルログインを有効にします。

WordPressにOAuthログインを追加するメリット

WordPressサイトにOAuthログインを追加することで、パスワード忘れや弱い認証情報といった一般的なユーザーの不満を解消できます。

ユーザーはログイン情報を覚えておくのに苦労することが多く、頻繁でフラストレーションのたまるパスワードリセットにつながります。

OAuthは、主要プロバイダーの安全な認証方法を使用することで、これらの問題を回避します。新しいパスワードを作成する代わりに、訪問者はGoogle、Facebook、GitHubなど、すでに信頼しているアカウントでログインできます。

これらのプロバイダーの多くは、2要素認証も提供しており、セキュリティをさらに強化します。

この合理化されたログインプロセスにより、アクセスが迅速になり、登録の放棄が減少します。簡単であれば、ユーザーはサインアップを完了する可能性が高くなります。

また、スパムを削減し、偽のアカウントを減らすのにも役立ちます。ユーザーは検証済みのサードパーティアカウントを通じてログインするため、ボットが偽のプロフィールを作成することがより困難になります。

全体として、サイトにOAuthログインを追加すると、ユーザーエクスペリエンスがよりスムーズで安全になります。

ここでは、WordPressでそれを設定する方法を説明します。

WordPressにOAuthログインを追加する方法

WordPress で OAuth ログインを設定するのは、思ったよりも簡単です。適切なプラグインを使用すれば、数回のクリックでユーザーが既存のソーシャルアカウントでサインインできるようにすることができます。

Nextend Social Loginの使用をお勧めします。これは、Google、Facebook、Xなどのプロバイダーからのソーシャルログインオプションをサイトに直接追加するように設計された人気のソーシャルメディアプラグインです。

設定が完了すると、ユーザーはログインページと登録ページにソーシャルログインボタンが表示されます。これにより、新しいアカウントを作成せずにサイトに簡単にアクセスできるようになります。

ステップ1:Nextend Social Loginプラグインのインストールと有効化

まず、Nextend Social Loginプラグインをインストールして有効化する必要があります。詳細は、WordPressプラグインのインストール方法に関するチュートリアルを参照してください。

注意: Nextend Social Login には、このチュートリアルで使用できる無料バージョンもあります。

プラグインを有効化したら、WordPress ダッシュボードから 設定 » Nextend Social Login ページに移動します。

このチュートリアルでは、GoogleでOAuthログインを追加する方法を説明します。Nextend Social Loginは、Facebook、X(旧Twitter)、Redditなどからのログインも提供しています。選択するプロバイダーによってプロセスが若干異なる場合があります。

ステップ2:Googleアプリを作成する

まず、プラグインのGoogleセクションにある「はじめに」ボタンをクリックします。

Google の「開始する」ボタンをクリック

これにより、Googleアプリを作成するための画面上の手順が表示されるページに移動します。

指示を確認したら、リンクをクリックしてGoogle Cloud Consoleに移動します。

Google Consoleリンクをクリックする

ここで、Googleアカウントの認証情報でログインするように求められる場合があります。

コンソールに入ったら、上部にあるボタンをクリックしてポップアップを開き、「新しいプロジェクト」を選択します。

新規プロジェクトボタンをクリック

次に、プロジェクトに名前を付ける必要があります。

必要に応じて組織と場所を追加し、「作成」ボタンをクリックすることもできます。

プロジェクト名、組織、場所を追加

プロジェクトを追加すると、ダッシュボードに戻ります。ここから、左側の列から「OAuth同意画面」タブに切り替えます。

「開始する」ボタンをクリックしてください。

OAuth同意画面で開始をクリック

次に、アプリに名前を追加する必要があります。これは、ユーザーがログインの同意を求められたときに表示される名前です。

次に、「ユーザーサポートメール」フィールドにビジネスメールを入力して、質問がある場合に連絡できるようにします。

「次へ」ボタンをクリックして続行します。

アプリ名とサポートメールを追加

その後、WordPressでOAuthログインのオーディエンスを選択する必要があります。

アプリが Google Workspace (旧 G Suite) 組織内でプライベートに使用されることを意図している場合は、「内部」オプションを選択できます。これは、会社のドメイン内のユーザーのみがログインできることを意味します。

一方、「外部」オプションは、アプリまたはウェブサイトが公開使用を目的としている場合に最適です。これにより、Googleアカウントを持つ誰もがログインできるようになります。

最初は、アプリはテストモードになります。これは、手動で追加したテストユーザーのみがログインできることを意味します。

OAuthログインのオーディエンスを選択

その後、連絡先メールアドレスを再度追加してください。

ここでGoogleはプロジェクトへの変更について通知します。複数のメールアドレスを追加することもできます。

連絡先情報を追加する

最後に、Google APIサービスポリシーに同意するだけです。

最後に、「作成」ボタンをクリックします。

アプリを作成する

プロセスが完了すると、「OAuth の概要」ページに移動します。

ここから、「OAuthクライアントを作成」ボタンをクリックします。

OAuthクライアントを作成ボタンをクリック

次の画面で、OAuth クライアント ID を作成する必要があります。

アプリケーションタイプのドロップダウンメニューから「Webアプリケーション」オプションを選択します。

次に、クライアントIDの名前を追加します。

クライアントIDを作成する

次に、「承認済みリダイレクトURI」セクションまでスクロールダウンし、「+ URLを追加」ボタンをクリックします。

ここで、WordPressダッシュボードでNextend Social Loginプラグインによって提供される一意のURLを追加する必要があります。

Nextendが提供するリダイレクトURL

このURLは、ログイン後にユーザーを戻すことができる唯一の有効なアドレスをGoogleに伝えます。これは、ハイジャックを防ぐための重要なセキュリティステップです。

URLを追加したら、「作成」ボタンをクリックします。

Google Search ConsoleにリダイレクトURLを追加する

資格情報が表示されたポップアップが表示されます。

ここからクライアントIDとクライアントシークレットをコピーして、安全な場所に保管してください。

クライアントシークレットはパスワードのように扱い、決して公開しないでください。これは、お使いのアプリとユーザーデータを保護するため、非常に重要です。

クライアントIDとクライアントシークレットをコピーする

次に、左側のメニューから「OAuth同意画面」ページに戻ります。

アプリケーションを「テスト」から「本番」ステータスに移行するには、「アプリを公開」というラベルのボタンを見つけます。

これによりポップアップが表示され、「確認」ボタンをクリックできます。

送信後、Googleの公式検証およびレビュープロセスには数日かかる場合があることに注意してください。

アプリを公開ボタンをクリック
ステップ3:Googleの設定を確認する

次に、WordPressダッシュボードに戻り、上部にあるGoogleの「設定」タブに切り替えます。

その後、先ほどコピーしたクライアントIDとクライアントシークレットを追加し、「変更を保存」ボタンをクリックします。

クライアントIDとクライアントシークレットを追加する

これが完了すると、Nextend Social Loginは設定を確認するように求めるポップアップを表示します。「設定を確認」ボタンをクリックしてください。

この手順をスキップすると、Google OAuthサインインオプションが画面に表示されないことに注意してください。

設定を確認ボタンをクリック

次に、上部から「ボタン」セクションに切り替えます。

ここで、Google OAuthログインのボタンのスタイルを選択できます。お好みで、カスタムコードを使用してカスタムボタンを作成することもできます。

完了したら、「変更を保存」ボタンをクリックして変更を保存します。

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

次に、上部にある「グローバル設定 » ログインフォーム」タブに切り替える必要があります。

ここで、「ログインフォーム」オプションの「ログインボタンを表示する」ボックスをチェックして、ユーザーがここから簡単に OAuth サインインオプションを選択できるようにします。

💡関連記事:デフォルトのWordPressログインフォームを使用したくない場合は、カスタムWordPressログインページを作成する方法に関するチュートリアルをご覧ください。カスタムWordPressログインページの作成方法

残りの設定もお好みに合わせて構成できます。

ログインボタンを表示するオプションを選択

次に、「変更を保存」ボタンをクリックします。

次に、WordPressダッシュボードから設定 » Nextend Social Loginページに戻る必要があります。

Google OAuthログインを有効にする

最後に、「Google」オプションの下にある「有効化」ボタンをクリックします。これで、このプロセス全体を異なるサードパーティアプリで繰り返して、それらのOAuthログインを追加できます。

完了したら、WordPressサイトにアクセスして、OAuthログインが機能していることを確認してください。

OAuthログインプレビュー

OAuthは既存のソーシャルアカウントを使用してログインを簡素化しますが、マジックリンクによるパスワードなしログインは、パスワードを完全に削除することでユーザーエクスペリエンスを向上させる別の方法を提供します。

この方法を使用すると、ユーザーはWordPressログイン認証情報をバイパスできます。メールで送信された安全なリンクをクリックするだけでアカウントにログインできます。

プラグインは自動的にログイン画面にマジックリンクボタンを追加します

Magic Loginのようなプラグインを使用すると、ユーザーはメールアドレスを入力するだけで、一度だけ使用できるログインリンクが受信トレイに送信されます。リンクをクリックすると、パスワードなしで即座にアクセスできます。

これにより、ログインの障壁が減り、アカウントのセキュリティが維持されます。特に、参入障壁を最小限に抑えたいウェブサイトに役立ちます。

マジックログイン設定

さらに、これらのログインリンクは時間制限があり、一意であるため、ブルートフォース攻撃に対するセキュリティの追加レイヤーを提供します。

開始するには、WordPress へのパスワードレスログインの追加方法に関するチュートリアルをご覧ください。

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

WordPressにOAuthログインを追加する前に、読者からよく寄せられる質問をいくつかご紹介します。

OAuthログインとは何ですか?

OAuthは、ユーザーがGoogle、Facebook、Xなどのサービスから既存のアカウントを使用してウェブサイトにサインインするための安全な方法です。これにより、サイトのためだけに新しいパスワードを作成して覚えておく必要がなくなります。

WordPressサイトにソーシャルログインを追加しても安全ですか?

はい、非常に安全です。OAuthは、パスワードではなくトークンに依存する主要なテクノロジー企業が使用する標準プロトコルです。あなたのウェブサイトは、ユーザーのソーシャルアカウントからの機密ログイン情報を処理したり保存したりする必要はありません。

Google以外のソーシャルログインオプションを追加できますか?

もちろん、Nextend Social Loginプラグインは他の多くのプラットフォームもサポートしています。ユーザーが最もよく利用するサービスに応じて、Facebook、X(旧Twitter)、LinkedInなどのログインボタンを簡単に追加できます。

WordPressにOAuthログインを追加するには費用がかかりますか?

無料で始めることができます。Nextend Social Loginプラグインには、GoogleやFacebookなどの一般的なオプションを含む無料バージョンがあります。より多くのプロバイダーと高度な機能については、プロバージョンも提供しています。

この記事がWordPressにOAuthログインを追加する方法を学ぶのに役立ったことを願っています。また、WordPressにGoogleのワンクリックログインを追加する方法に関する初心者向けガイドや、WordPressのログインおよび登録フォームにCAPTCHAを追加する方法に関するチュートリアルも参照することをお勧めします。

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

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

コメント

  1. おめでとうございます。この記事の最初のコメント者になる機会を得ました。
    質問や提案はありますか?コメントを残して、議論を開始してください。

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。