在本教程中,我们将使用Google Ajax将Google reCAPTCHA v3添加到PHP表单中并提交而不离开页面。如果您的网站上有联系表格或任何此类表格,您就会知道从机器人接收垃圾邮件是多么令人讨厌。Google reCAPTCHA保护您免受垃圾邮件和其他自动滥用的侵害。要继续学习本教程,您需要具备H WP网站建设
在本教程中,我们将使用Google Ajax将Google reCAPTCHA v3添加到PHP表单中并提交而不离开页面。如果您的网站上有联系表格或任何此类表格,您就会知道从机器人接收垃圾邮件是多么令人讨厌。Google reCAPTCHA保护您免受垃圾邮件和其他自动滥用的侵害。要继续学习本教程,您需要具备HTML,jQuery和PHP的一些基本知识。
为什么选择Google reCAPTCHA v3?
我们所有人都有令人沮丧的经历,他们试图通过一种形式来快速提交一些信息,而这些形式最终只能面对验证码挑战。我们不得不输入随机字符,然后想知道“是两个V还是W?”,“是否应该添加该空格?”。
WordPress网站建设
然后,我们必须选择所有具有斑马线或桥梁的图像,以证明我们是人类。值得庆幸的是,这些天来,许多网站都添加了Google reCAPTCHA v2,它仅显示一个复选框-“我不是机器人”。
但是,在2018年,Google发布了下一版本– reCAPTCHA v3,它根本不需要任何用户交互。它在后台工作,观察用户的行为。此版本为我们(开发人员)提供了一个分数,该分数指示了交互的可疑程度。我们可以使用该分数来防止垃圾邮件。在Google的官方网站管理员博客上了解其工作原理。
现在让我们学习如何将其添加到简单表单中。
注册reCAPTCHA v3密钥
您需要先注册您的网站并在此处获取密钥-https: //www.google.com/recaptcha/admin/create。添加标签,选择reCAPTCHA v3,输入您的域名并提交。
WordPress网站建设
这将生成一个“站点密钥”和一个“秘密密钥”。复制两者并确保它们安全。我们将很快需要它们。
HTML表格
让我们使用一个简单的联系表,其中包含全名,电子邮件和消息字段
WordPress网站建设
HTML
为了简化本教程,下面仅显示HTML代码。对于以上屏幕截图中使用的CSS,请在本教程末尾下载完整的源代码。
1个 2 3 4 5 6 7 8 9 10 11 |
|
Ajax表单提交
在添加reCAPTCHA之前,让我们使用Ajax进行表单提交,为此需要jQuery库。使用CDN加载它。将此行粘贴到body
HTML中的结束标记之前。
1个 |
|
我们需要在表单提交时提出Ajax请求。
1个 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
使用此代码,如果您单击“提交”,则会显示404错误,因为contact.php
尚不存在。接下来,让我们开始。
的PHP
创建contact.php
。在服务器端,我们需要验证收到的数据并发送JSON响应。我们将在一段时间内集成reCAPTCHA。
1个 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
完善!我们拥有使用Ajax进行表单提交的完整流程。现在是时候集成reCAPTCHA v3了,如果您认真遵循的话,您将看到它实际上是多么简单。
客户端集成
第一步是使用您的站点密钥加载JavaScript API。将此粘贴到您的jQuery CDN链接下面。
1个 |
|
重要说明:将YOUR_SITE_KEY_HERE替换为您先前复制的站点密钥。
如果您查看reCAPTCHA v3文档,则需要grecaptcha.execute
在希望保护的每个操作上调用。在我们的例子中,它是表单提交。该调用会生成一个令牌,该令牌需要与我们的表单数据一起发送,以便在服务器端进行验证。最好的方法是在这样的表单中包含一个隐藏的输入字段,然后将令牌值动态分配给该字段:
1个 |
|
在Ajax请求外部调用以下函数,并用标记值填充隐藏的输入字段。发出Ajax请求时,这将自动包括令牌值以及其他表单数据。
1个 2 3 4 5 6 7 |
|
重要说明:将YOUR_SITE_KEY_HERE替换为您先前复制的站点密钥。
“操作”值特定于此联系表单提交操作。在多个位置添加reCAPTCHA时,不同的操作可帮助您分析整个网站上的数据。
注意: reCAPTCHA令牌每两分钟过期一次。这就是为什么,仅在用户单击“提交”按钮之后以及在发出Ajax请求之前,才需要生成此令牌。
这样就完成了客户端集成。
服务器端集成
在服务器端验证数据(名称,电子邮件和消息)后,我们需要从Google获取分数以验证它是否是人机交互。在该if(isvalid()){ }
块内,添加以下代码以使API请求获得得分。
1个 2 3 4 5 6 7 |
|
重要说明:用您先前复制的密钥替换YOUR_SECRET_KEY_HERE。密钥仅用于服务器端。
收到的响应是JSON对象。
{
“ success”:true | false,//此请求是否为您网站的有效reCAPTCHA令牌
“ score”:数字//此请求的分数(0.0 – 1.0)
“ action”:字符串//此请求(非常重要):
“ challenge_ts”:时间戳,//质询加载的时间戳(ISO格式yyyy-MM-dd’T’HH:mm:ssZZ)
“ hostname”:字符串,//站点的主机名解决reCAPTCHA的
“错误代码”:[…] //可选
}
让我们来解码JSON对象$recaptcha
和检查success
,score
和action
。分数从0.0到1.0不等。默认情况下,您可以使用0.5的阈值。
1个 2 3 4 5 6 7 8 9 |
|
你们都准备好了!点击该“提交”按钮,如果您正确集成了所有内容,则应该看到一条消息,说明已成功发送邮件。
奖金提示:
添加javascript API后,您可能已经注意到页面右下角的讨厌的reCAPTCHA徽章,看起来像这样。
这可能不适用于您的网站设计。你猜怎么了?此常见问题解答说,如果您在用户流程中包含以下文字,则可以隐藏此徽章
1个 2 3 |
|
因此,将其添加p
到“提交”按钮下方的元素内。
现在,要真正隐藏徽章,只需将其添加到CSS中即可。
1个 2 3 |
|
恭喜你!您已成功将Google reCAPTCHA v3设置为表单。现在,您将只收到来自人类的消息-无需他们面对验证码挑战,也无需离开页面。
在此处下载完整的源代码。
下载源代码
原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/61743

服务项目 | 服务内容 | 收费标准(元) |
---|---|---|
开发定制 | WordPress主题/插件开发定制 | (以最终需求为准) |
主题/插件汉化 | 汉化团队WordPress主题/插件,翻译率95% | (以标的主题/插件的句子数量为准) |
服务器环境配置 | 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 | 100元/次 |
网站托管 | 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 | 标配套餐:1000元/年/站点 高配套餐:联系客服获取 |
网站加速优化 | 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) | 500元/次(仅站内优化200元/次) |
主题配置 | 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 | 英文主题安装 60元/次 汉化主题安装 30元/次 |
HTTPS配置 | HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 | 100元/次 |
网站搬家 | 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 | 标准收费:500元/次 若网站数据量大,需协商 |
网站运维 | 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 | 标准收费:2000元/年 IP 5000以上需协商 |