使用Elementor创建自定义Google登录表单

使用Elementor创建自定义Google登录表单

使用Elementor创建自定义Google登录表单

  如果您不想使用WordPress CMS默认登录页面,Elementor 的 Ultimate Addons提供的新登录小部件是一个不错的选择。它提供了许多功能,可以使用 Elementor 的强大功能创建完全自定义的登录页面。然而,本文将特别关注创建自定义 Google 登录表单。

  创建自定义的 Google 登录表单不再困难。使用登录小部件和 Elementor 强大的页面构建器,我们可以完全自定义整个登录/注册过程。设置谷歌登录的最大优势之一是因为它可以减少用户注册的弊端。本文晓得博客为你介绍使用Elementor创建自定义Google登录表单。

  推荐:6个最佳Elementor Mega Menu超级菜单插件

怎么使用Elementor创建自定义Google登录表单

  首先安装Elementor Ultimate Addons 插件

  然后创建一个新的 WordPress 页面(Pages → Add New)并单击” Edit With Elementor ”按钮以打开 Elementor 界面,您可以使用 Elementor 的常规小部件来控制登录页面的基本设计。

使用Elementor创建页面
使用Elementor创建自定义Google登录表单

  当添加好登录表单时,从 Ultimate Addons for Elementor拖动“Login Form登录表单小部件”,然后,打开小部件的设置以控制您的登录表单的行为和样式,,可看到Social Login,点击即可打开Google Login

设置Elementor创建的自定义Google登录表单
使用Elementor创建自定义Google登录表单

  在社交登录部分,您可以启用来自 Google 和/或 Facebook 的社交登录。这样做将需要对这些服务进行一些额外的授权步骤。

  推荐:WordPress插件Simple Google reCAPTCHA插件使用指南教程

设置Google登录表单

  带有社交登录的登录表单是一项使用非常广泛的功能,许多用户都在 Google 上拥有一个帐户。在您的网站上使用 Google 登录只会使用户入职和登录过程比以往任何时候都更容易。要使用 Google 登录选项添加 Elementor 的登录表单小部件,您需要获取 Google 客户端 ID。

  只需单击一下,用户就可以使用他们的 Google 凭据登录,从而使其成为一个更加无缝的过程。要配置 Google 登录,您需要一个 Google 客户端 ID。

1、创建项目

  通过https://console.cloud.google.com在 Google Cloud Platform 上注册您的网站。您需要使用 Google 凭据登录并通过注册激活免费试用。

  通过单击下拉菜单并单击“新建项目”来创建项目。填写相关详细信息,系统将提示您进入项目仪表板。

设置新的Google项目
使用Elementor创建自定义Google登录表单

  推荐:如何在Google浏览器上使用ChatGPT

2、创建 OAuth 应用程序

  进入项目仪表板后,转到“ API & Services ”->“ OAuth同意屏幕 ”,选择用户类型为“外部”,然后单击创建

创建OAuth应用程序
使用Elementor创建自定义Google登录表单

  在“应用程序名称”下为您的应用程序输入一个合适的名称(可能是“Google 登录”),然后选择您的电子邮件地址作为支持联系电子邮件。

  向下滚动到 App Domain 部分下的 Authorized Domains 并单击”Add Domain“。输入您的网站地址,开头不带任何 https,末尾不带子域。

设置凭据
使用Elementor创建自定义Google登录表单

  输入开发者电子邮件地址(可以与步骤 5 中的相同),然后单击“保存并继续”。忽略其余 3 个步骤,直到提示返回仪表板。

  推荐:24个SEO优化工具提高外贸网站Google排名

3、创建 OAuth 凭证

  在同一菜单(API 和服务)下,单击” 凭据- > 创建凭据 -> OAuth 客户端 ID

创建OAuth应用程序
使用Elementor创建自定义Google登录表单

  从下拉列表中选择“Web 应用程序”作为应用程序类型,为应用程序命名,说“用于登录表单的 Web 应用程序”

创建OAuth凭证
使用Elementor创建自定义Google登录表单

  单击Authorized JavaScript Origins下的“添加 URL” 。输入您的网站 URL,该 URL 必须完全是您的域名。点击创建。

创建OAuth凭证获取ID
使用Elementor创建自定义Google登录表单

  复制您现在将在弹出屏幕中看到的客户端 ID。

复制粘贴AUTH-ID
使用Elementor创建自定义Google登录表单

  推荐:如何提高Google Ads广告系列点击率

添加获取的Google客户端 ID

  现在,进入WordPress仪表盘,转到“ 设置 ”->“ UAE ”->” User Registration Form ” 旁边的设置。

添加获取的Google客户端-ID
使用Elementor创建自定义Google登录表单

  然后会进入到新的界面,下拉滚动到Login Form登录表单 – Google 客户端 ID,粘贴第 5 步中的客户端 ID。

UAE插件添加Google客户端-ID
使用Elementor创建自定义Google登录表单

  推荐:NEX-Forms插件下载WordPress表单生成器插件+ Addons

总结

  以上是晓得博客为你介绍使用Elementor创建自定义Google登录表单,希望对你的WordPress建站有所帮助,Elementor插件可为你设计出美观大气的网站外观,如有问题,可联系我们。

  推荐:如何使用Elementor模板

  推荐:Elementor页面构建器教程

5/5 - (4 votes)

Claude、Netflix、Midjourney、Chatgpt Plus账号购买,ChatGPT API购买,优惠码XDBK,用户购买的时候输入优惠码可以打95折

Chatgpt-Plus注册购买共享账号
Kinsta-free-hosting主机
Kinsta-free-hosting主机
Elementor可视化创建WordPress网站
Elementor可视化创建WordPress网站
滚动至顶部