---
title : 「我不是機器人」的驗證(Googel reCAPTCHA)
tags: 我不是機器人驗證、Googel reCAPTCHA
creat-date: 2022-04-27
update_date : 2022-04-27
---

---
## 「我不是機器人」的驗證(Googel reCAPTCHA)
---

### 一、加入許可網域
至下列網址申請，並把要使用的網域加入，再複製兩組key。
https://www.google.com/recaptcha/admin/



### 二、登入程式

web.config

<appSettings>
    <add key="SiteKey" value="6Lf42asUAAAAAF_......" />
    <add key="SecretKey" value="6Lf42asUAAAA_......" />
</appSettings>  

登入頁

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">    
    <script  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://www.google.com/recaptcha/api.js?onload=renderRecaptcha&render=explicit" ></script> 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceInForm" Runat="Server">
      
    <div class="LoginBox">
    	<h1>登入</h1>
        <div class="Login-form-ID">
            帳號:<asp:TextBox ID="txtAccount" runat="server"></asp:TextBox>
        </div>
        <div class="Login-form-PASS">
            密碼:<asp:TextBox ID="txtPwd" TextMode="Password" AutoCompleteType="Disabled" runat="server"></asp:TextBox>
        </div>
        
        <center>
            <div id="ReCaptchContainer"></div>
            <label id="lblMessage" runat="server" clientidmode="static"></label><br />
        </center>

        <div class="Login-form-BTN">
            <asp:Button ID="btnLogin" CssClass="BtnBlue" Text="登入" OnClick="btnLogin_Click" runat="server" />
            <asp:Button ID="btnCancel" CssClass="BtnGray" Text="取消" OnClick="btnCancel_Click" runat="server" />
        </div>
    </div>

    <script type="text/javascript">  
        var site_key = '<%= ConfigurationManager.AppSettings["SiteKey"] %>';  
        var renderRecaptcha = function () {  
            grecaptcha.render('ReCaptchContainer', {  
                'sitekey': site_key,                    
                theme: 'light', //light or dark    
                type: 'image',// image or audio    
                size: 'normal'//normal or compact    
            });  
        };  
  
        jQuery('button[type="button"]').click(function(e) {  
            var message = 'Please checck the checkbox';  
            if (typeof (grecaptcha) != 'undefined') {  
                var response = grecaptcha.getResponse();  
                (response.length === 0) ? (message = 'Captcha verification failed') : (message = 'Success!');  
            }  
            jQuery('#lblMessage').html(message);  
            jQuery('#lblMessage').css('color', (message.toLowerCase() == 'success!') ? "green" : "red");  
        });    
    </script> 
    
</asp:Content>

protected void btnLogin_Click(object sender, EventArgs e)
{ 
    if (!IsReCaptchValid()) {
        lblMessage.InnerHtml = "<span style='color:red'>請驗證「我不是機器人」</span>";
    }
    else {
        // 登入驗證 ...
    }
}

public bool IsReCaptchValid()
{
    var result = false;
    var captchaResponse = Request.Form["g-recaptcha-response"];
    var secretKey = ConfigurationManager.AppSettings["SecretKey"];
    var apiUrl = "https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}";
    var requestUri = string.Format(apiUrl, secretKey, captchaResponse);
    var request = (HttpWebRequest)WebRequest.Create(requestUri);

    using (WebResponse response = request.GetResponse()) {
        using (StreamReader stream = new StreamReader(response.GetResponseStream())) {
            JObject jResponse = JObject.Parse(stream.ReadToEnd());
            var isSuccess = jResponse.Value<bool>("success");
            result = (isSuccess) ? true : false;
        }
    }
    return result;
}

### 三、系統畫面