reCaptcha with SmartClient

gauravd · March 19, 2010, 3:10pm

Hi All,

Anyone have any experience of using reCaptcha (http://recaptcha.net/) with SmartClient. Issue I am facing is that reCaptcha returns the iFrame code with one normal HTML textarea and input form fileds (below is the code which recaptcha returns.

<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=some public key"></script>

	<noscript>
  		<iframe src="http://api.recaptcha.net/noscript?k=some public key" height="300" width="500" frameborder="0"></iframe><br/>
  		<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  		<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
	</noscript>

How can we show the recaptcha in DynamicForm of SmartClient?
Please guide.

Gaurav

gauravd · March 20, 2010, 7:31pm

Please let me know how to integrate reCaptcha or any other popular Captcha with smartclient

Please help.

Gaurav

gauravd · March 21, 2010, 7:46pm

Hi guys,

I am observing that many people are reading my question but no one is responding. Guys please help, if someone know the solution.

I hope my below code will help you understand my problem more precisely.

My Javascript Code:

isc.DynamicForm.create({
    height:200,
    ID:"test_UserRegisteration_DynamicForm",
	saveOperationType:"add",
	autoFocus:true,
    fields:[
	    {
			title:"First Name<font color=\"red\">*</font>" ,
			ID:"lip_UserRegisteration_FirstName_TextBox", 
			name:"lip_ur_first_name",
			itemHoverHTML : function () {
				return "It should not be more than 20 characters and it should only be aplhabets";
			},
			type:"text"
		},
	    {
			title:"E-Mail ID<font color=\"red\">*</font>",
			ID:"lip_UserRegisteration_Username_TextBox", 
			name:"lip_ur_username",
			itemHoverHTML : function () {
				return "This e-mail id will be treated as Username for login";
			},
			type:"text"
		},
	    {
			title:"Password<font color=\"red\">*</font>",
			ID:"lip_UserRegisteration_Password_TextBox", 
			name:"lip_ur_password",
			itemHoverHTML : function () {
				return "Password should be atleast six character";
			},
			type:"password"
		},
	    {
			title:"reCaptcha",
			ID:"lip_ReCaptcha_TextArea", 
			name:"lip_reCaptcha",
			type:"StaticTextItem"
		},
		{
			title:"Register",
			ID:"lip_UserRegisteration_Register_Button", 
			name:"lip_ur_register_button",
			type:"button",
			colSpan:2,
			align:"center"
		}
	],
    width:"100%"
})


isc.VLayout.create({
    members:[
		test_UserRegisteration_DynamicForm
    ],
    showDragPlaceHolder:false,
    height:"100%",
    ID:"lip_UserRegisteration_TabPane",
    width:"100%",
	layoutMargin: 25,
    overflow:"auto"
})



Recaptcha.create("6Lew7QsAAAAAAET8Vd7mBVYw-p_RzlY6n_Q3G00p", test_UserRegisteration_DynamicForm.getField("lip_reCaptcha"), {
    theme: "red",
    callback: Recaptcha.focus_response_field
});

In my above smartclient code, I am using one Recaptcha.create function, in which I need to pass-on the form element where I want to show my captcha. As expected, I am passing the field of my DynamicForm where I want to show captcha, but still captcha is not shown.

If I create HTML form in place of native SmartClient Dynamic Form and pass the div tag (defined in form) to Recaptcha.create, I am able to see captcha successfully.

As far as I understand , most probably the issue is that either I am not able to pass the element of DynamicFrom successfully or the type of this element is not matching what Recaptcha returns.

Is someone working how to integrate ReCaptcha with SmartClient. I think it would be very imp for many users. Currently all the major AJAX frameworks have a mechanism to integrate ReCaptcha (one of the most popular captcha). Below are the links to brief tutorials about Recaptcha with AJAX, kindly have a look:
http://recaptcha.net/apidocs/captcha/client.html

Example (Demo) - have a look at the page source to know how its done.
http://recaptcha.net/fastcgi/demo/ajax

If someone have any idea, please share. Its really imp for me.

Regards,
Gaurav

gauravd · March 22, 2010, 7:51am

Hi,

I found the solution, but not in SmartClient. Below kink explains how we can add reCaptcha in EXTJS.
http://www.extjs.com/forum/showthread.php?t=34796

Something similar need to be done in SmartClient too. Here what they have done is that they defined a new type of form field, named as ‘recaptcha’, which actually creates a ‘div’ element and then pass on that div element to Recaptcha.create() function. This function shows the captcha in ‘div’ element.

In EXTJS Form they created one form field of this new type ‘recaptcha’ to show captcha there.

Can some one let me know how to achieve similar thing in SmartClient?
How can we extend or create a new type of DynamicForm field. I hope that reCaptcha can be shown in SmartClient DynamicForm, if we define a new type of DynamicForm filed which created ‘div’.

Can someone let me know how to do it. I will appreciate any on help on this.

Regards,
Gaurav

davidj6 · March 23, 2010, 1:36pm

Take a look at the SimpleLabel example in your SC distribution: /examples/custom_components/SimpleLabel/SimpleLabel.js. This should be a good starting point for a simple div-based component.

gauravd · March 25, 2010, 8:11pm

wow … at last someone replied to my post
David, thanks for posting your suggestion, but I think your suggestion is good to create a custom component. I am not looking to create custom component as that is not going to solve my problem.

I want to create the custom data type for data bound component’s fields. By default SC defines many types like “text”, “textarea”, “image”, “boolean” etc. I want to create a custom data type whose innerHTML should be just one defined <div> HTML tag.

For instance, lets say I defined ‘recaptcha’ type [currently do not know how to define it].

Now I just want to use this custom type in my DynamicForm or ListGrid as below:

isc.DynamicForm.create({
    height:"100%",
    ID:"test_UserRegisteration_DynamicForm",
	saveOperationType:"add",
	autoFocus:true,
    fields:[
	    {
			title:"First Name<font color=\"red\">*</font>" ,
			ID:"lip_UserRegisteration_FirstName_TextBox", 
			name:"lip_ur_first_name",
			itemHoverHTML : function () {
				return "It should not be more than 20 characters and it should only be aplhabets";
			},
			type:"text"
		},
	    {
			title:"ReCaptcha" ,
			ID:"lip_Recaptcha", 
			name:"lip_recaptcha_area",
			type:"recaptcha"
		},
          ]
})

Please have a look at EXTJS, how they define a new type
http://www.extjs.com/forum/showthread.php?t=34796

Is there something similar in SC also?
Please help. I have been trying to find out the solution for last 7 to 8 days, but still not able to get the exact solution.

davidj6 · March 25, 2010, 9:25pm

I still think a new component is what you need. Then you can just define the form field editorType to be your component and it will render your <div>. To my knowledge there is no way to add a new “type” as you are describing. But you can provide any editor (or think of it as a renderer in your case) for a form field.

So you should have something like:

isc.defineClass("Recaptcha",Canvas);

Recaptcha.addProperties({

    getInnerHTML : function () {
        return "<div ID=" + this.getID() + "></div>";
    },

    init : function() {
        this.Super("init", arguments);

        Recaptcha.create(
            this.publickey,
            this.getID(),
            {
                theme: this.theme,
                lang: this.lang,
                callback: Recaptcha.focus_response_field
             });
    }

});

isc.DynamicForm.create({
    height:"100%",
    ID:"test_UserRegisteration_DynamicForm",
	saveOperationType:"add",
	autoFocus:true,
    fields:[
	    {
			title:"First Name<font color=\"red\">*</font>" ,
			ID:"lip_UserRegisteration_FirstName_TextBox", 
			name:"lip_ur_first_name",
			itemHoverHTML : function () {
				return "It should not be more than 20 characters and it should only be aplhabets";
			},
			type:"text"
		},
	    {
			title:"ReCaptcha" ,
			ID:"lip_Recaptcha",
			name:"lip_recaptcha_area",
			editorType:"Recaptcha",
                        theme: "white",
                        lang: "en",
                        publickey: '6LcLzAEAAAAAAIaTeQnKjOKF-InrzAVQXFOErXhg'
		},
          ]
})

WARNING: I have not used Recaptcha nor tested the above code. This example is off the top of my head…

gauravd · March 28, 2010, 8:56pm

Hi David

Thanks for your response and code. I tried your code, but unfortunately it did not work, but at least I got an idea.

I think defining any other component will not work as any component can not b used as a field type. I think, for field type component need to be a sub class of FormItem class.

I tried below code and got success to some extent, but still there is some issue (keep reading to know it).

<SCRIPT>
ClassFactory.defineClass("RecaptchaCanvas",Canvas);

RecaptchaCanvas.addProperties({
    getInnerHTML : function () {
			Recaptcha.create("6Lew7QsAAAAAAET8Vd7mBVYw-p_RzlY6n_Q3G00p", this, {
				theme: "red",
				lang: "en",
				callback: Recaptcha.focus_response_field
			});
			alert("test - " + this.innerHTML);
			alert("next - " + this.innerHTML);
			return this.innerHTML;
    }
});


ClassFactory.defineClass("RecaptchaItem",CanvasItem);

RecaptchaItem.addProperties({
	canvasConstructor : "RecaptchaCanvas"
});


isc.DynamicForm.create({
    height:"100%",
    width:"100%",
    ID:"test_UserRegisteration_DynamicForm",
    fields:[
	    {
			title:"First Name<font color=\"red\">*</font>" ,
			ID:"lip_UserRegisteration_FirstName_TextBox", 
			name:"lip_ur_first_name",
			type:"text"
		},
	    {
			title:"ReCaptcha" ,
			ID:"lip_Recaptcha",
			name:"lip_recaptcha_area",
			type:"RecaptchaItem"
		},
		{
			title:"Register",
			ID:"lip_UserRegisteration_Register_Button", 
			name:"lip_ur_register_button",
			type:"button",
			colSpan:2,
			align:"center"
		}
	]
})


isc.VLayout.create({
    members:[
		test_UserRegisteration_DynamicForms
    ],
    height:"100%",
    ID:"test_UserRegisteration_TabPane",
    width:"100%",
	layoutMargin: 25,
    overflow:"auto"
})
</SCRIPT>

Issue still facing:

If I remove the alert() calls from getInnerHTML() function of RecaptchaCanvas [which anyhow I need to remove], the reCaptcha is not shown. This is because, I think Recaptcha.create() call is asynchronous. Till the time Recaptcha.create() call talks to Recaptcha server to update the innerHTML of given component, out getInnerHTML() function returns, hence the given component’s HTML is not updated.

Try the above code with and with out alert() calls, you will see the difference.

To overcome this issue, i need something like sleep() call in getInnerHTML() function. How can we do that in javascript, any one have any idea??

Gaurav

davidj6 · March 29, 2010, 1:35pm

You don’t want to try to make the getInnerHTML synchronous - it won’t work. You have to work with the async style of recaptcha. Here is a working example (at least as far as showing the recaptcha):

isc.ClassFactory.defineClass("RecaptchaItem",CanvasItem);

RecaptchaItem.addProperties({
    canvasDefaults: {
        getRecaptchaDivID : function () {
            return this.getID() + "_recaptcha";
        },
        getInnerHTML : function () {
            return "<div ID='" + this.getRecaptchaDivID() + "'></div>";
        },

        draw : function () {
            this.Super("draw", arguments);
            if (!this._enabledRecaptcha) {
                Recaptcha.create(
                    this.publickey,
                    this.getRecaptchaDivID(),
                    {
                        theme: this.theme,
                        lang: this.lang,
                        callback: Recaptcha.focus_response_field
                     });
                this._enabledRecaptcha = true;
            }
        }
    },
    init : function() {
        this.canvasDefaults.publickey = this.publickey;
        this.canvasDefaults.theme = this.theme;
        this.canvasDefaults.lang = this.lang;
        this.Super("init", arguments);
    }
});

DynamicForm.create({
        items:[
        {type:"RecaptchaItem", name:"recaptchaItem", showTitle:false,
             publickey: "6Lew7QsAAAAAAET8Vd7mBVYw-p_RzlY6n_Q3G00p",
             theme: "red",
             lang: "en"
        }
    ]
});

Good luck!

gauravd · March 31, 2010, 7:24pm

Thanks David !!
You rock … I tried your code and it works fine for me too. You have been a great help to me. I was trying to integrate reCaptcha in SmartClient since last 10 days, finally with your help I am able to do it.

I hope this thread will also be usefull to many others who would like to use reCaptcha with SmartClient.

Although I am able to show reCaptcha, but now I am facing bit of diff problem. I can not show more than one reCaptcha on single page. For instance, lets say I have to tabs, both having input DynamicForms with reCaptchaItems. In this case only the form that I see at last will shown the reCaptcha all others will not show. This is not an issue of SmartClient, its something related with Recaptcha itself. You know we create Recaptcha using Recaptcha API Recaptcha.create(), which actually updated the innerHTML of given page element. It sets the innerHTML to div with id “recaptcha_area”. Being the id of return <div> code by Recaptcha.create() call is an issue. Do you have some idea how we can handle such situation to show two or more reCaptchas on same page.

Anyway, thanks for your earlier help.

davidj6 · April 1, 2010, 11:48am

The one-per-page limitation is built into reCaptcha. Each call to create() destroys any previous instance automatically so the only way to handle this is to hide/show the reCaptcha field showing only the one you want.