Google ReCaptcha v3 in Nodejs

Google ReCaptcha v3 in Nodejs

Google V3 Recaptcha In Node.js Example Tutorial From Scratch. Here you will learn how to integrate Google Recaptcha v3 in node js forms validation with example. Or add google v3 ReCaptcha security in your node js forms for prevent the computer bots, spammers to enter your website.

In this node js google v3 recaptcha example tutorial, we will use Node.js and express framework to build a Google v3 Recaptcha Security.

1. Get Google reCaptcha v3 credentials

Now, you need to register your site with this URL: https://www.google.com/recaptcha to get the API key and API secret.

Note:- Google Captcha does not natively support the localhost domain so what you need to do is in the text box of the site name, put your local address: 127.0.0.1. That is it.

2. Create a fresh project

Here you need to create project folder and then type the following command into your command prompt (cmd):

mkdir public

npm init 

We are initializing the package.json file.

{

  "name": "googlerecaptcha",

  "version": "1.0.0",

  "description": "",

  "main": "server.js",

  "scripts": {

    "start": "nodemon server"

  },

  "author": "tutsmake.com",

  "license": "ISC",

  "dependencies": {

    "body-parser": "^1.17.2",

    "ejs": "^2.5.7",

    "express": "^4.15.4"

  },

  "devDependencies": {

    "nodemon": "^1.11.0"

  }

}

We have written three packages as dependencies, so go to your terminal and type the command.

npm install

3. Create view file in project

Create one file name index.ejs is called views file. In this file, We are using the Bootstrap CSS Framework for this application, so we will include that CSS file in the public folder.

<!-- index.ejs -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Node js Google v3 Recaptcha Example Tutorial</title>
    <link rel="stylesheet" href="bootstrap.min.css">
  </head>
  <body>
    <div class="container"><br />
      <h1>Google Recaptcha Tutorial</h1><br />
        <form method="post" action="/captcha">
        <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
        <input type="hidden" name="action" value="validate_captcha">
        <div class="row">
          <div class="col-md-4"></div>
          <div class="form-group col-md-4">
            <label for="name">Name:</label>
            <input type="text" class="form-control" name="name">
          </div>
        </div>
        <div class="row">
          <div class="col-md-4"></div>
          <div class="form-group col-md-4">
            <button type="submit" class="btn btn-success" style="margin-left:38px">Send</button>
          </div>
        </div>
      </form>
    </div>

<script src="https://www.google.com/recaptcha/api.js?render=your reCAPTCHA site key here"></script>
<script>
    grecaptcha.ready(function() {
    // do request for recaptcha token
    // response is promise with passed token
        grecaptcha.execute('your reCAPTCHA site key here', {action:'validate_captcha'})
                  .then(function(token) {
            // add token value to form
            document.getElementById('g-recaptcha-response').value = token;
        });
    });
</script>

  </body>
</html>

To access this page, we need to set up one route in a server.js file.

// server.js

app.get('/', function (req, res) {

    res.render('index');

});

Go to your terminal, type following command.

npm start

Go to your browser and type this URL: http://localhost:3000

4. Create server.js and Handle the request at the server-side

Here, we will to do two things. First one is install one HTTP request package called request. So use the following command to install HTTP request package in Node js:

npm install request --save

Second thing creates a server.js file inside your project folder and update the following code into your server.js file:

// server.js

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    request = require('request');

const app = express();
   app.set('view engine', 'ejs');
   app.use(express.static('public'));
   app.use(bodyParser.urlencoded({extended: true}));
   app.use(bodyParser.json());
   var port = 3000;

app.get('/', function (req, res) {
    res.render('index');
});

app.post('/captcha', function(req, res) {
  if(req.body['g-recaptcha-response'] === undefined || req.body['g-recaptcha-response'] === '' || req.body['g-recaptcha-response'] === null)
  {
    return res.json({"responseError" : "something goes to wrong"});
  }
  const secretKey = "xxxx";

  const verificationURL = "https://www.google.com/recaptcha/api/siteverify?secret=" + secretKey + "&amp;response=" + req.body['g-recaptcha-response'] + "&amp;remoteip=" + req.connection.remoteAddress;

  request(verificationURL,function(error,response,body) {
    body = JSON.parse(body);

    if(body.success !== undefined &amp;&amp; !body.success) {
      return res.json({"responseError" : "Failed captcha verification"});
    }
    res.json({"responseSuccess" : "Sucess"});
  });
});

app.listen(port, function(){
    console.log('Server is running at port: ',port);
});

Put the secret key according to your site. If you submit the form with captcha verification, you will get success in response.

Note:- If you do not verify captcha and send the form then, you will get an error in response.

nodejs javascript node-js

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

How to Hire Node.js Developers And How Much Does It Cost?

A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.

Top Node.js Development Companies and Expert NodeJS Developers

A thoroughly researched list of top NodeJS development companies with ratings & reviews to help hire the best Node.JS developers who provide development services and solutions across the world. List of Leading Node.js development Service Providers...

Hands on with Node.Js Streams | Examples & Approach

The practical implications of having Streams in Node.js are vast. Nodejs Streams are a great way to handle data chunks and uncomplicate development.

Node.js for Beginners - Learn Node.js from Scratch (Step by Step)

Node.js for Beginners - Learn Node.js from Scratch (Step by Step) - Learn the basics of Node.js. This Node.js tutorial will guide you step by step so that you will learn basics and theory of every part. Learn to use Node.js like a professional. You’ll learn: Basic Of Node, Modules, NPM In Node, Event, Email, Uploading File, Advance Of Node.

Node.js Tutorial for Beginners - When and when not to use Node.js

When and when not to use Node.js - Understand the core problems that Node.js was meant to solve and why it is a good choice for certain applications and not for some others! Learn the strengths and weaknesses of the Node.js platform.