1

我在将 google reCAPTCHA 添加到我的页面时遇到问题。在布局中，我添加了 Google Recaptcha js

_布局

     <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
        <script src='https://www.google.com/recaptcha/api.js'></script>
        <script type="text/javascript">
    <script type="text/javascript">

        $(document).ready(function () {

            $('#subject').on("change", function (e) {
                e.preventDefault();
                var selectedVal = $('#subject').val();
                $.ajax({
                    //  url: "/ContactUs/GetForm",
                    url: '@Url.Action("GetForm", "ContactUs")',
                    type: "POST",
                    data: { searchValue: selectedVal } ,
                    async: true,
                    success: function (data) {
                        $('#renderForms').empty();
                        $('#renderForms').append(data);

                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert("An error has occured!!! " + xhr.status + " && " + xhr.responseText);
                    }
                });
            });
 });

    </script>

然后在我的索引中选择要显示的表单：

@Html.DropDownListFor(model => model.contactSelectListItems, new List<SelectListItem>
            {
                                new SelectListItem() {Text = "option1", Value="option1"},
                                new SelectListItem() {Text = "option2", Value="option2"},
                                new SelectListItem() {Text = "option3", Value="option3"},

            }, "--Choose--", new { id = "subject", @class= "dropdown-item" })
    </div>
    <div id="renderForms">
    </div>

在两个部分页面中都有一个表单，我在其中做一些类似但不同的视图模型：

    @using (Html.BeginForm("SendCustomerTeam", "ContactUs", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>CustomerTeamViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="container">
    <div class="form-group form-group-sm col-sm-6">
                    <div class="row">

                        @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-sm-9">
                            @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
                <div class="form-group form-group-sm col-sm-12">
                    <div class="row">
                        @Html.LabelFor(model => model.Inquiry, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-sm-12">
                            @Html.EditorFor(model => model.Inquiry, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Inquiry, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>

                <div class="form-group form-group-sm col-sm-12">
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="NotRobot">
                                <label>Are you Human?</label>                                
                                <div id='recaptcha' class="col-sm-12 g-recaptcha" 
                                     data-sitekey="@System.Configuration.ConfigurationManager.AppSettings["RecaptchaPublicKey"]"
                                     >
                                </div>
                                <div id="recaptchaMessage" data-verifyrecaptchatokenurl="@Url.Action("VerifyReCaptchaToken", "Home")" style="display:none;padding:10px;color:red;font-weight:bold;" class="error">You need to verify reCAPTCHA.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group form-group-sm col-sm-6">
                    <div class="row">
                        <div class="col-sm-9">
                            <input id="Send" type="submit" value="Send" class="btn btn-default" />
                        </div>
                    </div>
                </div> etc...

在我的控制器中，我像这样处理它，我想将 reCAPTCHA 作为 ajax 调用处理，我还没有弄清楚如何做到这一点。

public ActionResult Index()
        {
            ViewData["ReCaptchaKey"] = System.Configuration.ConfigurationManager.AppSettings["RecaptchaPublicKey"];
//do something here
    }
    public static bool ReCaptchaPassed(string gRecaptchaResponse, string secret)
            {
                HttpClient httpClient = new HttpClient();
                var res = httpClient.GetAsync($"https://www.google.com/recaptcha/api/siteverify?secret={secret}&response={gRecaptchaResponse}").Result;
                if (res.StatusCode != HttpStatusCode.OK)
                {
                    //logger.LogError("Error while sending request to ReCaptcha");
                    return false;
                }

                string JSONres = res.Content.ReadAsStringAsync().Result;
                dynamic JSONdata = JObject.Parse(JSONres);
                if (JSONdata.success != "true")
                {
                    return false;
                }

                return true;
            }
    [HttpPost]
            public ActionResult SendCustomerTeam(CustomerTeamViewModel model)
            {
                ContactViewModel contactModel = new ContactViewModel();
                contactModel.CustomerTeamModel = model;
                ViewData["ReCaptchaKey"] = System.Configuration.ConfigurationManager.AppSettings["RecaptchaPublicKey"];

                if (ModelState.IsValid)
                {
                    if (!ReCaptchaPassed(
                        Request.Form["g-recaptcha-response"], // that's how you get it from the Request object
                        System.Configuration.ConfigurationManager.AppSettings["RecaptchaPrivateKey"]
                        ))
                    {
                        ModelState.AddModelError(string.Empty, "You failed the CAPTCHA, stupid robot. Go play some 1x1 on SFs instead.");
                        return View(contactModel);
                    }
                }

我的问题是 reCAPTCHA 从未出现在我的页面上。

编辑：

我尝试了以下简化，看看是否能找到问题。

简单页面视图模型

  public class simplePageViewModel
    {
        public string Name { get; set; }
    }

SimplePagePartialView

    @model Contact_Portal.Models.simplePageViewModel

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>simplePageViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="container">
            <div class="row">
                <div class="form-group form-group-sm col-sm-6">
                    <div class="row">
                        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-sm-9">
                            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
                <div class="form-group form-group-sm col-sm-12">
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="NotRobot">
                                <label>Are you Human?</label>
                                <div id='recaptcha' class="col-sm-12 g-recaptcha" style="padding:10px;"
                                     data-sitekey="@System.Configuration.ConfigurationManager.AppSettings["RecaptchaPublicKey"]">
                                </div>
                                <div id="recaptchaMessage" data-verifyrecaptchatokenurl="@Url.Action("VerifyReCaptchaToken", "Home")" style="display:none;padding:10px;color:red;font-weight:bold;" class="error">You need to verify reCAPTCHA.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Save" class="btn btn-default" />
                    </div>
                </div>
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

在控制器中，我得到了通过这条线显示的部分视图

return PartialView("View", contactModel.simplePageModel);

同样的问题仍然存在。

可能是因为我将包含 reCAPTCHA 的部分页面显示为 Jquery Ajax 调用的一部分吗？像这样：

  $(document).ready(function () {

        $('#subject').on("change", function (e) {
            e.preventDefault();
            var selectedVal = $('#subject').val();
            $.ajax({
                //  url: "/ContactUs/GetForm",
                url: '@Url.Action("GetForm", "ContactUs")',
                type: "POST",
                data: { searchValue: selectedVal } ,
                async: true,
                success: function (data) {
                    $('#renderForms').empty();
                    $('#renderForms').append(data);

                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("An error has occured!!! " + xhr.status + " && " + xhr.responseText);
                }
            });
        });

我现在尝试了一个全新的项目，我将它一直简化为一个 html 文件：

索引.cshtml

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        <div id='recaptcha' class="col-sm-12 g-recaptcha" style="padding:10px;"
             data-sitekey="@System.Configuration.ConfigurationManager.AppSettings["RecaptchaPublicKey"]"></div>
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

它仍然不可见，它永远不会出现。为什么它不工作？谷歌的 Recaptcha 是否不支持 ASP.NET MVC？

4

2 回答 2

2

您的脚本 src 错误：

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

至

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

如果有任何错误，您还可以检查开发者控制台吗？

于 2018-06-13T12:05:21.693 回答
0

好吧，我找到了一个我不满意的解决方案，但它确实有效。

在我的布局文件中，我做了一个这样的部分：

 <script src="https://www.google.com/recaptcha/api.js" async defer></script>
 <script type="text/javascript">
     function enableBtn() {
                document.getElementById("subject").disabled = false;
            }
     $(document).ready(function () {
         document.getElementById("subject").disabled = true;
      });

    </script>

然后在我看来我创建了这个

<div class="g-recaptcha" data-sitekey="*********PublicKEY*************" data-callback="enableBtn"></div>

它似乎正在工作。

我希望我可以让它在部分视图中工作，因为现在我必须拥有它，无论会发生什么，而不仅仅是提交。

我不知道我是否可以再验证这一服务器端，因为它也在我的表单之外。? 任何有更好选择的人都会受到欢迎。

编辑：

我为我找到了更好的解决方案。我像这样改变了我的ajax调用：

 $('#subject').on("change", function (e) {
                e.preventDefault();
                var selectedVal = $('#subject').val();
                $.ajax({
                    //  url: "/ContactUs/GetForm",
                    url: '@Url.Action("GetForm", "ContactUs")',
                    type: "POST",
                    data: { searchValue: selectedVal } ,
                    async: true,
                    success: function (data) {
                        $('#renderForms').empty();
                        $('#renderForms').append(data);

                        if (!debug) {
                            document.getElementById("Send").disabled = true;
                            grecaptcha.render('Captcha', {
                                'sitekey': '**********PublicKey*********',
                                'callback': function() {
                                    document.getElementById("Send").disabled = false;
                                },
                                'expired-callback': function() {
                                    //document.getElementById("subject").selectedIndex = 0;
                                    document.getElementById("Send").disabled = true;
                                    //document.getElementById("renderForms").innerHTML = "";
                                }


                            });

                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert("An error has occured!!! " + xhr.status + " && " + xhr.responseText);
                    }
                });
            });

现在它正在按我的预期工作。至少在用户界面部分。

于 2018-06-14T09:07:53.080 回答