Using Captcha In Ember Js And Mvc

I'm creating a site using ember.js and asp.net mvc. In my previous asp.net sites, I've used captchaMVC (http://captchamvc.codeplex.com/). But, I can't figure out how to use it wit

Solution 1:

In reCaptcha the challenge request flow (between the user-agent and the reCaptcha challenge resource server) and user response verification flow (typically between your back-end application server and the reCaptcha Verification API server) are handled by a variety of plugins that abstract this process for you and leave you to deal with its outcome only, both on the front-end and back-end side.

Ember, on the other hand, is a client-side application that should not handle the verification step not to expose your Private reCaptcha Key, amongst other parameters.

Due to these facts, I find it easier to build reCaptcha support manually rather than depend on a specific plugin. Google's Displaying reCAPTCHA Without Plugins page describes the DIY process well.

I use ember-cli, so bower install recaptcha-ajax --save or configure it in bower.json to point to Google's recaptcha-ajax.js directly then import it in Brocfile.

In your view, you can target a specific element like so:

importEmberfrom'ember';

exportdefaultEmber.View.extend({
    didInsertElement: function() {
        Recaptcha.create("your_public_key", 'element_id', {
            theme: "red"callback: Recaptcha.focus_response_field
        });
    }
});

In your template, simply embed your this element of element_id from above into your form element:

<formaction=""method="post"><divid="element_id"></div></form>

and don't forget to exclude Recaptcha in your .jshintrc file:

{"predef":{"Recaptcha":true}}

now your back-end form handler will receive recaptcha_challenge_field and recaptcha_response_field which it has to use in constructing a POST request to http://www.google.com/recaptcha/api/verify and you'll have to set a few other params as per the Google's reCaptcha Verification Flow Document.