WordPressビジネスディレクトリWebサイトにソーシャルログインを追加する方法

将来を見据えた企業は、コンバージョン率を上げる方法を常に模索しているため、ウェブサイトでのユーザーエクスペリエンスに関心を持っています。 そのため、多くの企業がWebサイトでソーシャルサインオン機能とも呼ばれるソーシャルログインを使用しています。

Webサイトの訪問者にとって、ソーシャルログインとは、新しいアカウントを作成するために必要な登録手順をスキップでき、ワンクリックでサインインできることを意味します。 これは、UXを向上させる従来の登録フォームに代わる本当に便利な方法です。

同時に、Webサイトの所有者にとって、ソーシャルログインは、ユーザーの確認を簡素化すると同時に、パーソナライズのためのユーザーデータへのより信頼性の高いアクセスを提供するのに役立つ便利な機能です。

この短いチュートリアルでは、HivePress認証拡張機能を設定して、Webサイトの訪問者がFacebookとGoogleを介してサインインできるようにする方法を説明します。 FacebookアプリIDとGoogleクライアントIDを取得し、それらをWebサイトに正しく統合する方法を段階的に説明します。

始める前に、認証拡張機能は無料のWordPressディレクトリプラグインであるHivePressに基づいており、HivePressを利用したWebサイトでのみ使用できることに注意してください。 したがって、このウォークスルーでは、HivePressプラグインをデフォルトのWordPressディレクトリテーマであるListingHiveとともに使用します。

始めましょう！

認証アドオンのインストール

まず、 [HivePress]> [拡張機能]セクションに移動して、認証拡張機能をインストールする必要があります。 次に、必要なアドオンを選択してインストールし、拡張機能をアクティブ化して続行します。

アドオンをインストールしたら、Webサイトの認証方法を選択する必要があります。 これを行うには、 [HivePress]>[設定]>[ユーザー]セクションに移動し、使用可能な方法の1つを選択します。 ユーザーがFacebookとGoogleのいずれかを介してサインインできるようにする場合は、以下のスクリーンショットに示すように、両方の方法を選択して変更を保存する必要があります。

Webサイトの認証方法を選択したら、次の手順に進むことができます。

Facebookログインボタンの追加

「Facebookでログイン」ボタンをWebサイトに追加するには、最初にFacebookから一意のアプリIDを取得する必要があります。 このIDは、WebサイトをFacebookにリンクし、ユーザーのログインに必要なFacebookプロファイルの詳細（電子メールアドレスなど）を要求できるようにします。

それでは、最初のステップに移りましょう。

Facebookに登録する

Facebookアプリを作成する前に、Facebook開発者アカウントを登録する必要があります。 これを行うには、Facebook for Developersページに移動し、 [ログイン]または[開始]ボタンをクリックします。 次に、続行するにはFBアカウントでサインインする必要があります。 アカウントを確認したら、次のステップに進むことができます。

アプリの作成

登録が完了すると、アプリダッシュボードに移動して最初のアプリを作成できます。 [アプリの作成]ボタンをクリックするだけです。

次に、アプリの種類を選択する必要があります。 アプリの種類によって、アプリで使用できるFacebookAPIが決まります。 簡単に言うと、アプリダッシュボードに追加できる機能を定義します。 手元のケースで「ソーシャルログイン」機能を有効にしたいので、「コンシューマー」アプリタイプを使用する必要があります。

次に、すべての開発者通知がそこに送信されるため、アプリ名（たとえば、Webサイト名）を設定し、有効な電子メールを入力する必要があります。 ビジネスマネージャーアカウントをお持ちでない場合は、言及する必要はありません。 最後に、[アプリの作成]ボタンをクリックします。

アプリを作成すると、アプリダッシュボードにリダイレクトされます。 ここで、アプリに追加する機能を選択する必要があります。 Facebookログインセクションの[設定]ボタンをクリックし、次のページで「Web」プラットフォームを選択するだけです。

次に、セットアップフォームが表示されます。ここで、Webサイトの詳細を入力できます。 ユーザーがFacebook経由でWebサイトにサインインできるようにするには、[サイトのURL]フィールドにのみ入力するだけで十分です。 ただし、経験豊富なユーザーの場合は、他のフィールドにも入力できます。

次のステップは、左側のサイドバーの[設定]>[基本]セクションに移動することです。

設定ページでは、次のことを行う必要があります。

• ウェブサイトのドメインを入力してください。
• ユーザーがログインする前にそれらを読むことができるように、プライバシーポリシーのURLを示します。
• データ削除手順（Webサイトの訪問者がデータを削除する方法に関する情報が記載されたページ）を指定します。
• 最後に、Webサイトが属するカテゴリを選択します。

必要な詳細をすべて追加したら、変更を保存します。

ソーシャルログインの有効化

さて、あなたはアプリを作成しました。 次に、アプリモードを「ライブ」に切り替えて、アプリIDをコピーする必要があります。

最後に、Webサイトに移動し、 [WPダッシュボード]> [HivePress]>[設定]>[統合]セクションに移動し、FacebookアプリIDを[アプリID ]フィールドに貼り付けて、変更を保存します。

それでおしまい！ これで、サインインフォームにFacebookボタンが表示され、ユーザーがFacebookアカウントを介してWebサイトにサインインできるようになります。 ただし、変更が行われるまでに数分待たなければならない場合があります。

それでは、このチュートリアルの次の部分に移動して、Googleログインボタンを作成して追加しましょう。

Googleログインボタンの追加

HivePressを利用したウェブサイトに[LogInwith Google]ボタンを追加する場合は、ウェブサイトをGoogle認証APIにリンクする一意のクライアントIDをGoogleから取得する必要があります。 だから、やってみましょう！

新しいプロジェクトの作成

最初のステップは、新しいGoogle APIプロジェクトを作成することです（既存のプロジェクトがある場合は、既存のプロジェクトを使用できます）。 これを行うには、Google APIコンソールに移動し、[プロジェクトの作成]ボタンをクリックします。 次に、プロジェクトの名前を入力して、[作成]ボタンをクリックする必要があります。

次に、 OAuth同意画面セクションに移動し、Webサイトの要件に応じてOAuth同意画面オプション（内部または外部）を選択する必要があります。 このチュートリアルでは、[外部]オプションを選択します。

その後、アプリ登録フォームにリダイレクトされます。 このフォーム内で、次のことを行う必要があります。

• アプリ名（例：ウェブサイト名）を設定します。
• ユーザーサポートのメールアドレスと開発者のメールアドレスを示します そのため、Googleはプロジェクトへの変更について通知することができます。
• ホームページ、プライバシーポリシーページ、および利用規約ページへのリンクを指定します。
• 最後に、ウェブサイトのドメインを追加します。

終了したら、[保存]ボタンをクリックします。 登録フォーム内の他の手順をスキップして、ダッシュボードに戻ることができます。

次のステップは、APIクレデンシャル、つまり–OAuthクライアントIDを作成することです。 これを行うには、 [クレデンシャル]>[クレデンシャルの作成]>[OAuthクライアントID]セクションに移動します。

このセクション内で、名前フィールドに入力し、「承認されたJavaScriptオリジン」フィールドにWebサイトのURLを入力する必要があります。 オプションで、ユーザーがGoogleにログインした後にリダイレクトされるパスを指定する場合は、[承認されたリダイレクトURL]フィールドに入力できます。

完了したら、[保存]ボタンをクリックします。

ソーシャルログインの有効化

最後に、一意のクライアントIDを取得しました。 次に、それをコピーして、 [WPダッシュボード]>[HivePress]>[設定]>[統合]>[クライアントID]セクションに貼り付ける必要があります。 変更を保存することを忘れないでください。

結論

それでおしまい！ 上記の手順に従うことで、認証拡張機能を簡単に設定し、ユーザーがFacebookやGoogleなどのサードパーティサービスを介してログインできるようにすることができます。 すべての手順を完了すると、下のスクリーンショットに示すように、ログインフォームに同じFacebookボタンとGoogleボタンが表示されます。

ソーシャルログインボタンの追加で問題が発生した場合は、サードパーティのプラグインを無効にしてみてください（キャッシュの問題またはサードパーティのプラグインとの競合が発生している可能性があります） 。 また、 [HivePress]>[設定]>[ユーザー]セクションで認証方法を有効にし、変更を保存したことを確認してください。

さらに、Webサイトを最適化する場合は、HivePressで構築されたWebサイトを高速化する方法に関するチュートリアルを確認することをお勧めします。