在HTML中嵌入reCAPTCHA

reCAPTCHA是由Google开发的一种验证码系统，它可以有效地防止恶意机器人进行自动化攻击、垃圾邮件发送等行为。在本篇文章中，我们将介绍在HTML网站中如何嵌入reCAPTCHA。

准备工作

首先，我们需要在Google reCAPTCHA官方网站上注册一个账号，并创建一个新的reCAPTCHA Site key和Secret key。Site key将会用于在HTML代码中嵌入reCAPTCHA，在每次提交表单时，它会被发送到Google服务器进行验证。Secret key则是你后端服务器接收并验证reCAPTCHA响应所需的“密码”。

HTML代码

接下来，我们需要在表单中嵌入reCAPTCHA。在HTML代码中加入以下内容：

<form action="/submit-form" method="post">
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
    <button type="submit">提交表单</button>
</form>

其中，data-sitekey属性是我们在Google reCAPTCHA官方网站上注册时获得的Site key。<div>标签的class属性值为g-recaptcha，这是Google提供的默认class，它包含了reCAPTCHA的样式和一些必需的交互功能。

添加完以上内容后，页面显示如下：

用户需要点击“我不是机器人”（或类似的按钮）进行人机验证，然后才能提交表单。

后端验证

在后端服务器中接收到表单提交后，我们需要对reCAPTCHA响应进行验证。reCAPTCHA响应将会以POST方式提交给我们的服务器。

以下是使用Node.js验证reCAPTCHA响应的代码片段：

const https = require('https');

const hostname = 'www.google.com';
const path = '/recaptcha/api/siteverify';
const secret = 'YOUR_SECRET_KEY';
const response = 'RECAPTCHA_RESPONSE';

https.get(`${path}?secret=${secret}&response=${response}`, (res) => {
    res.on('data', (d) => {
        const result = JSON.parse(d.toString());
        if (result.success) {
            // 验证成功
        } else {
            // 验证失败
        }
    });
}).on('error', (e) => {
    console.error(e);
});

其中，YOUR_SECRET_KEY是我们在Google reCAPTCHA官方网站上注册时获得的Secret key；RECAPTCHA_RESPONSE是接收到的reCAPTCHA响应。

结语

reCAPTCHA是一种强大的验证码系统，可以有效地保护网站免受垃圾邮件、自动化攻击等恶意行为的影响。在本篇文章中，我们演示了如何在HTML网站中嵌入reCAPTCHA，并使用Node.js对reCAPTCHA响应进行验证。希望这篇文章对你有所帮助！