reCAPTCHA with Google Apps Script
Post date: Jul 04, 2017 11:29:15 AM
reCAPTCHA is a free service by Google that protects your forms from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs 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: googleusercontent.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 Waqar Ahmad ( support.waqar@gmail.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');
}
// 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.
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.
