Google reCAPTCHA v3 は、ユーザーの負担なく Web サイトをスパムや悪用から保護するセキュリティ サービスです。高度なリスク分析エンジンと適応型チャレンジを使用して、悪意のあるソフトウェアが Web サイト上で不正行為を行うのを防ぎます。
このチュートリアルでは、Node.js Express アプリケーションに Google reCAPTCHA v3 を実装して、ボットやスパムから保護する方法を学びます。このチュートリアルでは、サイトを Google reCAPTCHA に登録し、HTML フォームに reCAPTCHA バッジを追加し、Node.js Express サーバーで reCAPTCHA トークンを確認する手順を説明します。
目次
次に、URL: https://www.google.com/recaptchaを使用してサイトを登録し、API キーと API シークレットを取得する必要があります。
注: - Google Captcha はローカルホスト ドメインをネイティブにサポートしていないため、サイト名のテキスト ボックスにローカル アドレス 127.0.0.1 を入力する必要があります。それだ。
ここでは、プロジェクト フォルダーを作成し、コマンド プロンプト (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
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
ここでは 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 を実装できるようになります。
読んでくれてありがとう !!!