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 with Ember. Google searches haven't been very helpful for me.
Can anyone point me in the right direction for how to use captchaMVC
with Ember?
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:
import Ember from 'ember';
export default Ember.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:
<form action="" method="post">
<div id="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.