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 alt="" 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 がなくても問題なく動作しています。誰でもこれを達成するのを手伝ってもらえますか?