When faced with adding a captcha to your forms, there are many libraries which can help you. This depends on your framework; if you are using Angular JS, you can use our
captcha component to easily add one to your form.
You’ll be able to submit with XHR a form that contains a reCaptcha.
First, you need to get a valid public key for your domain. See
http://www.google.com/recaptcha. Then, include the reCaptcha
AJAX API using this script in your HTML:
<script type="text/javascript" src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
After that, in your view, you can place a container for the captcha widget and call the vc-recaptcha directive like this (Be careful to use your public key, not your private one.):
<div vc-recaptcha key="'---- YOUR PUBLIC KEY GOES HERE ----'" ></div>
Here the key attribute is passed to the directive’s scope, so you can use a property in your scope or just a string.
To validate this object from your server, you need to use one of the
server side plugins or
roll your own. Validation is outside of the scope of this tool, since is mandatory to do that at the server side. To get the values that you need to send to your server, use the vcRecaptchaService angular service. This object contains a data() method that returns two values needed to validate the captcha in your server. response is the response of the user, and challenge is the identification of the captcha that your user resolved.
{ "response": "foo bar", "challenge": "03AHJ_VuvQ5p0AdejIw4W6yUKA65eRIEFiXFTxtKYD22UH9zjavXK4IYRZ8fhaGHjKXLKZa2MA-Lqeui5V9aeRWWTZSN6e1tED4gt7O77ROTcyY0Uedkc7LHzSUbLNULMcbXb2JThqLgOMvHINaoOtoniW4CepuOLG2h8s0tRUfqaQt6iUqNeWWHQ" }
You can optionally pass other parameters to the captcha, as html attributes:
<div vc-recaptcha ng-model="model.captcha" tabindex="3" theme="clean" lang="en" key="'---- YOUR PUBLIC KEY GOES HERE ----'" ></div>
In this case we are specifying that the captcha should use the theme named ‘clean’, display the texts in english language and the captcha input should have tabindex 3.
Try reCaptcha out!
