After password strength meter widget, I am asked to give a Captcha verify widget too. Well, it is not so difficult, below is a ReCaptcha widget for Ext JS 4.x. On
ExtJS 2.x forum, there are detailed description about how to apply for ReCaptcha account.
Source code:
//define a reCaptcha widget.
Ext.define('yiyu.util.ReCaptcha',
{
extend : 'Ext.Component',
alias : 'widget.recaptcha',
onRender : function(ct, position){
var me = this;
me.callParent(arguments);
me.recaptcha = me.el.createChild({
tag : "div",
'id' : me.recaptchaId
});
Recaptcha.create(me.publickey, me.recaptcha.id, {
theme: me.theme,
lang: me.lang,
callback: Recaptcha.focus_response_field
});
//me.recaptcha.setWidth(me.el.getWidth(true));
},
getChallenge: function(){
return Recaptcha.get_challenge();
},
getResponse: function(){
return Recaptcha.get_response();
}
});
//create a ReCaptcha instance and we can use it as item in Form.
var recaptcha = Ext.create('yiyu.util.ReCaptcha',{
name: 'recaptcha',
recaptchaId: 'recaptcha',
publickey: 'Your public Key from ReCaptcha',
theme: 'white',
lang: 'en'
});
Nice job :)
ReplyDeleteOnly two questions :
Where can I create a Recaptcha instance ?
And how display it in a form ?
Thx
thanks for comment! To answer your question,
ReplyDelete1) you need to include below javascript in your html.
http://www.google.com/recaptcha/api/js/recaptcha_ajax.js
Recaptcha is defined there.
2) You can add this widget in to Form panel in the same as adding other fields.
Done, thx again!
ReplyDeletehow do you check if the entered value is correct?
ReplyDeleteOr how do you send the value with the form submit ?
You can add this widget in to Form panel in the same as adding other fields. The validation is done on the server side. You can visit google recaptcha site for more info.
ReplyDeleteAssuming recaptcha component defined as 'recaptcha', the handler would look similar to (Tested in extjs 4):
ReplyDeletehandler: function() {
var form = this.up('form').getForm();
if(form.isValid()) {
form.submit({
params: {
recaptcha_challenge_field: recaptcha.getChallenge(),
recaptcha_response_field: recaptcha.getResponse()
},
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
I have used the above captcha handler code if I enter wrong in capthca textBox that time I did not get error. what is issue ?
DeleteThank you...helped me a lot...
ReplyDeleteHow I can check that the captcha is correct ?
ReplyDeleteThis comment has been removed by the author.
ReplyDelete