Google ReCAPTCHA to AngularJS


To block robots.

Other captchas?

JavaLite – captcha
But I wanted not to challenge any images to users. Google ReCAPTCHA v3 only reads users’ mouse and keyboard interactions and challenge nothing to find out robots.

Is it free?

Yes, commercially free. But Google will collect all users’ interactions all over the website, right on the document.window! If you block this, ReCAPTCHA will not work. (I’ve tested a lot)
I personally think why Google provides this captcha service free is that Google wants to improve AdSense quality using ReCAPTCHA’s data. You know there are a lot of abuses of AdSense and it is a direct threat to Google’s revenue.
And you know there is no destroy() function on it. Once it is on, you cannot remove it. It keeps tracking users’ experience until they go out that page. If you made your website as one unified page, you cannot remove it until refreshing(F5) or logging out. (I’ve also tested a lot)

Sign up & get API keys
Site key: something (will share with users)
Secret key: something (never share with users)

Add to the client side

import { Directive, OnInit } from '@angular/core';
selector: '[myRecaptcha]'
export class MyRecaptchaDirective implements OnInit {
ngOnInit() {
const script = document.createElement('script');
script.src = '' + environment.recaptchaSitekey;

<div myRecaptcha></div>

import { ... NgZone } from '@angular/core';
declare const grecaptcha: any;
declare global {
interface Window {
buySomething: any;

private ngZone: NgZone
) {

ngOnInit() {
window.buySomething = window.buySomething || {};
window.buySomething.namespace = window.buySomething.namespace || {};
window.buySomething.namespace.callbackBuySomething = this.callbackBuySomething.bind(this);
clickBuySomething() {
grecaptcha.execute(environment.recaptchaSitekey, {action: 'buy_something'}).then(function(token: string) {
// console.log('grecaptcha.execute() token=' + token);
callbackBuySomething(token: string) { => this.saveSomething(token));
saveSomething(token: string) {
//call API with token
//then API will throw it is valid or not

Add to the server side

public class GoogleRecaptchaResponse {
Boolean success;
Double score;
String action;
LocalDateTime challenge_ts;
String hostname;
@JsonProperty("error-codes") String[] errorCodes;

secretKey: something
scoreThreshold: 0.5 #1.0 is very likely a good interaction, 0.0 is very likely a bot

public boolean verifyRecaptcha(String token, String action) {
GoogleRecaptchaResponse gResponse = restTemplate.postForEntity(
if(gResponse!=null &&
gResponse.getSuccess() &&
gResponse.getScore() > scoreThreshold
&& gResponse.getAction().equals(action)) {"ReCAPTCHA verification succeeded: {}",gResponse);
return true;
}else {
log.error("ReCAPTCHA verification failed: {}",gResponse);
return false;

How to test

Postman (just call API)
JMeter (record & play)
Selenium WebDriver (build a macro & run)
…any other suggestions?


Categorized as xacdo

By xacdo

Kyungwoo Hyun

Leave a comment

Your email address will not be published.