Knowledge Base

Categories: Troubleshooting, WP Live, Site Management Tools

How to Add Google reCAPTCHA and Get API Key

To assist you in safeguarding your websites from fraudulent activity, spam, and abuse, Bluehost is partnered with Google, which provides reCAPTCHA (v3 and v2). reCAPTCHA is a seamless fraud detection service that permits legitimate users while blocking bots and other automated assaults. This article ONLY provides an overview of Google reCAPTCHA v2, the most commonly used type of reCAPTCHA. Check the reCAPTCHA Enterprise article for details on the product.

Requirements
Adding Google reCAPTCHA
Checkbox reCAPTCHA
Invisible reCAPTCHA

Note:

Please see the Comparison of features between reCAPTCHA versions to learn more about reCAPTCHA and reCAPTCHA Enterprise.
This article is designed for people familiar with HTML forms, server-side processing, or mobile application development. To install reCAPTCHA, the customer might need to edit some codes.

Requirements

You must register for an API key pair for your website to begin utilizing the reCAPTCHA service.

The key pair consists of the following:

The Site key invokes reCAPTCHA service on your site or mobile application.
The Secret key allows the reCAPTCHA server and your application back-end can communicate with each other to verify the user's response.

Important: The Secret key needs to be kept safe for security purposes.

Please be advised to follow the steps below when registering for an API key pair for your website:

Fill in the Register a new site form.
1. Use a label that will make it easier for you to identify the site in the future.
2. Please choose the type of reCAPTCHA for your website.
3. Fill in the authorized domains or package names.
4. Tick the BOX to accept the Google Cloud Terms of Service and the terms of service of any applicable services and APIs.
Click the SUBMIT button. The image below shows that the Google API key pair registration is successful.

Adding Google reCAPTCHA

If you want to add reCAPTCHA to your website(s) or mobile application(s), please follow the steps below:

Please choose the client-side integration or the type of reCAPTCHA you want to integrate:
1. reCAPTCHA v3
2. reCAPTCHA v2

Checkbox reCAPTCHA

This section explains how to display and customize the reCAPTCHA v2 widget on your webpage. To display the widget, you can either do the following:

Tips:

Please see Configurations to learn how to customize your widgets. For example, the customer may want to specify the language or theme for the widget.
Please see Verifying the user's response to check if the user successfully solved the CAPTCHA.

Automatically Render the Widget

The simplest way to render the reCAPTCHA widget on your page is to use the g-recaptcha tag and the required JavaScript resource. The DIV element with class name g-recaptcha and their site key in the data-sitekey attribute is called a g-recaptcha tag.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Note: The script can be included from any point on the page without restriction but must be loaded using the HTTPS protocol.

Explicitly Render the Widget

The widget's render can be deferred by adding parameters to the JavaScript resource and specifying your onload callback function.

Please be advised to follow the steps below when rendering the reCAPTCHA widget explicitly:

Please specify the function for onload callback. When all the dependencies have loaded, the onload callback will get called.

<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>

Secondly, please insert the JavaScript resource. In the JavaScript resource, the onload parameter will be set to the name of your onload callback function, and the render parameter will be set to explicit.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>
```

When your callback is executed, you can call the grecaptcha.render method from the JavaScript API.

Note:
Before the reCAPTCHA API loads, your onload callback function must be defined. To ensure there are no race conditions, advise the customer to follow the steps below:

Order the scripts with the callback first, and then reCAPTCHA.
Please utilize async and defer parameters in the script tags.

Invisible reCAPTCHA

This section explains how to enable and customize the invisible reCAPTCHA on your webpage.

To invoke the invisible reCAPTCHA, you can either do the following:

Tips:

Please see Configurations to learn how to customize the invisible reCAPTCHA. For example, you may want to specify the language or badge location.
Please see Verifying the user's response to check if the user successfully solved the CAPTCHA.

Automatically Bind the Challenge to a Button

The easiest method for using the invisible reCAPTCHA widget on your page is to include the necessary JavaScript resource and add a few attributes to your HTML button. The necessary attributes are the following:

A class name g-recaptcha
Site key in the data-sitekey attribute
The name of a JavaScript callback to handle the completion of the captcha in the data-callback attribute.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

Note: The script can be included from any point on the page without restriction and must be loaded using the HTTPS protocol.

Programmatically Bind the Challenge to a Button

Deferring the binding can be achieved by adding parameters to the JavaScript resource and specifying your onload callback function. It functions in the same way as the normal reCAPTCHA challenge.

Explicitly Render the Widget

Programmatically calling execute and rendering the challenge in a div with an attribute data-size="invisible", Programmatically Invoking the reCAPTCHA verification can be achieved.

Please be advised to follow the steps below when invoking the challenge programmatically :

Create a data-size="invisible" in your div.

<div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">

Call grecaptcha.execute from a javascript method.
```
grecaptcha.execute();
```

When your callback is executed, you can call the grecaptcha.render method from the JavaScript API.

Note:
Before the reCAPTCHA API loads, your onload callback function must be defined. To ensure there are no race conditions advise the customer to follow the steps below:

Order the scripts with the callback first, and then reCAPTCHA.
Please utilize async and defer parameters in the script tags.

Play Integrity API (Formerly SafetyNet reCAPTCHA API)

The Play Integrity API assists in defending your applications and games from potentially harmful and dishonest interactions, such as cheating and illegal access. It lets you take the necessary countermeasures to stop assaults and lessen misuse.

When your app or game is used on a device that runs Android 4.4 (API level 19) or higher, the Play Integrity API provides a signed and encrypted response that includes the following information:

Genuine app binary - This response determines whether Google Play recognizes the unmodified binary that you're interacting with.
Genuine Play install - This response determines whether the current user account is licensed (meaning your app or game is installed or paid for by the user on Google Play).
Genuine Android device - This response tells you whether the Android device is genuine and powered by Google Play services where the app is being run.

Tips: To learn more, please see Play Integrity API.

Verify the user's response.

This section will show how your application's back-end verifies a reCAPTCHA challenge user's response.

Web Users

For web users, there are three ways to get the user's response:

When the user submits the form on your site, you can verify the user's response through the g-recaptcha-response POST parameter.
Secondly, you can verify the user’s response through the grecaptcha.getResponse(opt_widget_id) after the user completes the reCAPTCHA challenge.
Lastly, you can get the user's response as a string argument to your callback function (only if the grecaptcha.render method or data-callback parameter is specified in either the g-recaptcha tag attribute).

Android Library Users

You can call the SafetyNetApi.RecaptchaTokenResult.getTokenResult() method to get a response token if the status returns successfully.

Tips: Please see Verifying the User's Response to learn more.

If you need further assistance, feel free to contact us via Chat or Phone:

Chat Support - While on our website, you should see a CHAT bubble in the bottom right-hand corner of the page. Click anywhere on the bubble to begin a chat session.
Phone Support -
- US: 888-401-4678
- International: +1 801-765-9400

You may also refer to our Knowledge Base articles to help answer common questions and guide you through various setup, configuration, and troubleshooting steps.

Did you find this article helpful?

Please leave us some feedback so we can improve this article.

* Your feedback is too short