2016年5月25日 星期三

[研究] [ASP.NET WebForm C#] Google reCAPTCHA 試用

[研究] [ASP.NET WebForm C#] Google reCAPTCHA 試用

2016-05-25

Google reCAPTCHA
https://www.google.com/recaptcha/intro/index.html

你的網址 (例如 : forum.shaurong.idv.tw ) 註冊一個 reCAPTCHA 使用
https://www.google.com/recaptcha/admin#list

為了在本機測試,我用 localhost 去申請,沒想到過了 (其實並不合適)



在 .aspx 檔案中 (ex : :Login.aspx )

在 <head> 和  </head> 之間,</head> 之前插入

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


繁體中文用戶,可考慮改用

<script src='https://www.google.com/recaptcha/api.js?hl=zh-TW'></script>


在 <form> 和  </form> 之間,</form> 之前插入

<div class="g-recaptcha" data-sitekey="你的 Site Key"></div>


這邊有些官方資訊可以參考
https://developers.google.com/recaptcha/docs/display#auto_render
https://developers.google.com/recaptcha/docs/verify#api-request

但是 Server端的驗證,官方的資訊看的有點頭大,所以另外找參考資料

How to Validate Recaptcha V2 Server side
http://www.codeproject.com/Tips/851004/How-to-Validate-Recaptcha-V-Server-side

在 Visual Studio 2015 測試成功
Default.aspx 內容如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div class="g-recaptcha" data-sitekey="換上你的 Site Key "></div>
    </div>
        <asp:Button ID="btnLogin" runat="server" Text="Check Recaptcha" OnClick="btnLogin_Click"  TabIndex ="4"/>
    </form>
    <asp:Label ID="lblmsg" runat="server" Text="Label"></asp:Label>
</body>
</html>



在 <form> 和  </form> 之間,</form> 之前插入

using System;
using System.IO;
using System.Net;
using System.Web.Script.Serialization;

namespace WebApplication2
{
    public class MyObject
    {
        public string success { get; set; }
    }
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnLogin_Click(object sender, EventArgs e)
        {
            if (Validate())
            {
                lblmsg.Text = "Valid Recaptcha";
                lblmsg.ForeColor = System.Drawing.Color.Green;
            }

            else
            {
                lblmsg.Text = "Not Valid Recaptcha";
                lblmsg.ForeColor = System.Drawing.Color.Red;
            }
        }
            public bool Validate()
        {
            string Response = Request["g-recaptcha-response"];//Getting Response String Append to Post Method
            bool Valid = false;
            //Request to Google Server
            HttpWebRequest req = (HttpWebRequest)WebRequest.Create
            (" https://www.google.com/recaptcha/api/siteverify?secret=換上你的 Secret Key&response=" + Response);
            try
            {
                //Google recaptcha Response
                using (WebResponse wResponse = req.GetResponse())
                {

                    using (StreamReader readStream = new StreamReader(wResponse.GetResponseStream()))
                    {
                        string jsonResponse = readStream.ReadToEnd();

                        JavaScriptSerializer js = new JavaScriptSerializer();
                        MyObject data = js.Deserialize<MyObject>(jsonResponse);// Deserialize Json

                        Valid = Convert.ToBoolean(data.success);
                    }
                }

                return Valid;
            }
            catch (WebException ex)
            {
                throw ex;
            }
        }
    }
}


(下圖) 在 "我不是機器人" 打勾

(下圖) 依照問題勾選,按下 "驗證" 按鈕

(下圖) Recaptcha 驗證通過了,接下來按下 "Check Recaptcha" 按鈕
 (下圖) 按下 "Check Recaptcha" 按鈕可以抓到 Recaptcha 驗證目前狀態,顯示在按鈕下方

(完)

相關

[研究] [ASP.NET WebForm C#] Google reCAPTCHA 試用
http://shaurong.blogspot.com/2016/05/aspnet-webform-c-google-recaptcha.html

[研究] [ASP.NET WebForm C#] Google reCAPTCHA 試用 (使用 GoogleReCaptcha.dll )
http://shaurong.blogspot.com/2016/05/aspnet-webform-c-google-recaptcha_26.html


沒有留言:

張貼留言