Morioh
Login
中條 美冬

中條 美冬

9 months ago

Node.js Express で Google reCAPTCHA v3 を実装する方法

Google reCAPTCHA v3 は、ユーザーの負担なく Web サイトをスパムや悪用から保護するセキュリティ サービスです。高度なリスク分析エンジンと適応型チャレンジを使用して、悪意のあるソフトウェアが Web サイト上で不正行為を行うのを防ぎます。 

このチュートリアルでは、Node.js Express アプリケーションに Google reCAPTCHA v3 を実装して、ボットやスパムから保護する方法を学びます。このチュートリアルでは、サイトを Google reCAPTCHA に登録し、HTML フォームに reCAPTCHA バッジを追加し、Node.js Express サーバーで reCAPTCHA トークンを確認する手順を説明します。


目次
 

  • ステップ 1: Google reCaptcha v3 認証情報を取得する
  • ステップ 2: Node.js アプリを作成する
  • ステップ 3: プロジェクトにビュー ファイルを作成する
  • ステップ 4:server.js を作成し、サーバー側でリクエストを処理する

ステップ 1: Google reCaptcha v3 認証情報を取得する

次に、URL: https://www.google.com/recaptchaを使用してサイトを登録し、API キーと API シークレットを取得する必要があります。

注: - Google Captcha はローカルホスト ドメインをネイティブにサポートしていないため、サイト名のテキスト ボックスにローカル アドレス 127.0.0.1 を入力する必要があります。それだ。

ステップ 2: Node.js アプリを作成する

ここでは、プロジェクト フォルダーを作成し、コマンド プロンプト (cmd) に次のコマンドを入力する必要があります。

mkdir public

npm init -y

package.json ファイルを初期化しています。

{

  "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"

  }

}

依存関係として 3 つのパッケージがあるため、ターミナルに移動してコマンドを入力します。

npm install

ステップ 3: プロジェクトにビュー ファイルを作成する

viewファイルと呼ばれるindex.ejsという名前のファイルを1つ作成します。このファイルでは、このアプリケーションのブートストラップ CSS フレームワークを追加するため、その CSS ファイルをパブリック フォルダーに含める必要があります。

<!-- 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>

このページにアクセスするには、 server.jsファイルにルートを 1 つ設定する必要があります。

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

    res.render('index');

});

ターミナルに移動し、次のコマンドを入力します。

npm start

ブラウザに移動し、次の URL を入力します: http://localhost:3000

ステップ 4:server.js を作成し、サーバー側でリクエストを処理する

ここでは 2 つのことを行います。最初の 1 つは、request と呼ばれる 1 つの HTTP リクエスト パッケージをインストールすることです。したがって、次のコマンドを使用して、HTTP 要求パッケージを Node js にインストールします。

npm install request --save

次に、プロジェクト フォルダー内にserver.js ファイルを作成し、server.js ファイルに次のコードを更新します。

// 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);
});

サイトに応じて秘密キーを入力します。キャプチャ認証を使用してフォームを送信すると、応答として成功が得られます。

注:- キャプチャを確認せずにフォームを送信すると、応答でエラーが発生します。

この簡単なガイドを使用すると、Node.js Express に Google reCAPTCHA v3 を実装できるようになります。

読んでくれてありがとう ！！！

1.55 GEEK