ASP.NET MVC reCAPTCHA

2018-05-19 置頂文章

1747
0
MVC

前言：

由於最近開始加入公司專案，目前有一個網站的寄信功能希望不要被惡意的使用，所以後來同事建議使用google reCAPTCHA，於是我研究了一下，當然中途有一點小卡，所以寫完之後決定紀錄一下，順便給即將想使用的人參考

google reCAPTCHA：

要使用 google 的 reCAPTCHA 有幾個步驟必須要先知道

1、首先要有一組 google 的帳號密碼，至 google reCAPTHC 申請一組該網站使用的 Site_key 與 Secret key，這邊註冊步驟如圖下

進入網頁後，我個人選擇是第二種透明的方式，會在背後幫你做驗證，並且設定Domain

2、申請成功後會如下圖

我們會拿到一組Site_key 與 Secret_key ，還有一組CDN的JavaScript連結

Site_key ：必須放在前端，並且配合掛載的JS，當Form Post回後端之後，
我們會接收到一個叫做 g-recaptcha-response 的欄位，裡面的 Value 就是加密後的字串

Secret_Key ：是給Server端用的，最後透過後端去呼叫驗證的 api 其中一個參數，
當然如果你是前端開發者，Secret_Key 最終還是你打 api 必須要的參數

程式碼的部分：

程式碼分兩種方式，一種是一般透過 Form submit 的方式，若你不想要頁面重新整理可以使用 Ajax 的方式，但這邊我稍微講一下我卡住的地方，因為我在前端沒辦法單獨去抓到 response 加密過後的字串，所以 AJAX 最後我把整個 Form 序列化之後，丟到後端，後端再去接 g-recaptcha-response 欄位

前端頁面：

<h2>htmlPost</h2>
<script src='https://www.google.com/recaptcha/api.js'></script>

<form id="htmlform" name="htmlform" action="~/Recaptcha/FormPost" method="post">
    <input type="text" name="ID" />
    <br />
    <input type="text" name="Pwd" />
    <br />
    <button class="g-recaptcha"  data-sitekey="6Le_KloUAAAAAPoLeN01lDFWVk5hvLSrgNEsTuuV"  data-callback="htmlsubmit" >送出</button>
</form>

<hr />

<h2>ajaxPost</h2>
<form id="ajaxform" name="ajaxform">
    <input type="text" name="ID" />
    <br />
    <input type="text" name="Pwd" />
    <br />
    <button onclick="ajaxsubmit();">送出</button>
</form>

<script>

    function htmlsubmit() {
        $("#htmlform").submit();
    }

    function ajaxsubmit()
    {
        $.ajax({
            url: "./AjaxPost",
            type: "POST",
            data: $("#ajaxform").serialize(),
            success: function (json) {
                if (json.Result == true) {
                    alert("vaild success");
                } else {
                    alert("vaild fail");
                }
            },
            error: function () {
                alert("error");
            }
        });
    }
</script>

後端頁面

    public class RecaptchaController : Controller
    {
        // GET: Recaptcha
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult FormPost(FormCollection Form)
        {
            string token = Form["g-recaptcha-response"];
            if (!ValidRecaptcha(token))
            {
                return View();//fail
            }
            return RedirectToAction("You RedirectAction");
        }

        [HttpPost]
        public ActionResult AjaxPost(FormCollection form)
        {
            AjaxResult result = new AjaxResult();
            string token = form["g-recaptcha-response"];
            if (!ValidRecaptcha(token))
            {
                result.Result = false;
                result.Message = "google recaptcha驗證失敗";
            }
            result.Result = true;
            result.Message = "success";

            return Json(result, JsonRequestBehavior.AllowGet);
        }

        [NonAction]
        public bool ValidRecaptcha(string token)
        {
            var client = new System.Net.WebClient();
            string Secret_key = "6Le_KloUAAAAAIuWk37KDt4h7HjiC-YNQtc6GxSr";
            var googleReply = client.DownloadString(string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", Secret_key, token));

            dynamic Json = JObject.Parse(googleReply);
            var success = Json.success;
            return success == "true" ? true : false;
        }
    }

結論：

最後取得驗證結果，會回傳一組Json，裡面有一個欄位是Success 會是 ture or false，依照這個結果，之後要做的事情各位就自行發揮
希望對各位有幫助^^

『MickeyShiue』ASP.NET部落格

學程式沒有捷徑，就是不斷的練習，遇到問題就想辦法突破，Coding能力才會變強