Google recaptcha using javascript

Register your web site at Google recaptcha platform to get keys needed to code the form. Click here to go to Google reCAPTCHA website.

After signing in, add your website details.

After registration Google will provide you following :

• Site key
• Secret key

Creating Google reCAPTCHA form in HTML
Here is our HTML code to generate simple form with Google reCAPTCHA.

  <form action="" method="POST" id="loginform" onsubmit=" return verifyCaptcha()">

   <input  id="email" maxlength="80" name="email" size="20" type="text"  placeholder="Enter Your Email" style="margin-bottom: 30px;"/><br>
   <div id="captchadiv">
    <div class="g-recaptcha" data-sitekey="<!--  your site key here -->"></div>
    <noscript>
      <div>
     <div style="width: 302px; height: 422px; position: relative;">
       <div style="width: 302px; height: 422px; position: absolute;">
      <iframe src="https://www.google.com/recaptcha/api/fallback?k=<!--  your site key here -->"
        frameborder="0" scrolling="no"
        style="width: 302px; height:422px; border-style: none;">
      </iframe>
       </div>
     </div>
     <div style="width: 300px; height: 60px; border-style: none;
           bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px;
           background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
       <textarea id="g-recaptcha-response" name="g-recaptcha-response"
           class="g-recaptcha-response"
           style="width: 250px; height: 40px; border: 1px solid #c1c1c1;
            margin: 10px 25px; padding: 0px; resize: none;" >
       </textarea>
     </div>
      </div>
    </noscript>
   </div>
   
   <button type="submit" value="Submit" />Sign in</button>
  </form>

Client Side code

 function verifyCaptcha(){
  var captcha_response = grecaptcha.getResponse();

  if(captcha_response.length == 0 || grecaptcha == undefined )
  {
   return false;
  }else{
   $.get('/captchaTest',{'response':captcha_response},function(response){
    console.log(response);
    if(response == undefined && response.responseCode == undefined && response.responseDesc == undefined  && response.responseCode !== 0 && response.responseDesc !== 'Sucess' ){
     return false;
    }
    grecaptcha.reset();
   });
   
   return true;
  }
 }
 

Server Side code

 app.get('/captchaTest',function(req,res){
  var requestQuery = req.query;
  if( requestQuery != undefined && requestQuery != '' && requestQuery != null && requestQuery.response != undefined && requestQuery.response != '' && requestQuery.response != null ){
   var response = requestQuery.response;
    var verificationUrl = "https://www.google.com/recaptcha/api/siteverify?secret="+ secret_key +"&response=" +response;
    // 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) {
      res.send({"responseCode" : 1,"responseDesc" : "Failed captcha verification"});
     }else{
      res.send({"responseCode" : 0,"responseDesc" : "Sucess"});
     }
    });
  }else{
   res.send({"responseCode" : 1,"responseDesc" : "Failed captcha verification"});
  }
 });