Chuyển đến nội dung chính

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.

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

sys.argv là môt danh sách [list] trong python, nó được sư dụng khi bạn chạy một lệnh command-line nào đó trên hệ thống.
Và argument này được đẩy vào script python để thực thi khi chạy câu lệnh.

Ví dụ: python sys.argv arg1 arg2

Trước tiên bạn phải import mô đun sys trong script.



import sys print"This is the name of the script: ", sys.argv[0]print"Number of arguments: ", len(sys.argv)print"The arguments are: ", str(sys.argv)

Tên của script này : sysargv.py
Số lượng arg là : 1
Arg là : ['sysargv.py']


python test1020.py 111 This is the name of the script:  test1020.py
Number of arguments:  2
The arguments are:  ['test1020.py', '111']

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

Như các bạn đã biết thì REST viết tắt bởi REpresentational State Transfer. Bạn có thể tham khảo thêm ở đây.

Vậy REST là gì:

Có 6 yếu tố của REST như sau:

1. Client-Server: phía server side phục vụ như một service còn phía client sẽ dùng service này.

2.Stateless:  Mỗi request từ client phải chứa tất cả các thông tin mà phía server yêu cầu phải có. Nói nôm na là mỗi request chứa các thông tin riêng rẽ không liên quan đến những request khác.

3. Cacheable : Phía server side phải cảnh báo chỉ ra cho client side biết là request đó có cache hay không.

4. Hệ thống phân lớp: Giao tiếp giữa server side và client side có thể thông qua lớp trung gian ở giữa để trả lời các request được gọi mà không cân phía client phải làm những động tác khác nữa.

5. Các cổng giao tiếp là giống nhau : Các phương thức giao tiếp giữa client và server là khuôn mẫu giống nhau.

6. Mã code linh động. Phía server có thể thực thi cho môt API gọi duy nhất mà không ảnh hưởng tới các API khác.

RESTful web service là gì :

Kiế…

Cài đặt docker trên windows server 2016.

1. Cài đặt Windows Server 2016 Container Feature:  Mở PowerShell : Cài đặt các container feature dùng powershell: Dùng lệnh: InstallWindowsFeature containers Restart lại windows: 2. Cài đặt windows server 2016 base image:  Cài đặt mô đun : ContainerImage Dùng lệnh: Install-PackageProvider ContainerImage -force List các image có giá trị: Cài đặt Windows Server Core : 3. Cài đặt docker trên windows server 2016. Download script để cài đặt docker : Chạy script : Kiểm tra các image có trên server :