توضیحات و دانلود

پیاده سازی Recaptcha Google با کد و مثال در ASP.Net MVC
0 0
پیاده سازی Recaptcha Google با کد و مثال در ASP.Net MVC

با سلام در این مقاله با مثال توضیح خواهیم داد که چگونه Recaptcha Google را در ASP.Net MVC Razor اجرا کنیم
نسخه 2.0 گوگل RECaptcha اجازه می دهد تا با استفاده از عملکردهای فراخوانی خود، پاسخ کپچا را در client side تأیید کند.
این مقاله همچنین اعتبار Google RECaptcha نسخه 2.0 در client side با استفاده از جاوا اسکریپت و جی کوئری در ASP.Net MVC Razor را توضیح میدهد.
فضاهای نام
شما باید فضای نامی را وارد کنید.

using System.Net;

Model
کلاس Model زیر شامل سه ویژگی است. ویژگی های کلیدی و مخفی، کلید و راز RECAPTCHA Google را حفظ خواهد کرد در حالی که ویژگی Response برای ذخیره سازی پاسخ بازگشت شده از API RECAPTCHA Google استفاده می شود .

public class RECaptcha
{
    public string Key = "<RECaptcha Site Key>";
 
    public string Secret = "<RECaptcha Secret Key>";
    public string Response { get; set; }
}

Controller
Controller متشکل از دو روش است :
روش دست زدن به عملیات GET
در داخل این روش  کلاس RECaptcha درModel شیء به View باز می گردد.
روش  اداره جی کوئری AJAX
این روش اکشن ارتباط ساخته شده عملکرد AJAX جی کوئری را از View انجام می دهد.
توجه :

روش زیر اقدام به ارتباط AJAX می کند و از این رو نوع بازگشت به JsonResult تنظیم می شود .
پاسخ کپچا یعنی ورودی کاربر دریافت شده از View به API گوگل RECaptcha فرستاده می شود و سپس نتیجه در ویژگی Response از کلاس RECaptcha ذخیره می شود و در نهایت شی کلاس  RECaptcha به عنوان JSON به نمایش بازگشت داده می شود .

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View((new RECaptcha()));
    }
 
    [HttpPost]
    public JsonResult AjaxMethod(string response)
    {
        RECaptcha recaptcha = new RECaptcha();
        string url = "https://www.google.com/recaptcha/api/siteverify?secret=" + recaptcha.Secret + "&response=" + response;
        recaptcha.Response = (new WebClient()).DownloadString(url);
        return Json(recaptcha);
    }
}

View
در داخل View ، در خط اول، کلاس Model RECaptcha به عنوان Model برای View اعلام شده است. View شامل یک HTML DIV، یک عنصر HTML HiddenField و یک دکمه است. کلید دکمه یک رویداد کلیک روی جی کوئری تعیین شده است و هنگامی که دکمه کلیک می شود، RECaptcha گوگل تایید خواهد شد.
در داخل پردازنده رویداد OnLoadCallBack از API RECAPTCHA گوگل، RECaptcha در صفحه با استفاده از تابع رندر که ID شناسه DIV را دریافت می کند (که در آن RECAPTCHA رندر می شود)، کلید سایت Recaptcha Google و رویداد Handler فراخوانی می شود .
رویداد فراخوانی زمانی شروع می شود که کاربر به درستی به Captcha پاسخ دهد. پردازنده رویداد فراخوانی پاسخ Captcha (که یک مقدار رشته کد شده است) را می پذیرد.
مقدار پاسخ Captcha به روش  AjaxMethod (که قبلا مورد بحث قرار گرفته است) ارسال می شود و پس از آن شی JSON را که حاصل از API Recaptcha Google است، بازمیگرداند .
نتیجه برگشتی در عنصر HiddenField ذخیره می شود و پیام خطای Validation پنهان می شود در صورتی که نتیجه موفقیت باشد یعنی Captcha به درستی پاسخ داده شده است.
رویداد Button Click اطمینان حاصل می کند که هنگامی که دکمه کلیک می شود،نتیجه HiddenField باید موفق باشد. کاربر دیگر با نمایش پیام خطا به RECAPTCHA Google پاسخ میدهد.

@model RECaptcha_MVC.Models.RECaptcha
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
 
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <div id="dvCaptcha">
    </div>
    <input type="hidden" id="hfCaptcha"/>
    <span id="rfvCaptcha" class="error" style="display:none">Captcha validation is required.</span>
    <br/>
    <input type="button" id="btnSubmit" value="Submit"/>
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
            asyncdefer></script>
    <script type="text/javascript">
        var onloadCallback = function () {
            grecaptcha.render('dvCaptcha', {
                'sitekey': '@Model.Key',
                'callback': function (response) {
                    $.ajax({
                        type: "POST",
                        url: "/Home/AjaxMethod",
                        data: "{response: '" + response + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            var captchaResponse = jQuery.parseJSON(r.Response);
                            if (captchaResponse.success) {
                                $("#hfCaptcha").val(captchaResponse.success);
                                $("#rfvCaptcha").hide();
                            } else {
                                $("#hfCaptcha").val("");
                                $("#rfvCaptcha").show();
                                var error = captchaResponse["error-codes"][0];
                                $("#rfvCaptcha").html("RECaptcha error. " + error);
                            }
                        }
                    });
                }
            });
        };
        $(function () {
            $("#btnSubmit").click(function () {
                $("#rfvCaptcha").hide();
                if ($("#hfCaptcha").val() == "") {
                    $("#rfvCaptcha").show();
                }
            });
        });
    </script>
</body>
</html>

عکسها
Google RECaptcha در ASP.Net اجرا می شود

 

پیغام خطا RequiredFieldValidator زمانی که Captcha پاسخ داده نمی شود

پیام خطای Google RECaptcha نشان داده شده در پاسخ نادرست است

Google Recaptcha به درستی پاسخ داد

پیام خطا نشان داده شده است. گوگل RECaptcha SiteVerify API وضعیت موفقیت False است

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :