Follow the below written steps to add google repcha to your website.
1. Goto http://www.google.com/recaptcha and Signup to get SITE KEY which would be like this 6Lcgiw8UAAAAAOHDAmMWYHKSfIN81umPssMHm8v-
2. Add below script to your HTML
<script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script>
3. Download angular-recaptcha with bower
bower install --save angular-recaptcha
or with npm
npm install --save angular-recaptcha
4. Add angular-recaptcha.js to your HTML
<script type="text/javascript" src="angular-recaptcha.js"></script>
5. Inject "vcRecaptcha" to your angular module
var app = angular.module('myApp', ['vcRecaptcha']);
6. Add directive to your HTML
<div vc-recaptcha key="'---- SITE KEY ----'" ng-model="captchaResponse" size="normal" ></div>
7. For validation purpose you can add below lines to your HTML
<p ng-show="captchaResponse==undefined && yourForm.$submitted" class="form-error">Please confirm that you are not a robot</p>
Now open your HTML in browser, you will be able to see google recapcha as shown in screen shot below
Now If you click on the check box you will be able to see images like this as shown below
THANKS
More From Oodles
Ready to innovate? Let's get in touch
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
S. Ajit
Ajit is a software developer who loves solving problems and programming in C, C++, Java. He also has a passion to learn new technologies.