How to use reCAPTCHA in web App using Google App Scripts

Written by Sarmad Gardezi October 9, 2017

ReCAPTCHA is a free service by Google that protects your forms from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHA’s to keep automated software from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease.

There are lot of tutorial and libraries available for different languages like Java, ASP, Php etc but I could not find a tutorial to integrate the same with Apps Script Web Applications.
Due to some security restrictions, using reCAPTCHA with Apps Script is not straightforward as given on reCAPTCHA guides by Google.
Here are the steps to use it with your Apps Script Projects.
  • Go to reCAPTCHA admin console and register a new site with details as shown below.
    Choose the type of reCAPTCHA : reCapcha V2
    Domains: sarmadgardezi.com

Now make a note of site-key and secret key which you see on next screen.

Let us now make our Apps Script Web App. I have  a made a sample webapp which will demonstrate how these keys will be used. The teplate webapp has 2 files. One for Google Script and Other for HTML Template. Make sure you replace the site-key and secret-key as highlighted in below code.
You can also make a copy of the this apps script project from here.

index.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function showResp(resp){
alert(resp)
console.log(resp)
}
</script>
</head>
<body>

<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="Your Site key here"></div>
<br/>
<input type="button" value="Submit"
onclick="google.script.run
.withSuccessHandler(showResp)
.processForm(this.parentNode)" />
</form>

</body>
</html>

Code.gs

// reCaptcha with Google Apps Script
// By Sarmad Gardezi ( sarmadgardezi.com )

 

//Secret key
//Use this for communication between your site and Google. Be sure to keep it a secret.
var secret = 'your secret key here';

function doGet(e){
return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.IFRAME).setTitle('reCaptcha Demo by Sarmad Gardezi');
}

// Process the form response submitted by the user
function processForm(obj){

// Verify Catcha
var isNotBot = verifyCaptcha(obj);
if(!isNotBot){
return 'You are bot';
}

return 'You are a human';
}

// This function will verify the captcha response from user and resturn the result as true/flase
function verifyCaptcha(formObj){
var payload = {
'secret' : secret,
'response': formObj['g-recaptcha-response']
}
var url = 'https://www.google.com/recaptcha/api/siteverify';
var resp = UrlFetchApp.fetch(url, {
payload : payload,
method : 'POST'
}).getContentText();
return JSON.parse(resp).success;
}

Once you have copied the above code in your project, your Apps Script Project will look like this.

and the index.html file would be like this.

So your almost done now, review your app before deploy.

After you have copied the code to your apps script project and made the changes as instructed, publish the web app.
To Publish the Web App, Go to Publish > Deploy as web app … and Publish it by saving a new version.

You can watch a live demo here.
I hope this tutorial will be useful to you.
Are you stuck somewhere in Google Apps Script project? or would you like it to be developed by an expert? You can Contact me on social media or email me mail(@)sarmadgardezi.com

I hope that my Tutorual will help you to secure our web Apps from Bots using reCAPTCHA by Google.

Facebook Profile Picture Guard is now Available in Pakistan

Learn the Easy & Best Way to Make Money in Pakistan

Insert Date in Google Docs Using Google Apps Scripts

How to Embed Twitter DM / Message Button in Website

Free Online Image Hosting

Host your Images Online for free & use them on Website Blogs and Social Media.

Host Image Now Featured
Online Dictator

Convert your Speech into Text. You can either copy, Download or Share it Online for free.

Try it Now Popular
My First Tweet

Find first tweet on Twitter and retweet it to amaze people.

Lets Go! Trending
Custom Support

I build bespoke solutions that use the capabilities and the features of Google Apps for automating business processes and driving business productivity.

or send us a message via Facebook Messenger