Блог

Я хотел бы использовать 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 в такой форме?

Спасибо тебе, Софи

Вам нужно создать пользовательский элемент управления полем. Для веб-форм вы можете начать здесь: 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}amp;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);