使用没有表单和按钮的recaptcha v3答案

【问题标题】：Use recaptcha v3 without form and button使用没有表单和按钮的recaptcha v3
【发布时间】：2020-09-14 16:59:09
【问题描述】：

我想在我们的表单上使用 recaptcha，但我们的表单是特定的，因为它们是由我们的 CMS Sitefinity 制作的。他们没有<form> 也没有<button>。它的结构是这样的：

<div class="sfFormsEditor sfTopLbls ">

    [...]
    
    <div class="g-recaptcha" data-sitekey="Site key"></div>
    <div class="sfFormSubmit sfSubmitBtnMedium">
            <input type="submit" value="Envoyer la demande" data-sitekey="Site key" data-callback="onSubmit" data-action="submit">
    </div>
</div>

我尝试使用这个脚本：

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

<script>
  
  $(".sfFormSubmit input").attr('data-sitekey','Site key'); 
  $(".sfFormSubmit input").attr('data-callback','onSubmit'); 
  $(".sfFormSubmit input").attr('data-action','submit');
  
  $(document).ready(function(){
  
    $(".sfFormSubmit input").on('click',function(){
          e.preventDefault();
          grecaptcha.execute('Site key', {action: 'submit'});
    });
    
  });
  
</script>

验证码是可见的，但是当填写表单而不点击验证码时，会提交表单。有没有办法在这样的表格上使用recaptcha？

谢谢最好的苏菲

【问题讨论】：

页面上肯定有表格。这是 Web 表单还是 mvc 站点？
感谢您的回复。这是网络表单

标签： recaptcha

【解决方案1】：

您需要构建一个自定义字段控件。对于网络表单，您可以从这里开始： https://www.progress.com/documentation/sitefinity-cms/tutorial-build-a-custom-field-control-webforms-

它可能看起来像这样：

ReCaptcha.ascx

<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" %>

<% if ( !Request.RawUrl.ToLower().Contains("/sitefinity/content/forms/entries/") ) { %>

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

<asp:Label runat="server" ID="titleLabel" CssClass="sfTxtLbl" Text="Captcha" AssociatedControlID="TextBox1" Visible="false" />
<div class="sfFieldWrp" style="display: none;">
    <asp:TextBox ID="TextBox1" CssClass="sfTxt" runat="server" Text="OK" />
    <sf:SitefinityLabel runat="server" ID="descriptionLabel" WrapperTagName="div" CssClass="sfDescription" />
    <sf:SitefinityLabel runat="server" ID="exampleLabel" WrapperTagName="div" CssClass="sfExample" />
</div>

<div class="col-xs-12 col-sm-12 col-md-12">
    <div class="g-recaptcha" data-sitekey="__YourReCaptchaSiteKey___"></div>
</div>

<% } %>

ReCaptcha.cs

// 不包括完整的代码，因为大部分是自动生成的，但这里是 // 最重要的方法：

public override bool IsValid()
{
     // check the captcha with google
     var encodedResponse = HttpContext.Current.Request.Form["g-Recaptcha-Response"];

     var isCaptchaValid = ReCaptchaModel.Validate(encodedResponse);

     return isCaptchaValid;
}

ReCaptchaModel.cs

public class ReCaptchaModel
{
    public bool Success { get; set; }
    public List<string> ErrorCodes { get; set; }

    public static bool Validate(string encodedResponse)
    {
        if (string.IsNullOrEmpty(encodedResponse)) return false;

        var client = new WebClient();

        var secret = __YourReCaptchaSecretKey__ ;

        if (string.IsNullOrEmpty(secret)) return false;

        var googleReply = client.DownloadString(string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secret, encodedResponse));

        var serializer = new JavaScriptSerializer();

        var reCaptcha = serializer.Deserialize<ReCaptcha>(googleReply);

        return reCaptcha.Success;
    }
}

ReCaptcha.js

Type.registerNamespace("SitefinityWebApp.CustomControls.FormControls.CustomFormWidgets.ReCaptcha");

SitefinityWebApp.CustomControls.FormControls.CustomFormWidgets.ReCaptcha.ReCaptcha = function (element) {
    this._textbox = null;
    this._dataFieldName = null;
    SitefinityWebApp.CustomControls.FormControls.CustomFormWidgets.ReCaptcha.ReCaptcha.initializeBase(this, [element]);
}

SitefinityWebApp.CustomControls.FormControls.CustomFormWidgets.ReCaptcha.ReCaptcha.prototype = {
    /* --------------------------------- set up and tear down ---------------------------- */

    /* --------------------------------- public methods ---------------------------------- */

    // Gets the value of the field control.
    get_value: function () {
        return jQuery(this._textbox).val();
    },

    // Sets the value of the text field control depending on DisplayMode.
    set_value: function (value) {
        jQuery(this._textbox).val(value);
    },

    /* --------------------------------- event handlers ---------------------------------- */

    /* --------------------------------- private methods --------------------------------- */

    /* --------------------------------- properties -------------------------------------- */

    get_textbox: function () {
        return this._textbox;
    },

    set_textbox: function (value) {
        this._textbox = value;
    },

    get_dataFieldName: function () {
        return this._dataFieldName;
    },

    set_dataFieldName: function (value) {
        this._dataFieldName = value;
    }
}

SitefinityWebApp.CustomControls.FormControls.CustomFormWidgets.ReCaptcha.ReCaptcha.registerClass('SitefinityWebApp.CustomControls.FormControls.CustomFormWidgets.ReCaptcha.ReCaptcha', Telerik.Sitefinity.Web.UI.Fields.FieldControl);

【讨论】：