Refresh reCaptcha when the code is wrong

Question

I have a page which contains Login and CreateUserWizard in UpdatePanel. I am using reCaptcha in Login control. Due to UpdatePanel, I had used the following script in code behind.

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
            );
        }

And my aspx looks like

  <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>

And the reason for using this in isPostBack is, whenever page load occurs while using CreateUserWizard or Login control, reCaptcha get disappeared.

My requirement is, whenever user entered wrong code, reCaptcha should automatically refresh and the code should be changed. Without UpdatePanel, it is working fine. Can anyone please help me to acheive this?

Answer 1

I had solved this issue by adding the following code on LoginButton_Click event, where I validate reCaptcha. If the verification code is wrong,

 ScriptManager.RegisterStartupScript(this, GetType(), "captcha", "Recaptcha.switch_type('image')", true);

Thats it. The captcha will change the image whenever user entered wrong code and submit it.