如何加入google recaptcha圖型驗證

因為自動爬文的功能日益強大，所以要讓我們的網頁不會被機器人攻佔，我們就要作最基本驗證，你是不是機器人的驗證，google recaptch 就是最簡單好用的工具，以下就是基本範例。

一、上網註冊帳號

https://www.google.com/recaptcha/intro/v3beta.html

驗證的domain: 是你目前網站的domain

註冊成功後

取得一組密碼，分別是Site key 和 Secret key ，site key是用前端網頁用，secret key 允許後端驗證

二、引用recaptcha.js

<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'></script>

<div id="captcha_container" class="google-cpatcha" ></div>

<div id="captcha_container_response"></div> <!--視情況是否需要->

三、如何取得前端的驗證碼

Google recaptcha 會先取得Site Key 進行到驗證後，取得一連串的回傳碼，那一串的回傳碼，如果這回傳碼要post 到server端，就需要先儲存下來，所以下面的就是將callback呼叫onSubmit的函式，將回傳值結果儲存在div。

var onloadCallback = function () {             var sitekey = "6LcHul0XXXXXXXXXXXXXM6NNUXf";             grecaptcha.render('captcha_container', {                 'sitekey': sitekey,                 'callback': onSubmit       }); }; //以下是作者後端需要驗證，所以會保留回傳值，一般的情況是可省略 function onSubmit(response) {          $("#captcha_container_response").val(response); } //以下是筆者先呼叫後端前，先驗證是否機器人，成功後才呼叫後端 $scope.SendChangePassword = function () {         var v = grecaptcha.getResponse();         var vertification = false;         if (v.length == 0) {            alert("驗證失敗!");             return;         } //筆者以非同步呼叫後端，所以連後端也需要驗證 $scope.grecaptchaResponse=$("#captcha_container_response").val(); $http({        method: 'POST',        data: {            oldPassword: $scope.txtOldPassword,            newPassword: $scope.txtNewPassword,            newRePassword: $scope.txtReNewPassword,             grecaptchaResponse: $scope.txtReNewPassword         },            url: '/Web/Changepassword/SendChanegPassword',            cache: false        }) }

四、如何取得後端的驗證碼

[HttpPost]         public ActionResult SendChanegPassword(string oldPassword, string newPassword,   string newRePassword,string grecaptchaResponse)         {             var googleRecaptchResponse = grecaptchaResponse;             GoogleRecaptchService googleRecaptchSvc = new GoogleRecaptchService();             bool vertificationSucess = googleRecaptchSvc.Verification(grecaptchaResponse);             if (vertificationSucess == false)                 return Json(new { success = false, message = "後端驗證失敗!" });             PageResult result = new PageResult();             BusinessLogic bi = new BusinessLogic();             try             {                 result = bi.ChangePassword(oldPassword, newPassword);             }             catch (Exception ex)             {                 result.isSuccess = false;                 result.alertMessage = ex.Message;                 return Json(new { success = false, message = ex.Message });             }             return Json(new { success = true, message = result });         }     public class GoogleRecaptchService     {         public bool Verification(string recaptchResponse)         {             try             {                 var client = new WebClient();                                                           // 透過Google的API 來驗證回傳碼是正確的， 您需要輸入回傳碼和secret key，它會回傳是否驗證成功的訊息                 var result = client.DownloadString(string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", " 輸入Secret key ", recaptchResponse));                 var obj = JObject.Parse(result);                 bool status = (bool)obj.SelectToken("success");                 return status;             }             catch (Exception ex)             {                 throw;             }         }     }

PS: 如果表單是用submit 送到後端時，只需要   string Response = Request["g-recaptcha-response"]，就會自動取得回傳的驗證碼囉~

五、結果

 頁面下方多了一個我不是機器人圖示

勾選後，就會自動產生回傳碼(儲存頁面中)，驗證成功後，才呼叫後端

如果頁面放置太久，原本驗證成功的訊息，也會時間太久而失效，需要再點選驗證喔! 

以上是筆者簡單的介紹喔!!!  是不是很好用…