Recent Additions‎ > ‎

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.
Comments