Skip to main content

Google reCAPTCHA Configuration

Google reCAPTCHA is a security service that protects your application from automated bot attacks. This guide covers implementing reCAPTCHA with LoginRadius authentication flows to add an extra layer of verification and ensure only legitimate users can access your system.

To integrate reCAPTCHA, you must render a CAPTCHA widget on your registration, login, or forgot password forms. Once the user interacts with the widget, Google generates a token (access token) that must be sent to LoginRadius APIs for verification.

Refer to Google's reCAPTCHA documentation for instructions on how to set up the widget, customize the UI, and capture the token in your front-end application.

This section explains Google reCAPTCHA, how it enhances security, and what this guide covers. Google reCAPTCHA helps secure your application by preventing automated bots from abusing authentication and registration flows. It adds an extra layer of verification to ensure that only real users access your system. This guide provides step-by-step instructions for configuring Google reCAPTCHA within the LoginRadius Admin Console, integrating it into authentication flows, and troubleshooting common issues.

Configuration

Step-by-step instructions to obtain and configure Google reCAPTCHA in the LoginRadius Admin Console.

To integrate Google reCAPTCHA, obtain the required API keys:

  1. Visit the Google reCAPTCHA Admin Console.
  2. Register your site with the following:
    • Label: A descriptive name for your site.
    • reCAPTCHA Type:
      • v2 Checkbox: Requires users to check a box.
      • v2 Invisible: Runs in the background.
      • v3: Uses a score to determine user/bot.
    • Domain(s): Where reCAPTCHA will be active.
  3. Click Submit to generate your Site Key and Secret Key.

For a full list of supported languages, check the Google reCAPTCHA language documentation.

CAPTCHA Implementation by Use Case

Before integrating, ensure your UI includes the reCAPTCHA widget from Google. You can render this on your forms (registration, login, forgot password, etc.). Once the user completes the CAPTCHA challenge, Google will return a response token. To validate the interaction, this token must be passed in your LoginRadius API requests.

For guidance on rendering the widget and handling the token, refer to Google's official documentation.

This section details the implementation of Google reCAPTCHA across different authentication flows using JS libraries and API methods.

Captcha Implementation on Registration Form

This section shows how to integrate reCAPTCHA in the user registration process using the LoginRadius API. For reCAPTCHA widget integration and response generation, refer to Google's documentation.

  1. Generate the reCAPTCHA response token using the Google reCAPTCHA widget.
  2. Construct your API payload with the token included.
  3. Send the payload to the LoginRadius Registration API.

Captcha Implementation on Login Form

This section explains how to integrate reCAPTCHA into the login process using the LoginRadius SDK and API. For widget rendering and token generation, refer to Google's documentation.

Using LoginRadius API

Construct your API payload with the reCAPTCHA token:

{
    "email": "[email protected]",
    "password": "UserPassword",
    "g_recaptcha_response": "RECAPTCHA_RESPONSE_TOKEN"
}

Captcha Implementation on Forgot Password

This section explains how to integrate reCAPTCHA into the Forgot Password process using LoginRadius. Ensure Bot Protection is enabled for this API in the LoginRadius Admin Console.

Using LoginRadius API

Pass the reCAPTCHA response token in your forgot password API request:

{
    "email": "[email protected]",
    "g_recaptcha_response": "RECAPTCHA_RESPONSE_TOKEN"
}

Displaying Invisible reCAPTCHA on the Login Form

How to implement an invisible reCAPTCHA to prevent automated login attempts while maintaining user experience. To avoid excessive login attempts and potential DDoS attacks, enable reCAPTCHA on the login form:

LRObject.$hooks.register('beforeFormRender', function(name, schema) {
    if (name == 'login') {
        LRObject.util.addRecaptchaJS();
        LRObject.util.captchaSchema("loginradius-recaptcha_widget_login", schema);
    }
});

Prevent reCAPTCHA from resetting:

LRObject.$hooks.register('eventCalls', function(name) {
    LRObject.options.optionalRecaptchaConfiguration.IsEnabled = true;
    if (name == 'login') {
        LRObject.options.optionalRecaptchaConfiguration.IsEnabled = false;
    }
});