Thursday, October 6, 2011

Ext JS 4 reCAPTCHA widget

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

10 comments:

  1. Nice job :)

    Only two questions :
    Where can I create a Recaptcha instance ?
    And how display it in a form ?

    Thx

    ReplyDelete
  2. thanks for comment! To answer your question,

    1) 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.

    ReplyDelete
  3. how do you check if the entered value is correct?
    Or how do you send the value with the form submit ?

    ReplyDelete
  4. 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.

    ReplyDelete
  5. Assuming recaptcha component defined as 'recaptcha', the handler would look similar to (Tested in extjs 4):

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

    ReplyDelete
    Replies
    1. 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 ?

      Delete
  6. Thank you...helped me a lot...

    ReplyDelete
  7. How I can check that the captcha is correct ?

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete