05-Jan-2023
.
Admin
Hello Friends,
In this node js google v3 ReCaptcha example tutorial, we will use Node.js and express framework to build a Google v3 Recaptcha Security. We have already covered Google ReCaptcha using PHP and in this tutorial, we will cover Google reCAPTCHA form using Node.js Express
There is a concept of the session in every server, I worked with a lot of PHP, so I had an excellent idea of what a session is. because you use it almost all the time, similar to the session, we can implement the session on express easily as well. Below is the code to implement sessions in the express server.
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 a 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": "nicesnippets.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 to include that CSS file in the public folder.
<!-- index.ejs -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to Verify reCAPTCHA in Node.js Express? - Nicesnippets.com</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, and type the following command.
npm start
Go to your browser and type this URL: http://localhost:3000
Step 4: Create server.js and Handle the request at the server-side
Here, you will do two things. First, one is to install one HTTP request package called request. So use the following command to install the HTTP request package in Node js:
npm install request --save
Second thing creates a server.js file inside your project folder and updates 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 + "&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 the captcha and send the form then, you will get an error in response.
I hope it can help you...
#Node.js Express
#Node JS
