reCAPTCHA with Google Apps Script

posted Jul 4, 2017, 4:29 AM by Waqar Ahmad   [ updated Jul 4, 2017, 4:32 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
    reCAPTCHA with Google Apps Script
  • Now make a note of site-key and secret key which you see on next screen.
    reCAPTCHA with Google Apps Script - accemy.com

  • 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 ( waqar@accemy.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.
    reCaptcha with Google Apps Script - accemy.com
    reCaptcha with Google Apps Script - accemy.com


  • 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.
    Publish webapp, recaptcha with Google Apps Script - Accemy.com
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? Just follow this link and fill the form. We will get back to you as soon as possible.

Use of URLFetch with Google Docs native API

posted May 13, 2012, 3:18 AM by Waqar Ahmad

Today I have posted two short code which use URLFetch and oAuthConfig to get the list of Documents of a Domain user and share the documents of one user with another user.
Here are the links to those 2 tutorials.

Duynamically adding/removing form elements

posted Mar 24, 2012, 9:46 AM by Waqar Ahmad   [ updated Apr 8, 2012, 10:43 AM ]

I have posted the code, how to add or remove form elements dynamically.
Check the whole code and demo here.

Doodles for your Google Apps Domain using GAS

posted Dec 24, 2011, 10:26 PM by Waqar Ahmad   [ updated Dec 24, 2011, 10:32 PM ]

I have made a spreadsheet application which can be used to update Doodles for your Google Apps Domain. Have a look here for detailed instruction and Application spreadsheet.

Chart services examples added

posted Dec 24, 2011, 10:20 PM by Waqar Ahmad   [ updated Dec 24, 2011, 10:21 PM ]

I have added few chart examples which will be rendered dynamically with data coming from spreadsheets.
Have a look here (Chart services)

Creating calendar events by submitting UI form

posted Dec 4, 2011, 3:17 AM by Waqar Ahmad

Today, I have posted a new example, which shows you how to create a Calendar event through a UI form. On submission of the form, It will log the event entries in a spreadsheet as well.
You may check it here. 


Char services examples added

posted Dec 4, 2011, 3:13 AM by Waqar Ahmad

I have posted chart services examples today, you may have a look here

New Examples: Caption Panel, Stack Panel, Scroll Panel, Split Layout Panel

posted Jul 26, 2011, 5:28 PM by Waqar Ahmad

Today i have added few more examples. These examples are very useful. I googled these examples but found nowhere, so I thought to document it.
Here are the links.


New examples added

posted Jul 14, 2011, 5:16 PM by Waqar Ahmad

Today i added three new examples.
You can check them here

Contact Logger

posted Jul 5, 2011, 10:53 PM by Waqar Ahmad   [ updated Jul 14, 2011, 5:19 PM ]

Today, i have added a new application, which is useful for making communication notes.
You can see details here.


1-10 of 19