Security News
The Hidden Blast Radius of the Axios Compromise
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.
By Ahmad Nassri - Apr 01, 2026
New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
angular-g-recaptcha
Advanced tools
angular-g-recaptcha
Angular module for google recaptcha
Get Started
[1] Installation
Install with npm
npm install angular-g-recaptcha
Install with bower
bower install angular-g-recaptcha --save
[2] Usage
In html
<!doctype html>
<html ng-app="myApp">
<head>
...
</head>
<body>
...
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="path/to/bower_components/angular-g-recaptcha/angular-g-recaptcha.js"></script>
<script>
var myApp = angular.module('myApp', ['wo.grecaptcha']);
</script>
</body>
</html>
Features
- Load recaptcha script automatically
- Wrap callbacks with $rootScope.$apply
- Inherit event emitter so that handle events easily and well
API
Provider
$grecaptchaProvider
Allow set recaptcha 'default' config, languageCode, onLoadMethodName in config phase.
var app = angular.moudule('myApp', ['wo.grecaptcha'])
.config(function($grecaptchaProvider) {
$grecaptchaProvider.set({ // default recaptcha config
sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', // google official test site key
theme: 'Light', // 'light', 'dark' (not case sensitive)
type: 'image', // 'image', 'audio' (not case sensitive)
size: 'NORMAL', // 'normal', 'compact' (not case sensitive)
tabindex: 0, // number
callback: [ // function or array of functions,
// function returning promise is supported
function(res) {
console.log(res); // response provided by recaptcha box
return res;
},
function(res) {
res += 'suffix';
return res; // 'suffix' will be appended
}
],
'expired-callback': function() { // function or array of functions
// function returning promise is supported
console.log('expired!!');
},
languageCode: 'ko', // languageCodes available in $greLanguageCodes
onLoadMethodName: 'onRecaptchaApiLoaded' // name of method executed when
// recaptcha script be loaded
})
.setType('image'); // can chain set method because it returns self
// can also set property with appending its capitalizing name
// e.g. 'setType', 'setSize', 'setTabindex', etc
});
Directive
grecaptcha
- Insert response into ngModel.
- Insert promise and widget id about gre object into given greInfo object.
- Update ngModel value to undefined when resetting recaptcha box is done.
<!-- index.html -->
<div data-ng-controllers="greCtrl">
<div grecaptcha="{sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', theme: 'dark'}"
data-ng-model="response" gre-info="info">
Loading..
</div>
<div data-ng-bind="respone"> </div>
</div>
// ctrl.js
app.controllers('greCtrl', function($scope) {
$scope.info = {}; // an object where gre promise and widget id will be contained
$scope.$on('response', function() {
console.log($scope.response); // resposne of recaptcha box
});
$scope.$on('info', function() {
$scope.info.promise.then(function(gre) {
console.log($scope.info.widgetId); // widget id of gre instance
});
});
});
Service
$grecaptcha
- Return existing gre instance or create new gre instance according to parameters
app.directive('greDirective', function($scope, $grecaptcha, $timeout, $q, $document) {
var options = { // own config, not default recaptcha config!!
sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
theme: 'DARK',
type: 'audio',
size: 'compact',
tabindex: 10,
callback: [
function(res) {
return $q(function(resolve, reject) {
$timeout(function() {
resolve(res);
}
}, 1000);
},
function(res) {
$scope.response = res;
return res;
}
],
'expired-callback': function() {
$scope.response = undefined;
}
};
var gre = $grecaptcha(options); // create new gre instance with options
var el = $document[0].querySelector('.g-recaptcha');
gre.render(el).then(function() {
var gre2 = $grecaptcha(gre.getWidgetId()); // return the gre instance
if( gre === gre2 ) console.log(true); // true
});
})
- Get onLoadMethodName, private grecaptcha object, languageCode.
//after init is finished
$grecaptcha.getOnLoadMethodName(); // 'onLoadMethodName'
$grecapcha.getGrecaptcha(); // Object {render: function{...}, reset: function{...}, getResponse: function{...}}
$grecaptcha.getLanguageCode(); // 'ko'
Type
gre
- Init a private grecaptcha object if not exist.
- Set recaptcha config and validate them. (cannot set onLoadMethodName, languageCode)
- Render a recaptcha box at the provided element with its own config.
- Register event listeners and emit events like 'destroy', 'reset'.
- Get recaptcha config value.
var gre = $grecaptcha();
gre // These options are its own config.
.set('sitekey', '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI')
.set('theme', 'LIGHT')
.set('size', 'NoRmAl');
.set('callback', function(res) {
$scope.response = res;
});
gre.get('sitekey'); // '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
gre.get('theme'); // 'light'
gre.get('size'); // 'normal'
gre.on('reset', function() { // register a listener to 'reset' event
$scope.response = undefined;
});
gre.on('destroy', function() {
console.log('Destroy!!!');
});
gre.init().then(function() { // init grecaptcha object
return gre.render(el).then(function() { //render recaptcha box
console.log(gre.getWidgetId()); // widget id of recaptcha box
});
});
License
FAQs
Angular module for google recaptcha
We found that angular-g-recaptcha demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 12 Nov 2015
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Supply Chain Attack on Axios Pulls Malicious Dependency from npm
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
By Socket Research Team - Mar 31, 2026
Research
TeamPCP Compromises Telnyx Python SDK to Deliver Credential-Stealing Malware
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
By Socket Research Team - Mar 27, 2026