Recaptcha 在 PostBack 期间消失

Question

我在这里看到了其他几篇关于将 Recaptcha 与 ASP.net UpdatePanels 一起使用的帖子，但还没有找到解决我问题的答案。

这是我的 ASPX 代码：

<asp:UpdatePanel ID="updRecaptcha" runat="server" UpdateMode="Always">
 <ContentTemplate>
  <recaptcha:RecaptchaControl ID="btnrecaptcha" runat="server" Theme="clean" PrivateKey"<%$ Resources: General, CaptchaPrivateKey %>" PublicKey="<%$ Resources: General, CaptchaPublicKey %>" />        
  <asp:Label ID="recaptchaerror" runat="server" style="color: Red;"/>
 </ContentTemplate>
</asp:UpdatePanel>

因此，Recaptcha 控件位于使用多个 .Net 验证控件（例如 RequiredFieldValidator）的用户控件中。在允许进程继续之前，我需要验证 Recaptcha 和 ASP.net 控件。

如果任何验证失败（Recaptcha 或 .Net），则 Recaptcha 控件将消失。查看 HTML 源代码，在回发之后控件根本没有加载 - 即使我告诉 UpdatePanel 进行更新。

我无法完全重新加载页面，因为这一切都显示为页面顶部的叠加层，并且后面的页面上还有其他表单字段。

请帮忙！

编辑：

当 Recaptcha 失败时，我从 C# 调用此代码：

ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "InvalidRecaptcha", "alert('Recaptcha Failed');Recaptcha.reload();alert('Recaptcha Reloaded');", true);

两个警报语句都会触发，但 Recaptcha 仍然没有加载。

Answer 1

你需要用javascript重新加载reCaptcha控件，试试这个：

protected void Button1_Click(object sender, EventArgs e)
{
     btnrecaptcha.Validate();
     if(IsValid && updRecaptcha.IsValid}
     {
          //Some logic here
     }
     ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "CaptchaReload", "Recaptcha.reload();", true);
}

Answer 2

忘记 ScriptManager。您所需要的只是页面中的这个脚本。相应地更改您的标识符：

<script type="text/javascript">
// RECAPTURE CODE FOR RELOADING AFTER INCORRECT ENTRY
if (typeof Sys != 'undefined') {
    var requestManager = Sys.WebForms.PageRequestManager.getInstance();
    requestManager.add_endRequest(function(sender, args) {

        $('<div id="recaptcha_widget_div"/>').appendTo('#recaptcha_widget_div2');

        if (typeof Recaptcha != 'undefined') {                                
            Recaptcha.create(recaptcha_key, "recaptcha_widget_div",
            {
                theme: "red",
                callback: Recaptcha.focus_response_field
            });
        }
    });
}

Answer 3

接受的解决方案对我不起作用。这是我尝试过并且正在工作的答案：

ASP.Net, disappearing Recaptcha, UpdatePanels and Partial PostBacks: Fixed once and for all

基本上它涉及创建一个隐藏的 div 并使用 jquery 重新呈现 html。此外，博客文章还对典型解决方案（例如，使用 RegisterClientScriptBlock 和简单的重新加载）以及它们失败的原因进行了很好的细分。

<div runat="server" id="pbTarget" visible="false"></div>  
<recaptcha:RecaptchaControl ID="recaptcha" runat="server" Theme="clean" />  

后面的代码：

protected void btnSubmit_Click(object sender, EventArgs e)  
{  
  recaptcha.Validate();  
  if (!Page.IsValid || !recaptcha.IsValid)  
  {  
    pbTarget.Visible = true;  
    ScriptManager.RegisterClientScriptBlock(  
      recaptcha,  
      recaptcha.GetType(),  
      "recaptcha",  
      "Recaptcha._init_options(RecaptchaOptions);"  
      + "if ( RecaptchaOptions && \"custom\" == RecaptchaOptions.theme )"  
      + "{"  
      + "  if ( RecaptchaOptions.custom_theme_widget )"  
      + "  {"  
      + "    Recaptcha.widget = Recaptcha.$(RecaptchaOptions.custom_theme_widget);"  
      + "    Recaptcha.challenge_callback();"  
      + "  }"  
      + "} else {"  
      + "  if ( Recaptcha.widget == null || !document.getElementById(\"recaptcha_widget_div\") )"  
      + "  {"  
      + "    jQuery(\"#" + pbTarget.ClientID + "\").html('<div id=\"recaptcha_widget_div\" style=\"display:none\"></div>');"  
      + "    Recaptcha.widget = Recaptcha.$(\"recaptcha_widget_div\");"  
      + "  }"  
      + "  Recaptcha.reload();"  
      + "  Recaptcha.challenge_callback();"  
      + "}",  
      true  
    );  

    return;  
  }  
  else  
  {  
    //normal page processing here...  

Answer 4

令人惊讶的是，我不需要应用 RegisterClientScriptBlock 调用来使其工作。 我只是使用：

UpdateMode="总是"

对于更新面板和我调用的服务器端：

updatePanel.Update();

这也可以防止验证码显示新的挑战。

Answer 5

我的回答与“用户”基本相同（that worked ！），但帮助任何使用 VB 的人。 我会在那里发表评论，但我有 zippo 代表...... （希望这不是太多的违规行为，并且它可以帮助某人）

我将这部分内容移植到了 VB.NET：

pbTarget.Visible = True
        Dim _sb As New StringBuilder
        With _sb
            .Append("Recaptcha._init_options(RecaptchaOptions);")
            .Append("if ( RecaptchaOptions && ""custom"" == RecaptchaOptions.theme )")
            .Append("{")
            .Append("  if ( RecaptchaOptions.custom_theme_widget )")
            .Append("  {")
            .Append("    Recaptcha.widget = Recaptcha.$(RecaptchaOptions.custom_theme_widget);")
            .Append("    Recaptcha.challenge_callback();")
            .Append("  }")
            .Append("} else {")
            .Append("  if ( Recaptcha.widget == null || !document.getElementById(""recaptcha_widget_div"") )")
            .Append("  {")
            .Append("    jQuery(""#")
            .Append(pbTarget.ClientID)
            .Append(""").html('<div id=""recaptcha_widget_div"" style=""display:none""></div>');")
            .Append("    Recaptcha.widget = Recaptcha.$(""recaptcha_widget_div"");")
            .Append("  }")
            .Append("  Recaptcha.reload();")
            .Append("  Recaptcha.challenge_callback();")
            .Append("}")
        End With
        ScriptManager.RegisterClientScriptBlock(recaptcha, recaptcha.[GetType](), "recaptcha", _sb.ToString, True)

Answer 6

如果您使用的是 Recaptcha 2.0，这是您的 Javascript

 <script type="text/javascript">
    function CaptchaReload() {
          Recaptcha.create("yourpublicKey", 'yourRecaptchadiv', {
          theme: 'white',
          callback: grecaptcha.reset()

        });
      }

这是你的recaptcha Div

<div class="g-recaptcha" data-sitekey="yourPublicKey"></div>

然后在回发事件结束时调用 Javascript

 protected void txtEmail_TextChanged(object sender, EventArgs e)
{
    if (txtEmail.Text != string.Empty)
    {
        ValidateEmail();
        ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);
    }
}

Answer 7

我能够使用 .NET 的 reCAPTCHA 库的 2.1.0.0 版以及网络表单、脚本管理器和更新面板使其工作。

首先，在更新面板外的 .aspx 页面中，我正在加载 Google reCAPTCHA 库：

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" 
            async defer></script>

其次，在更新面板内的 .aspx 页面中，我添加了一个 div，它将作为目标面板加载 reCAPTCHA：

<div runat="server" id="pbTarget" visible="false"></div>
<cc1:Recaptcha ID="recaptcha" runat="server" Theme="Clean" />

第三，在我的回发事件结束时的代码中，我注册了一个启动脚本来在我的目标面板中呈现 reCAPTCHA

Private Sub cmdSubmit_Click(sender As Object, e As EventArgs) Handles cmdSubmit.Click
    pbTarget.Visible = True
    ScriptManager.RegisterStartupScript(
        UpdatePanel1,
        UpdatePanel1.GetType(),
        "loadCaptcha",
        "grecaptcha.render('" & pbTarget.ClientID & "', {'sitekey': 'YourKey' });",
End Sub