どのように2022年にGoogleのrecaptcha v 3を正しく統合するには?

電子メールのスパムを防ぐためのソリューションです.
Google Recaptchaは、電子メールスパムの問題を解決する業界標準のメソッドの一つです.

電子メールスパムは何ですか？

電子メールスパムjunk emails 通常、受信者のメールユーザーの大規模なリストに送信されない招待メールを参照します.この受信者のメールアドレスを盗まれたり、攻撃者によってどのような攻撃者に応じてお金の盗難や商業目的のために購入した.
これらのメールは、ほとんどの時間を開いていると仮定されていない誰かが自分のメールを開き、リンクをクリックすると、これらの攻撃者の犠牲になる隠されたマルウェアを持っている.
例えば
電子メールスパムのソースである場所

ログイン、サインアップとサイトのリセットパスワードフォーム

ブログにコメントしてください

Google Recaptchaの4種類があります.

この記事では、最新のGoogle Recaptcha V 3を統合する予定です.
あなたが既にGoogle Recaptcha V 2を使用していて、あなたがGoogle Recaptcha V 3に移動したいならば、あなたは同じことのためにGoogleドキュメンテーションを読むことができます.

ステップを統合するGoogleの再開発v 3

ステップ1.あなたのウェブサイトを登録してください
まず第一に、我々はRecaptcha管理コンソールでウェブサイトを登録する必要があります.
このように見えます.

手順2.クライアント側の統合
管理コンソールでウェブサイトを登録した後に、Recaptchaキーをメモしてください.
例えば
上記のイメージでは、Recaptchaキーを見ている必要があります.
Recaptchaは2つのキーを与える

サイトキー-これは公開鍵であり、クライアント側の統合で使用されます.

秘密鍵-これは秘密鍵であり、誰にも公開することはできません.これは安全にあなたのバックエンドサーバーに格納する必要があります.

では始めましょうclient-side integration –
1 .サイトキーを使用したJavaScript APIの読み込み

<script src="https://www.google.com/recaptcha/api.js?render=<site_key>"></script>

上記では、実際にパスしますRecaptcha Site Key …の代わりに<site_key>recaptchaサイトキーがSDFJHJK 124 JKHKであるならば
あなたはそれを渡すでしょうか?レンダリングする
2 .コールgrecaptcha.execute それぞれのアクションを保護する

<script>
    function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
            grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
                // Add your logic to submit to your backend server here.
            });
        });
    }
</script>

どちらの入力ボックスを保護する、それはあなたのことができますsignup, login or some other field , 上記のようにクリックハンドラーを更新する必要があります.
上のコードを見ることができますRecaptcha site key そして、grecaptcha.execute 関数.
コールバックが実行されると、トークンを取得します.そして、このトークンはすぐにユーザスコアをフェッチするためにバックエンドサーバに渡される必要があります.
3 .確認するリクエストを使用してバックエンドにすぐにトークンを送信する
これは、サーバー側の流れを引き起こします.
ステップ3.サーバ側の統合
クライアントが渡されたトークンと、サーバー側で既に格納されているrecaptcha秘密キーを使用すると、バックエンドはgoogle site-verify api .
Googleサイトの検証APIはscore それは0.0 to 1.0 . 私たちもthreshold score default of 0.5 どのスコアに我々はユーザーが要求を行うことができます.

If the score is less than the threshold score we can say that the user is not human and it’s a bot. 

If the score is >threshold score then the user is human and the actual functionality of click is allowed.

リクエスト終了点

サイト検証応答
レスポンスはJSONオブジェクトです.

チャレンジ

StackOverflowで、私は何かを探していました、そして、人々の大部分が誤ってそれを実行しているのを発見しました.
彼らはサーバー側からスコアを取得し、スコアとしきい値を比較すると、クライアント側は完全に間違っている.
例えば以下の実装は間違っている

<script>
    function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
            grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
                var score = fetchScoreFromAPI(token);
                if (score > THRESHOLD_SCORE) {
                    callCommentApi();
                }
            });
        });
    }
</script>

上記は不正確です.

クライアントは検証を行いません

アタッカーは簡単にスコアを操作することができますし、コメントAPIのエンドポイントを参照してくださいと迷惑メールでそれを洪水.

正しい実装です.

<script>
    function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
            grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
                callCommentAPI(token);
            });
        });
    }
</script>

// At server side
function callCommentAPI(token){
    var score = fetchScoreFromAPI(token);
    if (score > THRESHOLD_SCORE) {
        // execute logic for comment API
    }
}

それで、我々はちょうど既存のAPIにトークンを通過しました、そして、検証はそれをするより安全で正しい方法であるサーバー側でされます.
また、コメントAPIのURLが公開されている場合でも、それが最初にスコアをチェックとしてspammedされませんが、通知することができます.

概要

何か新しいことを学びましたように.あなたがそれを解決することができると思うならば、私に知らせてください.
私の他の人気記事を読んでください
Nginx Tutorial
Browser Storage
そろそろ今度会いましょう.