Add Google Recaptcha To Your Website With Angular JS

Posted By : S. Ajit | 22-Dec-2016

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

 

 

About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..