ExpressにreCAPTCHAを埋め込む #JavaScript

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を描画することもできるようです。