如何将社交登录添加到您的 WordPress 企业目录网站

已发表: 2021-09-02

具有前瞻性的企业一直在寻找提高转化率的方法，因此他们关心网站上的用户体验。 这就是为什么许多公司在其网站上使用社交登录（也称为社交登录功能）的原因。

对于网站访问者来说，社交登录意味着他们可以跳过创建新帐户所需的注册程序，只需单击一下即可登录。 它是改善用户体验的传统注册表单的真正便捷替代方案。

同时，对于网站所有者来说，社交登录是一项有用的功能，它可以帮助简化用户验证，同时还可以更可靠地访问用户数据以实现个性化。

在这个简短的教程中，我们将向您展示如何设置 HivePress 身份验证扩展，以便您可以允许您的网站访问者通过 Facebook 和 Google 登录。 我们将逐步解释如何获取 Facebook App ID 和 Google Client ID 并将它们正确地与您的网站集成。

在我们开始之前，重要的是要注意身份验证扩展基于 HivePress，一个免费的 WordPress 目录插件，并且只能在 HivePress 支持的网站上使用。 因此，在本演练中，我们将使用 HivePress 插件及其默认的 WordPress 目录主题 ListingHive。

让我们开始吧！

安装身份验证插件

首先，您需要通过转到HivePress > 扩展部分来安装身份验证扩展。 然后选择必要的附加组件，安装它并通过激活扩展程序继续。

安装插件后，您需要为您的网站选择身份验证方法。 为此，请转到HivePress > 设置 > 用户部分并选择一种可用方法。 如果您想允许用户通过 Facebook 和 Google 登录，则需要选择这两种方法并保存更改，如下面的屏幕截图所示。

向 WordPress 业务目录网站添加身份验证方法。

为您的网站选择身份验证方法后，您可以继续下一步。

添加 Facebook 登录按钮

为了将“使用 Facebook 登录”按钮添加到您的网站，您需要先从 Facebook 获取唯一的 App ID。 此 ID 将您的网站与 Facebook 链接，并允许您请求登录用户所需的 Facebook 个人资料详细信息（例如，电子邮件地址） 。

那么，让我们进入第一步。

在 Facebook 上注册

在创建 Facebook 应用程序之前，您必须注册一个 Facebook 开发者帐户。 为此，请导航到 Facebook for Developers 页面，然后单击登录或开始按钮。 然后，您需要使用您的 FB 帐户登录才能继续。 验证帐户后，您可以进入下一步。

创建应用程序

完成注册后，您可以前往 App Dashboard 创建您的第一个应用程序。 只需单击创建应用程序按钮。

创建一个新的 Facebook 应用程序。

然后你必须选择你的应用类型。 应用类型决定了您的应用可以使用哪些 Facebook API。 简单地说，它定义了您可以在 App Dashboard 中添加的功能。 由于您要在手头的案例中启用“社交登录”功能，因此您需要使用“消费者”应用类型。

选择 Facebook 应用程序类型。

接下来，您需要设置应用名称（例如，您的网站名称）并输入您的有效电子邮件，因为所有开发者通知都将发送到那里。 如果您没有商务管理平台帐户，则无需提及。 最后，单击创建应用程序按钮。

创建一个 FB 应用程序。

创建应用程序后，您将被重定向到应用程序仪表板。 在这里，您需要选择要添加到应用程序的功能。 只需单击Facebook 登录部分中的设置按钮，然后在下一页上选择“Web”平台。

将产品添加到 Facebook 应用程序。

然后，您将看到设置表单，您可以在其中输入您的网站详细信息。 为了允许用户通过 Facebook 登录您的网站，只需填写站点 URL 字段即可。 但如果您是更有经验的用户，您也可以填写其他字段。

在创建 FB 应用程序期间输入网站的 URL。

下一步是导航到左侧边栏中的“设置”>“基本”部分。

Facebook 应用程序的基本设置。

在设置页面上，您必须：

  • 输入您的网站域。
  • 指明隐私政策 URL，以便用户在登录前阅读它们。
  • 指定数据删除说明（包含有关您的网站访问者如何删除其数据的信息的页面） 。
  • 最后，选择您的网站所属的类别。

添加所有必需的详细信息后，保存更改。

在 Facebook for Developers 页面上填写有关我的网站的详细信息。

启用社交登录

好的，您刚刚创建了一个应用程序。 现在您需要将您的 App 模式切换为“Live”并复制 App ID。

切换到 Facebook 应用程序的实时模式。

最后，转到您的网站，导航到WP 仪表板 > HivePress > 设置 > 集成部分，将您的 Facebook 应用 ID 粘贴到应用 ID字段中，然后保存更改。

将 Facebook 应用 ID 添加到 WordPress 业务目录。

而已！ 现在，您的登录表单中应该有一个 Facebook 按钮，允许用户通过他们的 Facebook 帐户登录您的网站。 但是，您可能需要等待几分钟才能进行更改。

现在让我们转到本教程的下一部分来创建和添加 Google 登录按钮。

添加谷歌登录按钮

如果您想将“使用 Google 登录”按钮添加到您的 HivePress 支持的网站，您需要从 Google 获取一个唯一的客户端 ID，它将您的网站与 Google 身份验证 API 链接。 所以，让我们去做吧！

创建新项目

第一步是创建一个新的 Google API 项目（如果您已经有一个项目，您可以使用现有项目）。 为此，请转到 Google API 控制台并单击“创建项目”按钮。 然后您需要输入项目的名称并单击“创建”按钮。

创建一个新的 Google API 项目。

现在您必须转到OAuth 同意屏幕部分并根据您的网站要求选择 OAuth 同意屏幕选项（内部或外部） 。 在本教程中，我们将选择External选项。

然后您将被重定向到应用程序注册表单。 在此表格中，您需要：

  • 设置应用名称（例如，您的网站名称） 。
  • 指示用户支持电子邮件和开发人员的电子邮件 以便 Google 可以通知您有关您的项目的任何更改。
  • 指定指向您的主页、隐私政策页面和服务条款页面的链接。
  • 最后，添加您的网站域。

完成后，单击“保存”按钮。 您可以跳过注册表中的其他步骤并返回您的仪表板。

在 Google OAuth 同意屏幕页面中填写详细信息。

下一步是创建 API 凭据，即 – OAuth Client ID。 您可以通过转到Credentials > Create Credentials > OAuth Client ID部分来执行此操作。

创建 Google API 凭据。

在此部分中，您需要填写名称字段并在“授权的 JavaScript 来源”字段中输入您网站的 URL。 或者，如果您想指定用户在使用 Google 登录后将被重定向到的路径，您可以填写“授权的重定向 URL”字段。

完成后，单击“保存”按钮。

填写创建新凭据所需的详细信息。

启用社交登录

最后，您获得了一个唯一的客户端 ID。 现在您需要将其复制并粘贴到WP Dashboard > HivePress > Settings > Integrations > Client ID部分。 不要忘记保存更改。

将 Google 客户端 ID 添加到 WordPress 业务目录网站。

结论

而已！ 按照上述步骤，您可以轻松设置身份验证扩展并允许您的用户通过 Facebook 和 Google 等第三方服务登录。 完成所有步骤后，您将在登录表单中拥有相同的 Facebook 和 Google 按钮，如下面的屏幕截图所示。

网站注册表单上的社交登录按钮示例。

如果您在添加社交登录按钮时遇到任何问题，请尝试禁用第三方插件（可能存在缓存问题或与第三方插件冲突） 。 此外，请确保您在HivePress > 设置 > 用户部分中启用了身份验证方法并保存了更改。

此外，如果您想优化您的网站，我们建议您查看我们的教程，了解如何加速 HivePress 构建的网站。