HI WELCOME TO SIRIS

Google Recaptcha In Node.Js Tutorial From Scratch

Leave a Comment
Google Recaptcha In Node.js Tutorial From Scratch topic we will cover today. Google Recaptcha is a kind of security through you can prevent the computer bots, spammers to enter your website. We are using Node.js and express framework to build a Google Recaptcha Security. So let us get started.

Step 1: Create a project and configure it.

Create your project folder and inside type following command in your terminal.
npm init
We are initializing the package.json file.
{
  "name": "googlerecaptcha",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon server"
  },
  "author": "Sireesh Kantamaneni",
  "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
Now, create one file in a root called server.js and also create one folder name public in the root.
// Server.js

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

var 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.listen(port, function(){
    console.log('Server is running at port: ',port);
});
Here, I have required all the modules and used express in our application. Static files are served from public folder and use body-parser middleware to extract the data from Post request. We have used ejs as a templating engine for our application.

Step 2: Set up the views for our project. 

Create one folder in root called views. In that folder, create one ejs file called index.ejs. We are using Bootstrap CSS Framework for this application, so include that CSS file in public folder.
<!-- index.ejs -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Recaptcha Tutorial</title>
    <link rel="stylesheet" href="bootstrap.min.css">
  </head>
  <body>
    <div class="container"><br />
      <h1>Google Recaptcha Tutorial</h1><br />
      <form action="/send-email" method="post">
        <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">Send</button>
          </div>
        </div>
      </form>
    </div>
  </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
Switch to your browser and type this URL: http://localhost:3000
You will see a form with one field.

Step 3: Configure Google reCaptcha with your Google account. 


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

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.