How to use reCAPTCHA in web App using Google App Scripts

Written by 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.


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

           
           

Subscribe to my Email Newsletter

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 26,908 other subscribers
           
       
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 me a message via Facebook Messenger