日期：2025年 09月 20日

標籤： Asp.NET Core reCAPTCHA Google Cloud Platform Asp.NET Core Asp.NET Core Web MVC C# Selenium Web

摘要：C# 學習筆記

第一部分：reCAPTCHA 介紹

Step 1： 介紹

reCAPTCHA 是一項免費服務，可以保護您的網站免受垃圾內容和濫用行為的侵擾。並採用先進的風險分析技術，分辨真人和機器人。
以下是 Google 官方的reCAPTCHA 總覽：

reCAPTCHA 採用進階風險分析技術偵測詐欺行為，您可以透過 reCAPTCHA 保護網站或行動應用程式免受垃圾內容和濫用行為侵擾，並偵測其他類型的詐欺活動，例如憑證填充、帳戶盜用 (ATO) 和自動建立帳戶。
reCAPTCHA 提供更精細的分數、高風險事件的原因代碼、行動應用程式 SDK、密碼外洩偵測、多重驗證 (MFA)，以及調整網站專屬模型的功能，可保護企業業務。

目的就是保護自己架設的網站、應用程式。
本篇目標：針對自己的網站，分別說明 reCAPTCHA 3種驗證方式的用法與防護方式、C# DEMO 實作 (Checkbox , Invisible , Score)

Step2：可用方案 & 收費方式

可參考 Google 的付費方式分成 3 種方案類型

Step 3： 方案提供功能補充說明

在Google的reCAPTCHA參考指南裡，列出3種方案類型功能說明：
這邊簡要補充各功能具體意義，詳細說明建議還是參考上面官方文件：

Step 4： 網站可啟用驗證方式與應用場景

以下是 3 種驗證方式與適用場景：

第二部分：範例專案架構

Step 1：範例專案架構

打開本篇範例代碼後，架構基本分成以下：

第三部分：reCAPTCHA DEMO -「我不是機器人」核取方塊

Step 1：註冊新 reCAPTCHA

登入Google reCAPTCHA網站，我們要註冊新的金鑰 -> 開始使用
※每個驗證器都需要獨立新增 reCAPTCHA ，因為 Google 會依照選擇驗證方式從而產生一對驗證器的金鑰。

Step 2：註冊新 reCAPTCHA - CheckBox

進入後到註冊新頁面，依序填寫如圖內容
這邊驗證類型選擇 驗證問題(v2) -> 「我不是機器人」核取方塊
網域填寫：localhost ，這會用於開發者在 DEBUG 模式下可以驗證 reCAPTCHA 是否符合預期

Step 3：註冊新 reCAPTCHA - 取得網站金鑰、密鑰

接著會跳轉到設定完成，請將畫面上的 網站金鑰、密鑰 記錄下來

Step 4：範例專案 - Razor 檢視器

開啟範例專案 -> Views/Home/CheckBoxV2.cshtml 檔案 -> 內容如下：
當用戶訪問時，必須要對 我不是機器人打勾(CheckBox)

@{
    ViewData["Title"] = "reCAPTCHA V2 - 核取方塊，我不是機器人機制";
}

<h2>reCAPTCHA V2 - 核取方塊，我不是機器人機制 Demo</h2>

<form method="post" asp-action="CheckBoxV2Validate">
    <input type="text" name="Username" placeholder="輸入名稱" value="MilkTeaGreen"  />

    <div class="g-recaptcha" data-sitekey="6Ld8zqErAAAAAOCngiA0B_rcMWjMdz3w3fjr8puv"></div>

    <button type="submit">送出</button>
</form>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

@if (ViewBag.Message != null)
{
    <p>@ViewBag.Message</p>
}

Step 5：範例專案 - 後端控制器

開啟範例專案 -> Controller/Home/HomeController.CheckBoxV2.cs 檔案 -> 內容如下：
提供檢視、前端用戶點擊送出按鈕後，進行 reCAPTCHA 的 CheckBox V2 驗證
當 Success 時即表示驗證成功，此資訊會記錄於 Google 的分析統計中
請將 Step 3 得到的一對金鑰填入對應：

public partial class HomeController : Controller
{
    // 1-1. 前端使用的網站金鑰
    private readonly string _checkBoxV2WebSiteKey = $@"";
    // 1-2. 後端使用的金鑰
    private readonly string _checkBoxV2SecretKey = $@"";

    /// <summary>
    /// 2. 檢視 View
    /// </summary>    
    [HttpGet]
    public IActionResult CheckBoxV2()
    {
        return View();
    }

    /// <summary>
    /// 3. 從前端獲得訪問 Token ，並反饋 reCAPTCHA CheckBox V2 驗證結果
    /// </summary>
    [HttpPost]
    public async Task<IActionResult> CheckBoxV2Validate(string Username)
    {
        // 3-1. 前端使用的 WebSite Key 
        var captchaResponse = Request.Form["g-recaptcha-response"];
        if (string.IsNullOrEmpty(captchaResponse))
        {
            ViewBag.Message = "請完成 reCAPTCHA - CheckBox V2 驗證";
            return View();
        }

        // 3-2. 將後端 + 前端使用的 key 送到 Google 的 reCAPTCHA 驗證
        var client = _httpClientFactory.CreateClient();
        var postData = new Dictionary<string, string> {
                           {"secret", _checkBoxV2SecretKey},
                           {"response", captchaResponse}
                       };

        // 3-3. 獲得響應結果 (CheckBox 與 Invisible 使用的 Json 格式相同)
        var response = await client.PostAsync("https://www.google.com/recaptcha/api/siteverify",
                                               new FormUrlEncodedContent(postData));
        var json = await response.Content.ReadAsStringAsync();
        var captchaResult = JsonSerializer.Deserialize<ReCaptchaResponse>(json);

        // 3-4.響應 - 並將結果放進 ViewBag 給用戶提示
        if (captchaResult.success)
        {
            ViewBag.Message = $"CheckBox V2 驗證成功，歡迎 {Username}！";
        }
        else
        {
            ViewBag.Message = "CheckBox V2 驗證失敗，請重試。";
        }

        // 4.返回頁面
        return View("CheckBoxV2");
    }
}

Step 6：驗證成果 - 啟動程式到首頁

啟動專案後，會來到程式首頁，選擇框選的地方跳轉到 DEMO 頁面

Step 7：驗證成果 - CheckBox V2 頁面

進入測試頁面 -> 進行打勾 (我不是機器人)

Step 8：驗證成果 - 判斷出真人

當我們用滑鼠點擊時，如果 reCAPTCHA 判斷從頁面載入，到打勾的過程中，演算出執行者是真人，會立刻出現打勾，表示正確

然後我們按下送出，可以獲得驗證成功的結果

Step 9：驗證成果 - 自動化工具訪問 CheckBox V2 驗證器 - 保持網站啟動

在本機對專案啟動，可以開啟 2 個 Visual Studio 或者直接下以下指令，啟動 localhost 的 Web

dotnet reCAPTCHATbyGoogleExample.dll

Step 10：驗證成果 - 自動化工具訪問 CheckBox V2 驗證器 - 開啟工具

啟動該專案，並且選擇 Program_CheckBoxV2.cs 做為啟動對象，執行自動化 Selenium 程式

代碼如下：

public class Program_CheckBoxV2
{
    static void Main(string[] args)
    {

        ChromeOptions options = new ChromeOptions();
        options.AddArgument("--start-maximized");
        try
        {
            using (IWebDriver driver = new ChromeDriver(options))
            {
                // 1. 進入 reCAPTCHA v2 Checkbox 測試頁面
                driver.Navigate().GoToUrl("http://localhost:5000/Home/CheckBoxV2");

                // 2. 等待頁面載入
                Thread.Sleep(2000);

                // 3. 填入名稱
                var nameInput = driver.FindElement(By.Name("Username"));
                nameInput.Clear();
                nameInput.SendKeys("MilkTeaGreen");

                Thread.Sleep(2000);

                // 4. 切換到 reCAPTCHA iframe
                IWebElement iframe = driver.FindElement(By.CssSelector("iframe[title='reCAPTCHA']"));
                driver.SwitchTo().Frame(iframe);

                // 5. 直接點擊（很容易被判定機器人）
                Console.WriteLine("直接 DOM Click reCAPTCHA...");
                IWebElement checkbox = driver.FindElement(By.Id("recaptcha-anchor"));
                checkbox.Click();

                Thread.Sleep(30000);
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
        }
    }

}

Step 11：驗證成果 - CheckBox V2 驗證器 - 防護成功

自動化的過程，因為 Selenium 實現了瞬移，因此跳出驗證畫面，需要對圖片做驗證
成功的實現阻擋自動化機器人攻擊自家的網站。

第四部分：reCAPTCHA DEMO - 隱形 reCAPTCHA 標記

Step 1：註冊新 reCAPTCHA

登入Google reCAPTCHA網站，我們要註冊新的金鑰 -> 開始使用
※每個驗證器都需要獨立新增 reCAPTCHA ，因為 Google 會依照選擇驗證方式從而產生一對驗證器的金鑰。

Step 2：註冊新 reCAPTCHA - Invisible

進入後到註冊新頁面，依序填寫如圖內容
這邊驗證類型選擇 驗證問題(v2) -> 「隱形 reCAPTCHA」標記
網域填寫：localhost ，這會用於開發者在 DEBUG 模式下可以驗證 reCAPTCHA 是否符合預期

Step 3：註冊新 reCAPTCHA - 取得網站金鑰、密鑰

接著會跳轉到設定完成，請將畫面上的 網站金鑰、密鑰 記錄下來

Step 4：範例專案 - Razor 檢視器

開啟範例專案 -> Views/Home/InvisibleV2.cshtml 檔案 -> 內容如下：
當用戶訪問時，不需要做任何事，只要行為可疑，就會被判對為機器人，從而要求驗證

@{
    ViewData["Title"] = "reCAPTCHA V2 - 隱藏在背景機制";
}

<h2>reCAPTCHA V2 - 隱藏在背景機制 Demo</h2>

<form id="demo-form" method="post" asp-action="InvisibleV2Validate">
    <input type="text" name="Username" placeholder="輸入名稱" value="MilkTeaGreen" />


    <button class="g-recaptcha"
            data-sitekey="6Ld0m6QrAAAAALRPum4xz9IUcUB55tjDtMl4WMx7"
            data-callback="onSubmit"
            data-size="invisible">
            送出
    </button>
</form>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<script>
    function onSubmit(token) {
        document.getElementById("demo-form").submit();
    }
</script>

@if (ViewBag.Message != null)
{
    <p>@ViewBag.Message</p>
}

Step 5：範例專案 - 後端控制器

開啟範例專案 -> Controller/Home/HomeController.InvisibleV2.cs 檔案 -> 內容如下：
提供檢視、前端在執行送出的過程之間，若被偵測到異常，會被視為機器人
當 Success 時即表示驗證成功，此資訊會記錄於 Google 的分析統計中
請將 Step 3 得到的一對金鑰填入對應：

public partial class HomeController : Controller
{
    // 1-1. 前端使用的網站金鑰
    private readonly string _InvisibleV2WebSiteKey = $@"";
    // 1-2. 後端使用的金鑰
    private readonly string _InvisibleV2WebSecretKey = $@"";
    
    /// <summary>
    /// 2. 檢視 View
    /// </summary>    
    [HttpGet]
    public IActionResult InvisibleV2()
    {
        return View();
    }

    /// <summary>
    /// 3. 從前端獲得訪問 Token ，並反饋 reCAPTCHA Invisible V2 驗證結果
    /// </summary>    
    [HttpPost]
    public async Task<IActionResult> InvisibleV2Validate(string Username)
    {
        // 3-1. 前端使用的 WebSite Key 
        var captchaResponse = Request.Form["g-recaptcha-response"];
        if (string.IsNullOrEmpty(captchaResponse))
        {
            ViewBag.Message = "請完成 reCAPTCHA - Invisible V2 驗證";
            return View();
        }

        // 3-2. 將後端 + 前端使用的 key 送到 Google 的 reCAPTCHA 驗證
        var client = _httpClientFactory.CreateClient();
        var postData = new Dictionary<string, string> {
                          { "secret", _InvisibleV2WebSecretKey },
                          { "response", captchaResponse }
                      };
        
        // 3-3. 獲得響應結果
        var httpResponse = await client.PostAsync("https://www.google.com/recaptcha/api/siteverify",
                                                   new FormUrlEncodedContent(postData));
        var json = await httpResponse.Content.ReadAsStringAsync();
        var captchaResult = JsonSerializer.Deserialize<ReCaptchaResponse>(json);

        // 3-4. 響應 - 並將結果放進 ViewBag 給用戶提示
        if (captchaResult.success)
        {
            ViewBag.Message = $"Invisible V2 驗證成功，歡迎 {Username}！";
        }
        else
        {
            ViewBag.Message = "Invisible V2 驗證失敗，請重試。";
        }

        // 4. 返回頁面
        return View("InvisibleV2");
    }
}

Step 6：驗證成果 - 啟動程式到首頁

啟動專案後，會來到程式首頁，選擇框選的地方跳轉到 DEMO 頁面

Step 7：驗證成果 - Invisible V2 頁面

進入測試頁面 -> 直接送出

Step 8：驗證成果 - 判斷出真人

然後我們按下送出，可以獲得驗證成功的結果，

Step 9：驗證成果 - 自動化工具訪問 Invisible V2 驗證器 - 保持網站啟動

在本機對專案啟動，可以開啟 2 個 Visual Studio 或者直接下以下指令，啟動 localhost 的 Web

dotnet reCAPTCHATbyGoogleExample.dll

Step 10：驗證成果 - 自動化工具訪問 Invisible V2 驗證器 - 開啟工具

啟動該專案，並且選擇 Program_InvisibleV2.cs 做為啟動對象，執行自動化 Selenium 程式

代碼如下：

public class Program_InvisibleV2
{
    static void Main(string[] args)
    {
        ChromeOptions options = new ChromeOptions();
        options.AddArgument("--start-maximized");
        try
        {
            using (IWebDriver driver = new ChromeDriver(options))
            {
                // 1. 進入 Invisible V2 驗證器測試頁面
                driver.Navigate().GoToUrl("http://localhost:5000/Home/InvisibleV2");

                // 2. 填入名稱
                var nameInput = driver.FindElement(By.Name("Username"));
                nameInput.Clear();
                nameInput.SendKeys("MilkTeaGreen");

                // 3. 點擊送出按鈕（Invisible reCAPTCHA 會自動觸發）
                var submitButton = driver.FindElement(By.CssSelector(".g-recaptcha"));
                submitButton.Click();

                // 4. 等待驗證處理（實際應該用顯示等待 WebDriverWait）
                Thread.Sleep(5000);

                // 5. 取得頁面結果
                var bodyText = driver.FindElement(By.TagName("body")).Text;
                Console.WriteLine("頁面內容：\n" + bodyText);

                Thread.Sleep(30000);
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
        }
    }
}

Step 11：驗證成果 - CheckBox V2 驗證器 - 防護成功

自動化的過程，因為 Selenium 仍實現了瞬移，因此跳出驗證畫面，需要對圖片做驗證
成功的實現阻擋自動化機器人攻擊自家的網站。

第五部分：reCAPTCHA DEMO - 以分數為依據 (v3)

Step 1：註冊新 reCAPTCHA

登入Google reCAPTCHA網站，我們要註冊新的金鑰 -> 開始使用
※每個驗證器都需要獨立新增 reCAPTCHA ，因為 Google 會依照選擇驗證方式從而產生一對驗證器的金鑰。

Step 2：註冊新 reCAPTCHA - Score

進入後到註冊新頁面，依序填寫如圖內容
這邊驗證類型選擇 以分數為依據 (v3)
網域填寫：localhost ，這會用於開發者在 DEBUG 模式下可以驗證 reCAPTCHA 是否符合預期

Step 3：註冊新 reCAPTCHA - 取得網站金鑰、密鑰

接著會跳轉到設定完成，請將畫面上的 網站金鑰、密鑰 記錄下來

Step 4：範例專案 - Razor 檢視器

開啟範例專案 -> Views/Home/Program_ScoreV3.cshtml 檔案 -> 內容如下：
當用戶訪問時，不需要做任何事，只要行為可疑，就會被判對為機器人，從而要求驗證
備註：(Invisiable 是二元判斷， Score 是分數判斷)

@{
    ViewData["Title"] = "reCAPTCHA V3 - Score 機制";
}

<h2>reCAPTCHA V3 - Score 機制 Demo</h2>

<form id="score-form" method="post" asp-action="ScoreV3Validate">
    <input type="text" name="Username" placeholder="輸入名稱" value="MilkTeaGreen" />
    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response"  />
    <button type="submit">送出</button>
</form>

<script src="https://www.google.com/recaptcha/api.js?render=6Ldqo6QrAAAAAHoycY5qc7pwJjE1b8igiXXJ8vCq"></script>
<script>
    grecaptcha.ready(function () {
        grecaptcha.execute('6Ldqo6QrAAAAAHoycY5qc7pwJjE1b8igiXXJ8vCq', { action: 'submit' }).then(function (token) {
            document.getElementById('g-recaptcha-response').value = token;
        });
    });
</script>

@if (ViewBag.Message != null)
{
    <p>@ViewBag.Message</p>
}

Step 5：範例專案 - 後端控制器

開啟範例專案 -> Controller/Home/HomeController.ScoreV3.cs 檔案 -> 內容如下：
提供檢視、前端在執行送出的過程之間，若被偵測到異常，會被視為機器人
當 Success 時即回傳分數，分數越高越接近真人(滿分 1.0)，越低越接近機器人(最低 0)，此資訊會記錄於 Google 的分析統計中
請將 Step 3 得到的一對金鑰填入對應：

public partial class HomeController : Controller
{
    // 1-1.  前端使用的網站金鑰
    private readonly string _ScoreV3WebSiteKey = $@"";
    // 1-2. 後端使用的金鑰
    private readonly string _ScoreV3WebSecretKey = $@"";

    /// <summary>
    /// 2. 檢視 View
    /// </summary>
    [HttpGet]
    public IActionResult ScoreV3()
    {
        return View();
    }

    /// <summary>
    /// 3. 從前端獲得訪問 Token ，並反饋 reCAPTCHA Score V3 驗證結果
    /// </summary>
    [HttpPost]
    public async Task<IActionResult> ScoreV3Validate(string Username)
    {
        // 3-1. 前端使用的 WebSite Key 
        var captchaResponse = Request.Form["g-recaptcha-response"];
        if (string.IsNullOrEmpty(captchaResponse))
        {
            ViewBag.Message = "請完成 reCAPTCHA - Score V3 驗證";
            return View();
        }

        // 3-2. 將後端 + 前端使用的 key 送到 Google 的 reCAPTCHA 驗證
        var client = _httpClientFactory.CreateClient();
        var postData = new Dictionary<string, string> {
                           {"secret", _ScoreV3WebSecretKey},
                           {"response", captchaResponse}
                       };
        
        // 3-3. 獲得響應結果 Score V3 的 Json 格式多了 score 欄位
        var response = await client.PostAsync("https://www.google.com/recaptcha/api/siteverify", 
                                               new FormUrlEncodedContent(postData));

        var json = await response.Content.ReadAsStringAsync();
        var captchaResult = JsonSerializer.Deserialize<ReCaptchaResponseV3>(json);

        // 3-4. 響應 - 並將結果放進 ViewBag 給用戶提示
        if (captchaResult.success)
        {
            // 3-5. 可以依照分數決定自己網站對於機器人應對策略
            ViewBag.Message = $"Score V3 驗證成功，當前分數 : {captchaResult.score}，歡迎 {Username}！";
        }
        else
        {
            ViewBag.Message = "Score V3 驗證失敗，請重試。";
        }

        // 4. 返回頁面
        return View("ScoreV3");
    }

}

Step 6：驗證成果 - 啟動程式到首頁

啟動專案後，會來到程式首頁，選擇框選的地方跳轉到 DEMO 頁面

Step 7：驗證成果 - Score V3 頁面

進入測試頁面 -> 直接送出

Step 8：驗證成果 - 判斷出真人

然後我們按下送出，可以獲得驗證成功的結果，得到分數 0.9 (但實際上需要給此驗證器一些時間，可參考第五部分 Step 11.)

Step 9：驗證成果 - 自動化工具訪問 Score V3 驗證器 - 保持網站啟動

在本機對專案啟動，可以開啟 2 個 Visual Studio 或者直接下以下指令，啟動 localhost 的 Web

dotnet reCAPTCHATbyGoogleExample.dll

Step 10：驗證成果 - 自動化工具訪問 Score V3 驗證器 - 開啟工具

啟動該專案，並且選擇 Program_ScoreV3.cs 做為啟動對象，執行自動化 Selenium 程式

代碼如下：

public class Program_ScoreV3
{
    static void Main(string[] args)
    {
        // 啟動 ChromeDriver
        var options = new ChromeOptions();
        options.AddArgument("--start-maximized");        

        try
        {
            using (var driver = new ChromeDriver(options))
            {
                // 1. 進入 reCAPTCHA v3 測試頁面
                driver.Navigate().GoToUrl("http://localhost:5000/Home/ScoreV3"); // 改成你的實際 URL

                // 2. 填入 Username
                var usernameField = driver.FindElement(By.Name("Username"));
                usernameField.Clear();
                usernameField.SendKeys("MilkTeaGreen");

                // 3. 等待 g-recaptcha-response 有值
                var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
                wait.Until(d =>
                {
                    var tokenValue = d.FindElement(By.Id("g-recaptcha-response")).GetAttribute("value");
                    return !string.IsNullOrEmpty(tokenValue);
                });

                // 4. 取得 Token
                Console.WriteLine("[Debug] Token 已產生: " +
                    driver.FindElement(By.Id("g-recaptcha-response")).GetAttribute("value"));

                // 5. 送出表單
                driver.FindElement(By.CssSelector("form#score-form button[type='submit']")).Click();

                // 6. 等驗證結果出現
                wait.Until(d => d.PageSource.Contains("Score V3 驗證成功") || d.PageSource.Contains("Score V3 驗證失敗"));

                Console.WriteLine("頁面回應:\n" + driver.PageSource);

                Thread.Sleep(30000);
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
        }
    }
}

Step 11：驗證成果 - Score V3 驗證器 - 機制影響

自動化的過程，雖然 Selenium 實現了瞬移，但是在 Score V3 驗證機制下，會有自己的演算法判斷是否在測試 (我的域名是 localhost)
要影響分數的變化有以下，否則恆定為 0.9 ：

可參考 StackOverflow 的討論串：連結

第六部分：管理金鑰 & 統計分析

Step 1： Google 提供 2 種入口網站

Google 提供了 reCAPTCHA 2 種入口來提供用戶管理，2 個網站都可以為 reCAPTCHA 做資料統計，補充說明：
分別原始 reCAPTCHA 管理後台、開發者整合 reCAPTCHA 後台(GCP)

Step 2：管理金鑰 - GCP 進入管理

若要刪除金鑰，對金鑰管理建議在 GCP 做管理
進入連結後 -> 管理 reCAPTCHA

Step 3：管理金鑰 - 選擇金鑰

進入 GCP 後 -> 選擇金鑰詳細
每把金鑰對應著不同的 reCAPTCHA 驗證器

Step 4：管理金鑰 - 統計分析頁、管理設定

進入金鑰詳細後，上方的 機器人 分頁，可以出現使用此金鑰用戶訪問的次數，並且會提供統計圖
若要管理此金鑰可選擇右上角的 編輯金鑰、刪除金鑰

Step 5：管理金鑰 - 編輯金鑰 - 域名

進入編輯金鑰後，最常修改的應屬於 網域清單 ，因為金鑰會在自己網站綁定域名後，到此來做編輯設定