How to Add OAuth Login in WordPress (Step by Step)

我了解到,您让用户越容易登录您的网站,他们就越有可能成为活跃会员并与您的内容互动。

这就是 OAuth 登录的用武之地——它让人们只需使用他们现有的社交帐户(如 Google、Facebook 或 X)只需单击一下即可登录您的 WordPress 网站。

但问题是:虽然 OAuth 登录在理论上听起来很简单,但正确设置它可能很棘手。我已经在真实的 WordPress 网站上测试了各种插件和方法,以找到最可靠的解决方案。

今天,我将分享我将 OAuth 登录添加到 WordPress 的行之有效的方法。我将向您展示如何正确设置它,避免常见的陷阱,并让它在您的网站上顺利运行。

在 WordPress 中添加 OAuth 登录

将 OAuth 登录添加到 WordPress 的好处

使用传统登录方式,弱密码和忘记凭据是常见问题。

用户通常难以记住他们的登录详细信息,导致沮丧和频繁的密码重置。

OAuth 通过使用主要提供商提供的安全身份验证方法来帮助防止这些问题。访问者可以使用他们已经信任的帐户登录,而不是创建新的用户名和密码,例如 Google、Facebook 或 GitHub。

其中许多提供商还提供双重身份验证,增加了额外的安全层。

这种简化的登录过程可以加快访问速度并减少放弃的注册。用户更有可能在容易的时候完成注册。

OAuth 还增加了一个额外的安全层,可以减少垃圾邮件注册和虚假帐户。由于用户通过经过验证的第三方帐户登录,因此机器人和垃圾邮件发送者更难创建虚假个人资料。

总体而言,将 OAuth 登录添加到您的网站可为您的用户提供更流畅、更安全的体验。现在,我将向您展示如何在 WordPress 中设置它。

如何在 WordPress 中添加 OAuth 登录

在 WordPress 中设置 OAuth 登录比您想象的要容易。使用正确的插件,您只需点击几下即可允许用户使用他们现有的社交帐户登录。

我建议使用 Nextend Social Login。它是一个流行的社交媒体插件,支持通过 Google、Facebook 和 Twitter 等第三方提供商登录。

设置完成后,用户将在您的登录和注册页面上看到社交登录按钮,使他们无需创建新帐户即可轻松访问您的网站。

第 1 步:安装并激活 Nextend 社交登录插件

首先,您需要安装并激活 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 帐户进行 OAuth 登录的 Google 应用程序的屏幕说明。

阅读此内容后,只需单击提供的 Google Search Console 链接。

点击 Google Console 链接

这将带您进入一个新屏幕,您可以在其中添加您的 Google 帐户凭据以进行登录。

然后,单击顶部的按钮打开一个弹出窗口,然后单击“新建项目”按钮。

单击 New Project 按钮

接下来,您需要为正在创建的项目添加名称。

您还可以添加位置和组织。之后,单击 'Create' 按钮。

添加项目名称、组织和位置

添加项目后,您最终将返回仪表板。从这里,切换到左列的“OAuth 同意屏幕”选项卡。

继续并单击 'Get Started' 按钮。

单击 OAuth 同意屏幕上的 Get Started

现在,您必须为您的应用程序添加一个名称。此名称将在请求同意时显示。

然后,在“用户支持电子邮件”字段中添加您的企业电子邮件地址,以便用户可以就其同意的问题与您联系。然后,单击“下一步”按钮。

添加应用名称和支持电子邮件

接下来,您必须为 WordPress 中的 OAuth 登录选择一个受众。

如果您的应用程序旨在供 Google Workspace(以前称为 G Suite)组织内私人使用,您可以选择“内部”选项。这意味着只有您公司域中的用户才能登录。

另一方面,如果您的应用程序或网站旨在供公众使用,则“外部”选项是最好的。这允许任何拥有 Google 帐户的人登录。

但是,当您首次设置时,该应用程序将处于测试模式,这意味着只有您手动添加为测试用户的用户才能访问它。

准备好发布后,您可能需要提交应用以供 Google 验证流程取消限制。

为您的 OAuth 登录选择受众

之后,再次添加您的电子邮件地址。

这将是 Google 通知您项目的任何更改的电子邮件。您还可以添加多个电子邮件地址。

添加您的联系信息

最后,只需同意 Google API 服务策略即可。

最后,单击 'Create' 按钮。

创建您的应用

该过程完成后,您将被带到“OAuth 概述”页面。

在此处,单击 'Create OAuth Client' 按钮。

单击 Create OAuth Client 按钮

在下一个屏幕上,您需要创建一个 OAuth 客户端 ID。

选择 Application type 下拉菜单下的 'Web application' 选项。

然后,为您的客户端 ID 添加名称。

创建客户端 ID

之后,向下滚动到 '授权的重定向 URI' 部分,然后单击 '+ 添加 URL' 按钮输入重定向 URL

在这里,您需要添加 Nextend Social Login 插件提供的链接。此 URL 可确保用户在使用 Google 登录后被正确重定向回您的 WordPress 网站。

然后,单击 'Create' 按钮。

在 Google Search Console 中添加重定向 URL

您可以通过返回 WordPress 仪表板找到 Nextend 为您的网站创建的 URL。

在这里,检查插件给出的屏幕说明,其中提到了所需的重定向 URL。

Nextend 提供的重定向 URL

创建 OAuth 客户端 ID 后,屏幕上将出现一个弹出窗口,列出您的凭据。

只需从这里复制您的客户端 ID 和客户端密钥,并将它们存储在安全的地方即可。

复制客户端 ID 和客户端密钥

然后,从左侧菜单转到“OAuth 同意屏幕”页面。

在这里,切换到“受众”选项卡,然后单击“发布应用”按钮以允许拥有 Google 帐户的任何用户使用此应用程序。

这将打开一个弹出窗口,您可以在其中单击“确认”按钮。现在,Google 将验证并发布您的应用。此过程可能需要 15-20 分钟。

单击 Publish App 按钮

第 3 步:验证您的 Google 配置

现在,返回您的 WordPress 仪表板并从顶部切换到 Google 的“设置”选项卡。

之后,添加您之前复制的客户端 ID 和客户端密钥,然后单击“保存更改”按钮。

添加客户端 ID 和客户端密钥

完成此作后,Nextend Social Login 将显示一个弹出窗口,要求您验证您的配置。继续并单击“验证设置”按钮。

请记住,如果您跳过此步骤,Google OAuth 登录选项将不会出现在您的屏幕上。

单击 Verify Settings 按钮

接下来,从顶部切换到 '按钮' 部分。

在这里,您可以为 Google OAuth 登录选择按钮样式。如果您愿意,您还可以使用自定义代码创建自定义按钮。

完成后,只需单击 'Save Changes' 按钮即可存储您的更改。

选择您的按钮样式

现在,您需要从顶部切换到 Global Settings » Login Form 选项卡。

在这里,选中“登录表单”选项的“显示登录按钮”框,以便用户可以从这里轻松选择 OAuth 登录选项。

💡相关文章:如果您不想使用默认的 WordPress 登录表单,请参阅我们关于如何创建自定义 WordPress 登录页面的教程。

您还可以根据自己的喜好配置其余设置。

选择 show login buttons 选项

接下来,单击 'Save Changes' 按钮。

然后,您必须从 WordPress 仪表板返回设置 » Nextend 社交登录页面

启用 Google OAuth 登录

最后,单击“Google”选项下的“启用”按钮。您现在可以使用不同的第三方应用程序重复整个过程,为它们添加 OAuth 登录。

完成后,只需访问您的 WordPress 网站即可查看 OAuth 登录的运行情况。

OAuth 登录预览

奖励:使用登录链接在 WordPress 中添加无密码登录

虽然 OAuth 登录消除了创建新密码的需要,但用户仍然需要依赖来自 Google 或 Facebook 等第三方帐户的凭据。

如果您想完全免密码,那么登录链接提供了另一种安全的登录方法。它允许用户绕过 WordPress 登录凭据,只需单击链接即可登录他们的帐户。

该插件会自动将 Magic Link 按钮添加到登录屏幕

使用 Magic Login 插件,用户只需输入他们的电子邮件地址,一次性登录链接就会发送到他们的收件箱。单击该链接可立即访问,无需密码。

这减少了登录摩擦,同时保持了帐户安全。它对于您希望最大限度地减少进入门槛并改善用户体验的网站特别有用。

Magic Login 设置

此外,由于这些登录链接具有时效性和唯一性,因此它们提供了额外的安全层,防止暴力攻击和凭据泄漏。

要开始使用,请参阅我们关于如何在 WordPress 中添加无密码登录的教程。

我希望这篇文章能帮助您了解如何在 WordPress 中添加 OAuth 登录。您可能还想查看我们的初学者指南,了解如何在 WordPress 中添加一键式 Google 登录,以及我们关于在 WordPress 登录和注册表中添加 CAPTCHA 的教程。

如果您喜欢这篇文章,请订阅我们的 YouTube 频道以获取 WordPress 视频教程。您也可以在 TwitterFacebook 上找到我们。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇