Sử dụng Google reCAPTCHA trong node.js


Trong bài viết này sử dụng AJAX và Node.js cho google reCAPTCHA form.

Dưới đây là các bước thực thi một Google reCAPTCHA.

1. Submit một form sử dụng Ajax.
2. Lấy khóa (key) của google trả về.
3. Xác thực khóa trả về và trả về UI.

Để submit một form sử dụng ajax ta dùng thư viện jQuery.form. Đối với server ta sử dụng express framwork và các hàm gọi HTTP ta sử dụng thư viện request.

Trước tiên ta tạo một file package.json, để tạo một file package.json sử dụng câu lênh: npm init.

File package.json có nội dung tương tự như dưới:

package.json
{
  "name": "google-recapcha-node",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/.git"
  },
  "author": "Shahid shaikh",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/google-racapcha-node/issues"
  },
  "homepage": "https://github.com/google-racapcha-node#readme"
}

Cài đặt các dependencies cần thiết:

npm i --save express request body-parser

Chúng ta sử dụng các thư viện trên giao diên người dùng:

jQuery
jQuery.form


Chúng ta sử dụng CDN như nguồn tài nguyên cho 2 thư viện này.

Đăng kí website của bạn trên Google ReCAPTCHA:

https://www.google.com/recaptcha/

Sau khi đăng ký google sẽ cung cấp cho bạn:

Site key và secret key.

Tạo form HTML cho Google reCAPTCHA:


index.html
<html>
  <head>
    <title>Google recapcha demo - Codeforgeek</title>
    <script src='https://www.google.com/recaptcha/api.js'></script>
  </head>
  <body>
    <h1>Google reCAPTHA Demo</h1>
    <form id="comment_form" action='/submit' method="post">
      <input type="email" placeholder="Type your email" size="40"><br><br>
      <textarea name="comment" rows="8" cols="39"></textarea><br><br>
      <div class="g-recaptcha" data-sitekey="--paste your site key here--"></div><br>
      <input type="submit" name="submit" value="Post comment"><br><br>
    </form>
  </body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
  <script>
   // Will put our custom code here.
  </script>
</html>


Như form trên ta có API /submit khi brower submit form:

Nên ta phải tạo API chấp nhận kết nối với phương thức POST data.

Dưới đây là đoạn javascript thực thi một ajax form submit.

  <script>
    $(document).ready(function() {
      $('#comment_form').submit(function() {
        $(this).ajaxSubmit({
          error: function(xhr) {
            status('Error: ' + xhr.status);
          },
         success: function(response) {
          console.log(response);
         }
        });
        //Very important line, it disable the page refresh.
        return false;
      });
    });
  </script>

Phần node.js server : 

app.js có nội dung như sau:

app.js
var express = require('express');
var bodyParser = require('body-parser');
var request = require('request');
var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : false}));

app.get('/',function(req,res) {
  // Sending our HTML file to browser.
  res.sendFile(__dirname + '/index.html');
});

app.post('/submit',function(req,res){
  // g-recaptcha-response is the key that browser will generate upon form submit.
  // if its blank or null means user has not selected the captcha, so return the error.
  if(req.body['g-recaptcha-response'] === undefined || req.body['g-recaptcha-response'] === '' || req.body['g-recaptcha-response'] === null) {
    return res.json({"responseCode" : 1,"responseDesc" : "Please select captcha"});
  }
  // Put your secret key here.
  var secretKey = "--paste your secret key here--";
  // req.connection.remoteAddress will provide IP address of connected user.
  var verificationUrl = "https://www.google.com/recaptcha/api/siteverify?secret=" + secretKey + "&response=" + req.body['g-recaptcha-response'] + "&remoteip=" + req.connection.remoteAddress;
  // Hitting GET request to the URL, Google will respond with success or error scenario.
  request(verificationUrl,function(error,response,body) {
    body = JSON.parse(body);
    // Success will be true or false depending upon captcha validation.
    if(body.success !== undefined && !body.success) {
      return res.json({"responseCode" : 1,"responseDesc" : "Failed captcha verification"});
    }
    res.json({"responseCode" : 0,"responseDesc" : "Sucess"});
  });
});

// This will handle 404 requests.
app.use("*",function(req,res) {
  res.status(404).send("404");
})

// lifting the app on port 3000.
app.listen(3000);

Chú ý phần route /submit

Sau đó chạy: node app.js


Google recaptcha form



Google recaptcha form submit


Google recaptcha form


Chi tiết: www.manageitservice247.com

Nhận xét

Bài đăng phổ biến từ blog này

Cách sử dụng sys.argv trong python.

Trang web medium.com chết, vì sao ?

Thiết kế một RESTful API bằng python và flask.