• 行为验证码的asp.net MVC实现方式 qq521877626


    界面http://localhost:你的服务器/Code/index

     

    实现步骤:

    注册账号https://www.geetest.com

     

    新增验证

     

    下载demo urlhttp://docs.geetest.com/install/server/csharp/

    找到C#SDK .dll

     

    gt3-dotnet-sdk-mastergt3-dotnet-sdk-mastersrcGeetestSDKGeetestSDKinDebugGeetestSDK.dll

    新建mvc项目

     

    在自己的mvc项目中新建一个文件夹,复制到自己的mvc项目中,添加引用。

     

    配置公钥和秘钥 创建一个类

    类名字都要相同

    对应关系

    publicKey  ---ID

    privateKey --- KEY

    创建 controller

     

    创建index视图 (里面有些代码是从 demo(gt3-dotnet-sdk-mastergt3-dotnet-sdk-masterdemoindex.aspx)copy出来的)

     

    CODE:

    @{

        Layout = null;

    }

    <!DOCTYPE html>

    <html>

    <head>

        <meta name="viewport" content="width=device-width" />

        <title>Index</title>

        <style>

            body {

                margin: 50px 0;

                text-align: center;

            }

            .inp {

                border: 1px solid gray;

                padding: 0 10px;

                 200px;

                height: 30px;

                font-size: 18px;

            }

            .btn {

                border: 1px solid gray;

                 100px;

                height: 30px;

                font-size: 18px;

                cursor: pointer;

            }

            #embed-captcha {

                 300px;

                margin: 0 auto;

            }

            .show {

                display: block;

            }

            .hide {

                display: none;

            }

            #notice {

                color: red;

            }

            #submitBtn {

                margin-top: 30px;

            }

            #sb {

                position: absolute;

                color: green;

                top: 670px;

                left: 50%;

                transform: translateX(-50%);

            }

            /* 以下遮罩层为demo.用户可自行设计实现 */

            #mask {

                display: none;

                position: fixed;

                text-align: center;

                left: 0;

                top: 0;

                 100%;

                height: 100%;

                background-color: rgba(0, 0, 0, 0.5);

                overflow: auto;

            }

            /* 可自行设计实现captcha的位置大小 */

            .popup-mobile {

                position: relative;

            }

            #popup-captcha-mobile {

                position: fixed;

                display: none;

                left: 50%;

                top: 50%;

                transform: translate(-50%, -50%);

                -webkit-transform: translate(-50%, -50%);

                z-index: 9999;

            }

        </style>

    </head>

    <body>

        <h1 class="h1">极验验证SDKDemo</h1>

       

        <!-- 为使用方便,直接使用jquery.js库,如您代码中不需要,可以去掉 -->

        <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>

        <!-- 引入封装了failback的接口--initGeetest -->

        <script src="http://static.geetest.com/static/tools/gt.js"></script>

        <!-- 若是https,使用以下接口 -->

        <!-- <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> -->

        <!-- <script src="https://static.geetest.com/static/tools/gt.js"></script> -->

        <div> 

            <br><br>

            <form  id="form2" action="/Code/submitBtn_ClickMethod"  method="post" style="margin-top:100px;">

                <h2>Demo,使用ajax形式提交二次验证所需的验证结果值</h2>

                <br>

                <p>

                    <label for="username2">用户名:</label>

                    <input class="inp " id="username2" name="userName" type="text" value="极验验证">

                </p>

                <br>

                <p>

                    <label for="password2">密  码:</label>

                    <input class="inp" name="password" id="password2" type="password" value="123456">

                </p>

                <div id="embed-captcha"></div>

                <p id="wait" class="show">正在加载验证码......</p>

                <p id="notice" class="hide">请先拖动验证码到相应位置</p>

                <div class="row">

                    <input type="button" class="btn btn-primary" id="submitBtn" onclick="submitBtn_Click()" value="登 录" />

                </div>

            </form>

        </div>

        <script>

        var handlerEmbed = function (captchaObj) {

            $("#embed-submit").click(function (e) {

                var validate = captchaObj.getValidate();

                if (!validate) {

                    $("#notice")[0].className = "show";

                    setTimeout(function () {

                        $("#notice")[0].className = "hide";

                    }, 2000);

                    e.preventDefault();

                }

            });

            // 将验证码加到id为captcha的元素里,同时会有三个input的值:geetest_challenge, geetest_validate, geetest_seccode

            captchaObj.appendTo("#embed-captcha");

            captchaObj.onReady(function () {

                $("#wait")[0].className = "hide";

            });

            // 更多接口参考:http://www.geetest.com/install/sections/idx-client-sdk.html

            };

            /*点击登录时ajax请求控制器,把相关数据发送到服务器*/

            var submitBtn_Click = function () {

                $.ajax({

                    // 获取id,challenge,success(是否启用failback)

                    // url: "/getcaptcha.aspx?t=" + (new Date()).getTime(), // 加随机数防止缓存

                    url: "/Code/submitBtn_ClickMethod",

                    type: "post",

                    data: $("#form2").serialize(),

                    dataType: "json",

                    success: function (data) { alert(data);},

                    error: function (data) {

                        alert(data);

                    }

                });

            };

           

        $.ajax({

            // 获取id,challenge,success(是否启用failback)

           // url: "/getcaptcha.aspx?t=" + (new Date()).getTime(), // 加随机数防止缓存

            url:"/Code/GetCaptcha",

            type: "post",

            dataType: "json",

            success: function (data) {

                // 使用initGeetest接口

                // 参数1:配置参数

                // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件

                data = eval('(' + data + ')');

                initGeetest({

                    gt: data.gt,

                    challenge: data.challenge,

                    product: "embed", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效

                    offline: !data.success, // 表示用户后台检测极验服务器是否宕机,一般不需要关注

                    new_captcha: data.new_captcha

                    // 更多配置参数请参见:http://www.geetest.com/install/sections/idx-client-sdk.html#config

                }, handlerEmbed);

            }

        });

        </script>

    </body>

    </html>

    controller里面action方法(gt3-dotnet-sdk-mastergt3-dotnet-sdk-masterdemo里面寻找的 进行修改)

      public class CodeController : Controller

        {

            // GET: Code

            public ActionResult Index()

            {

                return View();

            }

            /// <summary>

            /// 获取到验证码,把验证码存到Session中

            /// </summary>

            /// <returns></returns>

            public ActionResult GetCaptcha()

            {

                GeetestLib geetest = new GeetestLib(GeetestConfig.publicKey, GeetestConfig.privateKey);

                String userID = "haiyiTest";//CommonHelper.CalcMD5("haiyiTest")

                Byte gtServerStatus = geetest.preProcess(userID, "web", "127.0.0.1");

                Session[GeetestLib.gtServerStatusSessionKey] = gtServerStatus;

                Session["userID"] = userID;

                string captChaString = geetest.getResponseStr();

                 return Json((object)captChaString);

            }

            public ActionResult submitBtn_ClickMethod(string userName,string password,string geetest_challenge,string geetest_validate,string geetest_seccode)

            {

                GeetestLib geetest = new GeetestLib(GeetestConfig.publicKey, GeetestConfig.privateKey);

                Byte gt_server_status_code = (Byte)Session[GeetestLib.gtServerStatusSessionKey];

                String userID = (String)Session["userID"];

                int result = 0;

                //String challenge = Request.Form.Get(GeetestLib.fnGeetestChallenge);

                //String validate = Request.Form.Get(GeetestLib.fnGeetestValidate);

                //String seccode = Request.Form.Get(GeetestLib.fnGeetestSeccode);

                String challenge = geetest_challenge;

                String validate = geetest_validate;

                String seccode = geetest_seccode;

                if (gt_server_status_code == 1)

                {

                    result =

                        geetest.enhencedValidateRequest(challenge, validate, seccode, userID);

                }

                else {

                    result =

                        geetest.failbackValidateRequest(challenge, validate, seccode);

                }

                if (result == 1) {

                    // return Content("<div id='sb'><h1>success<h1></div>");

                    //Response.Write("<div id='sb'>success</div>");

                    return Json("登录成功");

                }

                else {

                    // return Content(" ");

                    //Response.Write(" ");

                    return Json("登录失败");

                }

            }

        }

  • 相关阅读:
    导出CSV乱码
    php让一个数组按照另外一个数组的键名进行排序
    电脑没有网
    Android抓包方法(转)
    封装curl的get和post请求
    JavaScript动态加载CSS和JS文件
    压缩视频之后网页上只有声音,没有图像
    php BCMath高精度计算
    非table结构数据导入excel
    如何将页面上的数据导入excel中
  • 原文地址:https://www.cnblogs.com/Tom-yi/p/6661755.html
Copyright © 2020-2023  润新知