如何在Node.js服务器调用中验证recaptcha

Google reCAPTCHA: reCAPTCHA是一种验证码系统，可以帮助网站主区分人类用户和自动化访问。这项服务由Google提供。

Google提供了两个版本的reCAPTCHA：

reCAPTCHA v3
reCAPTCHA v2

本文将介绍reCAPTCHA v2。

方法：

在Google reCAPTCHA上注册您的网站
提交HTML表单
在Node.js服务器上获取响应密钥
重新验证密钥，并向用户端返回响应。

步骤1：在Google reCAPTCHA上注册您的网站

在Google reCAPTCHA平台上注册您的网站，以获取密钥，即站点密钥和密钥，在编写HTML表单时需要使用。

点击这里进入Google reCAPTCHA网站。

如何在Node.js服务器调用中验证recaptcha

步骤2：在HTML中创建Google reCAPTCHA表单

在这里，我们将创建一个简单的HTML表单，其中action属性为/submit，包含一个输入字段和一个按钮。同时，我们需要在HTML文档中添加Google reCAPTCHA CDN，并在表单中添加一个div标签来获取HTML文档中的reCAPTCHA。

CDN: <script src="https://www.google.com/recaptcha/api.js" async defer></script>
DIV TAG: <div class="g-recaptcha" data-sitekey="your_site_key"></div>

注意： 您需要将“your_site_key”替换为您的站点密钥。

示例：

文件名：index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
 
    <!-- CSS file -->
    <link rel="stylesheet" href="style.css">
 
    <!-- Google reCAPTCHA CDN -->
    <script src=
"https://www.google.com/recaptcha/api.js" async defer>
    </script>
</head>
 
<body>
    <div class="container">
        <h1>Google recaptcha</h1>
 
        <!-- HTML Form -->
        <form action="/submit" method="post">
            <input type="text" name="name" id="name"
                   placeholder="Enter Name" required>
            <br>
 
            <!-- div to show reCAPTCHA -->
            <div class="g-recaptcha"
                 data-sitekey="your_site_key">
            </div>
            <br>
             
            <button type="submit">Submit</button>
        </form>
         
    </div>
</body>
 
</html>

文件名: style.css

.container {
  border: 1px solid rgb(73, 72, 72);
  border-radius: 10px;
  margin: auto;
  padding: 10px;
  text-align: center;
}
 
h1 {
  margin-top: 10px;
}
 
input[type="text"] {
  padding: 10px;
  border-radius: 5px;
  margin: 10px;
  font-family: "Times New Roman", Times, serif;
  font-size: larger;
}
 
button {
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  background-color: #167deb;
  border-color: #0062cc;
  font-weight: bolder;
  cursor: pointer;
}
 
button:hover {
  text-decoration: none;
  background-color: #0069d9;
  border-color: #0062cc;
}
 
.g-recaptcha {
  margin-left: 513px;
}

输出：

如何在Node.js服务器调用中验证recaptcha

步骤3：Node.js 服务器：

我们已经准备好了表单，现在让我们来编写服务器文件。在服务器端，我们将使用两个包，一个是express用于作为Web框架的服务器，另一个是isomorphic-fetch用于进行http/https调用。

创建一个新的目录并在其中生成package.json文件。使用 npm init 命令来生成package.json文件，这是最佳实践。这是我的package.json文件供参考。

文件名：package.json

{
  "name": "google_recaptcha",
  "version": "1.0.0",
  "description": "Google recaptacha v2 demonstration.",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "Asmit Sirohi",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "isomorphic-fetch": "^3.0.0"
  }
}

现在，让我们来编写服务器文件，HTML表单将提交数据。

步骤4：验证验证码：

为了验证验证码，我们需要向以下URL发起POST请求。

URL： https://www.google.com/recaptcha/api/siteverify?secret=&response=
secret_key： 这个密钥您将从Google控制台获取，即秘密密钥。
response_key： 这个密钥来自客户端，当用户提交表单时生成。

注意：

g-recaptcha-response是浏览器在表单提交时生成的响应密钥的名称。如果它是空白或null，则表示用户未选择验证码，因此返回错误。
您需要用您的密钥替换“your_secret_key”。

文件名：app.js

// Importing express package
const express = require("express");
// Importing isomorphic-fetch package
const fetch = require("isomorphic-fetch");
 
// instantiating express package
const app = express();
 
// Making public folder static where index.html file is present
// By making it static, we can easily serve index.html page
app.use(express.static("public"));
 
// To accept HTML form data
app.use(express.urlencoded({ extended: false }));
 
// Here, HTML form is submit
app.post("/submit", (req, res) => {
  const name = req.body.name;
  // getting site key from client side
  const response_key = req.body["g-recaptcha-response"];
  // Put secret key here, which we get from google console
  const secret_key = "<your_secret_key>";
 
  // Hitting POST request to the URL, Google will
  // respond with success or error scenario.
  const url = 
`https://www.google.com/recaptcha/api/siteverify?secret={secret_key}&response={response_key}`;
 
  // Making POST request to verify captcha
  fetch(url, {
    method: "post",
  })
    .then((response) => response.json())
    .then((google_response) => {
 
      // google_response is the object return by
      // google as a response 
      if (google_response.success == true) {
        //   if captcha is verified
        return res.send({ response: "Successful" });
      } else {
        // if captcha is not verified
        return res.send({ response: "Failed" });
      }
    })
    .catch((error) => {
        // Some error while verify captcha
      return res.json({ error });
    });
});
 
// lifting the app on port 4000.
const PORT = 4000;
app.listen(PORT, () => console.log(`Server is running on PORT ${PORT}`));