Google V3 Recaptcha In Node.js express app; in this tutorial; i will show you how to implement Google Recaptcha v3 in node js express app.
Google eCAPTCHA is a security service that protects your websites from fraud and abuse. And reCAPTCHA works by taking any of the scanned words that cannot be recognised and presenting them to a human alongside a known word for interpretation. By typing the known word correctly, you identify yourself as a human and the reCAPTCHA system gains some confidence that you have correctly digitised the second.
Implementing Google reCAPTCHA v3 in Node.js
- Step 1 – Get Key Id and Secret Form Google ReCaptcha
- Step 2 – Create a Node js Express App
- Step 3 – Create Form
- Step 4 – Install Required Modules
- Step 5- Start Node js Express Recaptcha App
Step 1 – Get Key Id and Secret Form Google Recaptcha
Visit 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 Express App
Create node js express app by executing the following command into your command prompt:
mkdir public npm init
Then initializing the package.json file; as shown below:
{ "name": "googlerecaptcha", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "start": "nodemon server" }, "author": "laratutorials.com", "license": "ISC", "dependencies": { "body-parser": "^1.17.2", "ejs": "^2.5.7", "express": "^4.15.4" }, "devDependencies": { "nodemon": "^1.11.0" } }
Then visit your terminal and execute the following command on terminal:
npm install
Step 3 – Create Form
Create html markup form; so visit your app root directory and create index.html file and add the following code into it:
<!-- index.ejs --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Node js Google v3 Recaptcha Example Tutorial - Laratutorials</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>
Step 4 – Install Required Modules
Execute the following command on terminal to install some required modules in your node js express app:
npm install express --save npm install body-parser --save npm install request --save
Then create a new file name server.js and import above installed required modules in server.js file:
// server.js const express = require('express'), path = require('path'), bodyParser = require('body-parser'), request = require('request'); const app = express(); app.use(express.static('public')); app.use(bodyParser.urlencoded({extended: true})); app.use(bodyParser.json()); var port = 3000; app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); 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); });
Note:- If you do not verify captcha and send the form then, you will get an error in response.
Step 5- Start Node js Express Recaptcha App
Execute the following command on terminal to start node js express recaptcha app:
npm start
Go to your browser and type this URL: http://localhost:3000