BOT対策として、Expressで作成したフォームにGoogleのreCAPTCHA(v3)を埋め込みます。
1. GoogleのreCAPTCHAに登録する
Googleが提供するサービスなので、規約に同意して登録します。
2. ドメインの設定
WebサイトのURLで使用しているドメインを追加します。
ローカルの開発環境でも動作させたいので、「localhost」も追加しておきます。
3. Viewの.ejsにHTMLタグを追記する
header部に.jsファイルのロードと送信関数を追記します。
次に、フォームの送信ボタンを置き換えます。
サイトキーはreCAPTCHAを登録するとGoogleから貰えます。
onSubmit関数でformタグのidを指定しているので、書き換えるのを忘れずに。
<header>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
</header>
<body>
<form id="demo-form">
<button class="g-recaptcha"
data-sitekey="ここにサイトキーを貼る"
data-callback='onSubmit'
data-action='submit'>Submit</button>
</form>
</body>
4. express-recaptchaをインストールする
npm install express-recaptcha
5. ルーティングにBOT判定を追加する
フォームからPOSTされたときのルーティングをにreCAPTCHAの判定処理を追加します。
Googleに問い合わせて返ってきたdataの中にscoreがあるので、任意の閾値で区切りします。1.0は人の可能性が高く、0.0はBOTの可能性が高いです。今回は間をとって0.5を閾値にしています。
Expressのミドルウェアの機能を使って、POSTされたときの処理とreCAPTCHAの判定処理を分けています。
app.js
const Recaptcha = require('express-recaptcha').RecaptchaV3;
const recaptcha = new Recaptcha('サイトキー', 'シークレットキー', {callback: 'cb'});
app.post('/form',
function(req, res, next){
recaptcha.verify(req, function(error, data){
if(error){
// エラー時の処理
}
else {
if(data.score >= 0.5){
// 人として認識されたときの処理 OK
next();
}
else {
// BOTとして認識されたときの処理 NG
}
}
});
},
function(req, res, next){
// フォームの内容を処理する
}
);
まとめ
今回、View部分は自力で実装、ルーティング部分はexpress-recaptchaを使いました。
express-recaptchaの機能を使って、Viewを描画することもできるようです。