عنوان مقاله :

استفاده از reCAPTCHA گوگل در Node.js

گردآوری و تالیف : امیررضا سیستانه ای
تاریخ انتشار : 18 شهریور 1396
دسته بندی ها : نود جی اس

کارهایی که میخواهیم در این مقاله انجام بدیم به شرح زیر است : 

  • ثبت فرم با استفاده از Ajax
  • دریافت کلید پاسخ گوگل در سرور Node.js
  • بازگردانی کلید و ارسال پاسخ به UI

برای ثبت فرم با Ajax ما از کتابخانه Jquery.form استفاده می کنیم. برای سرور ما از Express و برای صدا زدن HTTP از request بهره می بریم.

فایل Package.json

یک مسیر جدید ساخته و فایل package.json رو در اون ایجاد کنید. بهتره با استفاده از npm init این کار رو انجام بدیم. این فایل package.json ما هست :

{

  "name": "google-racapcha-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/codeforgeek/google-racapcha-node.git"

  },

  "author": "Shahid shaikh",

  "license": "MIT",

  "bugs": {

    "url": "https://github.com/codeforgeek/google-racapcha-node/issues"

  },

  "homepage": "https://github.com/codeforgeek/google-racapcha-node#readme"

} 

نوبت نصب وابستگی هاست :

npm i --save express request body-parser

همینطور که اشاره شد ما از express بعنوان فریمورک وب, از request برای صدا زدن HTTP و از body-parser برای خروجی گرفتن از متغیرهای POST در Express استفاده می کنیم.

برای رابط کاربری از کتابخانه های زیر استفاده می کنیم :

jquery

jquery.form

ثبت سایت در Google reCAPTCHA

سایت خودتون رو در پلتفرم Google recaptcha ثبت کنید تا کلیدهای مورد نیاز در کد رو بدست بیارید. اینجا رو کلیک کنید تا وارد سایت Google recaptcha بشید.

بعد از ورود اطلاعات سایت رو وارد کنید.

بعد از ثبت نام در اون سایت شما کلید های Site Key و Secret Key رو دریافت می کنید.

ساخت فرم Google reCAPTCHA در HTML

این کد HTML ما برای ساخت یک فرم ساده ی reCAPTCHA هست :

<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>

ما یک فرم ساده بهمراه اکشن submit/ ساختیم. مرورگر اطلاعات رو به آدرس url+'/submit' ارسال می کنه. ما به API خودمون نیاز داریم تا اتصال و دیتا POST رو تایید کنه. 

Site key که دریافت کردید رو به Google recaptcha div اضافه کنید. 

این کد جاوا اسکریپتی هست که ثبت ajax رو مدیریت می کنه :

 <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>

این کد رو بعد از بارگذاری اسکریپت ها در صفحه html قرار بدید.

سرور Nodejs

فرم ما آمادست. بیاییم فایل سرور رو نوشته و مسیر submit/ رو که اشاره کردیم مدیریت کنیم.

فایل 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);

اجرای اپلیکیشن

برای اجرای اپلیکیشن به فولدر پروژه رفته و دستور زیر رو وارد نمایید :

node app.js

به آدرس localhost:3000 رفته و نتیجه را ببینید.

وارد کردن صحیح captcha 

فرمی که بهتون نمایش داده میشه :

بعد از انجام صحیح این کار پیام زیر رو بهتون نمایش میده :

منبع

برچسب : ,

مقالات پیشنهادی

8 سایت معروف که از Node.js استفاده می کنند

در این مقاله می خواهیم در مورد 8 وبسایت معروفی که از Node.js در سیستمشون استفاده می کنند, صحبت کنیم.

مسیریابی در ExpressJS

Express یکی از محبوب ترین فریمورک های Node.js هست و بسیاری از عملیات ها مثل رندر کردن, مسیریابی و غیره رو فراهم میکنه. در این آموزش می خواهیم بحث ()Ro...

رندر کردن فایل HTML در ExpressJS

ExpressJS به شما اجازه میده وب سرورهای سفارشی با توجه به نیازتون توسعه بدید. لازم نیست چندین پکیج نصب کنید تا بتونید فایل های HTML رو مدیریت کنید. اگر...

ارسال ایمیل در Node.js

در این آموزش می خواهیم درمورد ارسال ایمیل در Node.js صحبت کنیم. برای این کار می خواهیم از فریمورک Express.js و پکیج NodeMailer استفاده کنیم. در انجمن...

دیدگاه های ارزشمند شما

برای ارسال نظر لازم است ابتدا وارد سایت شوید
هیچ دیدگاهی تا به این لحظه برای این موضوع ثبت نشده است