Home » Did you know? » reCAPTCHA V3 Integration With Online Forms

reCAPTCHA V3 Integration With Online Forms

Introduction

reCAPTCHA is a Google service that helps to protect your websites and custom forms from spam and abuse. It is a free service that allows you to add a layer of security to your website by verifying that the user is not a bot. This blog post will discuss how to integrate reCAPTCHA into your NetSuite online custom forms.

Steps to integrate reCAPTCHA into NetSuite Custom Forms

There are several steps involved in integrating reCAPTCHA into your NetSuite custom forms. Let’s discuss each of these steps in detail. The below steps are explained with the example of case creation by online form.

Step 1: Sign up for reCAPTCHA

The first step to integrating reCAPTCHA into your NetSuite custom forms is to sign up for the service. You can sign up for reCAPTCHA by visiting the reCAPTCHA website and following the instructions. You will need a Google account to sign up for the service.

Step 2: Get Site Key and Secret Key

After you have signed up for reCAPTCHA, you will need to generate a Site Key and a Secret Key. These keys are used to authenticate your website with the reCAPTCHA service. You can generate these keys by following the instructions on the reCAPTCHA website.

Step 3: Add reCAPTCHA to your NetSuite Online Custom Form

  1. Create a custom field (custevent_recaptcha_token) on the record to store the token generated on the form.
  2. Set the field on the form as hidden and mandatory.
  3. Add the following script tag in the head tag of the template of your online custom form:

Be sure to replace {SITE_KEY} with your site key.

  1. Place this script before the ending of the body tag:
    grecaptcha.ready(function(){
    grecaptcha.execute({SITE_KEY},{action:'submit'}).then(function(token){
    document.getElementById(custevent_recaptcha_token).value = token;
    })
    })
  2. Replace the {SITE_KEY} with your site key. This script will trigger as soon as the api.js file has loaded and will fetch the recaptcha token using APIs and set it to the custom field. Make sure that this field is hidden and mandatory.

Step 4: Setting up server side validation on record

This implementation will prevent automated posting of form data.

  1. Create a userEvent of the record. If the form will create a case then make a userEvent for case record.
  2. On before submit of the record trigger the “siteverify” API and use the token from context.newRecord.getValue(‘custevent_recaptcha_token’).
  3. If the token is not valid then throw an exception (using N/error module) in beforeSubmit to prevent the record from being created.
    throw error.create({
    name: 'Token Validation Error',
    message: errorMessageFromApi,
    notifyOff: true
    });

Picture of About the Author

About the Author

Sahal Tariq
Lead Software Engineer - Folio3

Sahal Tariq is a skilled Lead Software Engineer with expertise in JavaScript and Netsuite integrations. He has a proven track record of developing high-quality solutions and is known for his keen eye for detail and problem-solving abilities. During his free time, Sahal enjoys engaging in a variety of activities, including working out, gaming, and exploring a wide range of music genres.

Get In Touch With Our Experts


    Introduction

    reCAPTCHA is a Google service that helps to protect your websites and custom forms from spam and abuse. It is a free service that allows you to add a layer of security to your website by verifying that the user is not a bot. This blog post will discuss how to integrate reCAPTCHA into your NetSuite online custom forms.

    Steps to integrate reCAPTCHA into NetSuite Custom Forms

    There are several steps involved in integrating reCAPTCHA into your NetSuite custom forms. Let’s discuss each of these steps in detail. The below steps are explained with the example of case creation by online form.

    Step 1: Sign up for reCAPTCHA

    The first step to integrating reCAPTCHA into your NetSuite custom forms is to sign up for the service. You can sign up for reCAPTCHA by visiting the reCAPTCHA website and following the instructions. You will need a Google account to sign up for the service.

    Step 2: Get Site Key and Secret Key

    After you have signed up for reCAPTCHA, you will need to generate a Site Key and a Secret Key. These keys are used to authenticate your website with the reCAPTCHA service. You can generate these keys by following the instructions on the reCAPTCHA website.

    Step 3: Add reCAPTCHA to your NetSuite Online Custom Form

    1. Create a custom field (custevent_recaptcha_token) on the record to store the token generated on the form.
    2. Set the field on the form as hidden and mandatory.
    3. Add the following script tag in the head tag of the template of your online custom form:

    Be sure to replace {SITE_KEY} with your site key.

    1. Place this script before the ending of the body tag:
      grecaptcha.ready(function(){
      grecaptcha.execute({SITE_KEY},{action:'submit'}).then(function(token){
      document.getElementById(custevent_recaptcha_token).value = token;
      })
      })
    2. Replace the {SITE_KEY} with your site key. This script will trigger as soon as the api.js file has loaded and will fetch the recaptcha token using APIs and set it to the custom field. Make sure that this field is hidden and mandatory.

    Step 4: Setting up server side validation on record

    This implementation will prevent automated posting of form data.

    1. Create a userEvent of the record. If the form will create a case then make a userEvent for case record.
    2. On before submit of the record trigger the “siteverify” API and use the token from context.newRecord.getValue(‘custevent_recaptcha_token’).
    3. If the token is not valid then throw an exception (using N/error module) in beforeSubmit to prevent the record from being created.
      throw error.create({
      name: 'Token Validation Error',
      message: errorMessageFromApi,
      notifyOff: true
      });

    Picture of About the Author

    About the Author

    Sahal Tariq
    Lead Software Engineer - Folio3

    Sahal Tariq is a skilled Lead Software Engineer with expertise in JavaScript and Netsuite integrations. He has a proven track record of developing high-quality solutions and is known for his keen eye for detail and problem-solving abilities. During his free time, Sahal enjoys engaging in a variety of activities, including working out, gaming, and exploring a wide range of music genres.

    Get In Touch With Our Experts

      I have read and agree to the Privacy Policy of Folio3
      I agree to be contacted by Phone or Email by Folio3

      Get in touch with the

      Award-Winning

      End-to-end NetSuite Servicing Agency

      Tell us how may we assist you!