在 JavaScript 中驗證 Google ReCaptcha 第 2 版

Abid Ullah 2022年5月5日
在 JavaScript 中驗證 Google ReCaptcha 第 2 版

在 Google ReCaptcha 第 2 版中,使用者必須選中該框並單擊我不是機器人。有時,這個版本還會丟擲一些圖片拼圖。

大多數情況下,真正的使用者只需單擊核取方塊即可完成驗證碼。因此,我們使用 ReCaptcha 保護我們的網站免受欺詐和濫用。

本文將驗證 JavaScript 中的 Google Recaptcha 第 2 版。

在 JavaScript 中驗證 Google ReCaptcha 第 2 版

有兩種方法可以驗證 Google ReCaptcha - 伺服器端客戶端。我們將專注於客戶端驗證並討論使用 JavaScript 驗證 Google Recaptcha 2。

首先,我們需要在此處的連結上註冊我們的網站:https://www.google.com/recaptcha/admin。開啟連結後,我們需要在網站上提交詳細資訊,如下圖所示。

提交詳細資訊並在網站上註冊 Recaptcha

一旦我們提交了詳細資訊,我們將獲得我們的站點金鑰和金鑰,如下圖所示。我們將使用這些來驗證 Recaptcha。

提交詳細資訊後獲取 Secret-Key 和 Site-Key

為了將 Recaptcha 整合到我們的 HTML 頁面中,首先,我們需要在表單中包含 <div class="g-recaptcha" data-sitekey="site key" > /div>。我們用我們的金鑰替換站點金鑰。

然後,我們包含 Google Recaptcha API 以在我們的表單上初始化 Recaptcha。我們將在我們的 HTML 程式碼中使用這個指令碼 <script src="https://www.google.com/recaptcha/api.js" async defer></script>

接下來,我們使用 data-callback 和 data-expired-callback 屬性使 Recaptcha 與驗證器配合。我們包含來自連結的 Recaptcha api.js:https://www.google.com/recaptcha/api.js。

然後,我們將 class=g-recaptchadata-sitekey 新增到下面程式碼所示的 div 屬性中。

要確定使用者不是機器人,我們必須首先在客戶端進行驗證。我們執行程式碼,當提交表單時,它會使用 ReCaptcha 檢查使用者是否完成了驗證。

我們使用 JavaScript 完成了 Google Recaptcha 的驗證。

示例程式碼:

<html>
<head>
    <title>reCaptcha validation demo</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    <div class="form_container">
        <form action="#" id="my_captcha_form">
            <div class="g-recaptcha" data-sitekey="6LfrFKQUAAAAAMzFobDZ7ZWy982lDxeps8cd1I2i">
            </div>
            <p>
                <button type="submit" >Submit</button>
            </p>
        </form>
    </div>
<script>document.getElementById("my_captcha_form").addEventListener("submit",function(evt)
{
    var response = grecaptcha.getResponse();
    if(response.length == 0)
    {
        alert("please verify you are humann!");
        evt.preventDefault();
        return false;
    }
});</script>
</body>
</html>
Author: Abid Ullah
Abid Ullah avatar Abid Ullah avatar

My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.

LinkedIn