代码错误时刷新reCaptcha
Posted
技术标签:
【中文标题】代码错误时刷新reCaptcha【英文标题】：Refresh reCaptcha when the code is wrong 【发布时间】：2013-10-17 06:55:27 【问题描述】：我在 UpdatePanel 中有一个包含 Login 和 CreateUserWizard 的页面。 我在登录控件中使用 reCaptcha。由于 UpdatePanel，我在后面的代码中使用了以下脚本。
if (Page.IsPostBack)
htmlGenericControl divRecaptcha = (HtmlGenericControl)Login1.FindControl("divCap");
Recaptcha.RecaptchaControl recaptcha = (Recaptcha.RecaptchaControl)Login1.FindControl("recaptcha");
divRecaptcha.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(\"#" + divRecaptcha.ClientID + "\").html('<div id=\"recaptcha_widget_div\" style=\"display:none\"></div>');"
+ " Recaptcha.widget = Recaptcha.$(\"recaptcha_widget_div\");"
+ " "
+ " Recaptcha.reload();"
+ " Recaptcha.challenge_callback();"
+ "",
true
);
我的 aspx 看起来像
<asp:UpdatePanel ID="upLogin" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<fieldset id="login" class="group top-margin">
<legend>Login</legend>
<div class="background">
<asp:Login ID="Login1" runat="server" DisplayRememberMe="False" PasswordRecoveryText=" Forgot Password?"
PasswordRecoveryIconUrl="~/Images/forgotpassword.gif" OnLoggedIn="Login1_Authenticate">
<LayoutTemplate>
<div class="element control-group">
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName" CssClass="label control-label">User Name:</asp:Label>
<div class="controls">
<asp:TextBox ID="UserName" runat="server" CssClass="field input input-large"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName"
ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</div>
</div>
<div class="element control-group">
<asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" CssClass="label control-label">Password:</asp:Label>
<div class="controls">
<asp:TextBox ID="Password" runat="server" TextMode="Password" CssClass="field input input-large"></asp:TextBox>
<asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password"
ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</div>
</div>
<div runat="server" id="divCap" visible="false">
</div>
<div class="captcha-div">
<div class="element control-group verification">
<asp:Label ID="lblVerifyCode" runat="server" CssClass="label control-label">Verify Code:</asp:Label>
</div>
<div class="captcha-control">
<%--Custom Recaptcha Start--%>
<div class="captcha-wrapper" id="captcha-wrapper" style="display: none">
<div class="rah-links">
<a href="javascript:Recaptcha.switch_type('image')" id="captcha-refresh">Refresh</a>
<a href="javascript:Recaptcha.switch_type('audio')" id="captcha-audio">Audio</a>
<a href="javascript:Recaptcha.showhelp()" id="captcha-help">Help</a>
</div>
<div id="recaptcha_image">
</div>
<input type="text" class="captcha" placeholder="Enter Code (No spaces)" id="recaptcha_response_field"
name="recaptcha_response_field">
<div class="note">
Can’t read the code? Just hit Refresh.</div>
</div>
<span class="recaptcha_only_if_incorrect_sol error" id="uiErrorRecaptcha" runat="server"
visible="false">Incorrect Captcha, please try again</span>
<recaptcha:recaptchacontrol customthemewidget="captcha-wrapper" theme="custom" id="recaptcha"
runat="server" publickey='<%$appSettings:RecaptchaPublicKey %>' privatekey='<%$appSettings:RecaptchaPrivateKey %>' />
<asp:Label ID="lblCaptcha" runat="server" CssClass="error" ForeColor="Red"></asp:Label>
</div>
</div>
<div class="element control-group">
<div style="color: Red;">
<asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
</div>
</div>
<div class="element control-group">
<asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1"
OnClick="LoginButton_Click" CssClass="btn login-btn-new" />
</div>
<div class="element control-group forgot-pwd-btn">
<asp:HyperLink ID="PasswordRecoveryLink" runat="server" CssClass="btn"> Forgot Password?</asp:HyperLink>
</div>
</LayoutTemplate>
</asp:Login>
</div>
<div align="center">
<p>
<img src="Images/lock.gif" />
Unauthorized Access Prohibited
</p>
</div>
</fieldset>
<fieldset id="register" class="group top-margin" runat="server">
<legend>Create an Account</legend>
<asp:Label ID="lblError" runat="server" ForeColor="Red" Text="Label" Visible="False"
CssClass="error"></asp:Label>
<asp:CreateUserWizard ID="CreateUserWizard1" runat="server">
<WizardSteps>
<asp:CreateUserWizardStep ID="step1" runat="server">
<ContentTemplate>
. . .
</ContentTemplate>
</asp:CreateUserWizardStep>
<asp:CompleteWizardStep ID="complete" runat="server">
<ContentTemplate>
<div class="acct-success">
. . .
</div>
</ContentTemplate>
</asp:CompleteWizardStep>
</WizardSteps>
</asp:CreateUserWizard>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
在 isPostBack 中使用它的原因是，每当在使用 CreateUserWizard 或 Login 控件时发生页面加载时，reCaptcha 就会消失。
我的要求是，每当用户输入错误的代码时，reCaptcha 应自动刷新并更改代码。没有 UpdatePanel，它工作正常。谁能帮我实现这个目标？
【问题讨论】：
【参考方案1】：我通过在 LoginButton_Click 事件中添加以下代码解决了这个问题，我在其中验证了 reCaptcha。如果验证码错误，
ScriptManager.RegisterStartupScript(this, GetType(), "captcha", "Recaptcha.switch_type('image')", true);
就是这样。每当用户输入错误的代码并提交时，验证码都会更改图像。
【讨论】：
以上是关于代码错误时刷新reCaptcha的主要内容，如果未能解决你的问题，请参考以下文章