Google ReCaptcha v3 in Node Js Express

Google ReCaptcha v3 in Node Js Express

In this tutorial, you will learn how to integrate Google Recaptcha v3 in node js to protect forms using javascript code.

Node js express Google ReCaptcha v3

Steps to implement google reCaptcha v3 in node js express:

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

Step 2 – Create a Node js App

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

mkdir public

npm init -y

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"

  }

}

Three packages as dependencies, so go to your terminal and type the command.

npm install

Step 3 – Create view file in project

Create one file name index.ejs is called views file. In this file, Add Bootstrap CSS Framework for this application, so you need 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, you 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

Step 4 – Create server.js and Handle the request on the server-side

First one is to install one HTTP request package called request by using the following command:

npm install request --save

The second thing creates a server.js file inside your project folder and update the following code in 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 + "&response=" + req.body['g-recaptcha-response'] + "&remoteip=" + req.connection.remoteAddress;
  request(verificationURL,function(error,response,body) {
    body = JSON.parse(body);
    if(body.success !== undefined && !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.

Recommended Node JS Tutorials

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *