Laravel ReCAPTCHA is a very simply-to-use Laravel 5 package to embed Google reCAPTCHA in your application.

Google developers says: "reCAPTCHA protects you against spam and other types of automated abuse. Here, we explain how to add reCAPTCHA to your site or application."

You can find further info at Google reCAPTCHA Developer's Guide

At this moment there are 3 versions available (for web applications):

• v3, the latest (reCAPTCHA v3)
• v2 checkbox or simply reCAPTCHA v2 (reCAPTCHA v2)
• v2 invisible (Invisible reCAPTCHA)

First of all you have to create your own API keys here

Follow the instructions and at the end of the process you will find Site key and Secret key. Keep them close..you will need soon!

(*) Version 3.6.1 is Laravel 6 ready

You can install the package via composer:

$ composer require biscolab/laravel-recaptcha

Laravel 5.5 (or greater) uses package auto-discovery, so doesn't require you to manually add the Service Provider, but if you don't use auto-discovery ReCaptchaServiceProvider must be registered in config/app.php:

'providers' => [
    ...
    Biscolab\ReCaptcha\ReCaptchaServiceProvider::class,
];

You can use the facade for shorter code. Add ReCaptcha to your aliases:

'aliases' => [
    ...
    'ReCaptcha' => Biscolab\ReCaptcha\Facades\ReCaptcha::class,
];

Create config/recaptcha.php configuration file using the following artisan command:

$ php artisan vendor:publish --provider="Biscolab\ReCaptcha\ReCaptchaServiceProvider"

Open .env file and set RECAPTCHA_SITE_KEY and RECAPTCHA_SECRET_KEY:

# in your .env file
RECAPTCHA_SITE_KEY=<YOUR_API_SITE_KEY>
RECAPTCHA_SECRET_KEY=<YOUR_API_SECRET_KEY>
RECAPTCHA_SKIP_IP=<YOUR_IP_LIST>

RECAPTCHA_SKIP_IP (since v5.2.0, not required, CSV format ) allows you to add a list of IP/CIDR (netmask included). It will be the value of skip_ip

The following environment variables have been removed!!! Now only sensitive informations as API keys are allowed as environment variables, that means you have to set configuration values in config/recaptcha.php

• RECAPTCHA_DEFAULT_VERSION
• RECAPTCHA_CURL_TIMEOUT
• RECAPTCHA_DEFAULT_VALIDATION_ROUTE
• RECAPTCHA_DEFAULT_TOKEN_PARAMETER_NAME
• RECAPTCHA_DEFAULT_LANGUAGE

Open config/recaptcha.php configuration file and set version:

return [
    'api_site_key'                  => env('RECAPTCHA_SITE_KEY', ''),
    'api_secret_key'                => env('RECAPTCHA_SECRET_KEY', ''),
    // changed in v4.0.0
    'version'                       => 'v2', // supported: "v3"|"v2"|"invisible"
    // @since v3.4.3 changed in v4.0.0
    'curl_timeout'                  => 10,
    'skip_ip'                       => env('RECAPTCHA_SKIP_IP', []), // array of IP addresses - String: dotted quad format e.g.: "127.0.0.1", IP/CIDR netmask eg. 127.0.0.0/24, also 127.0.0.1 is accepted and /32 assumed
    // @since v3.2.0 changed in v4.0.0
    'default_validation_route'      => 'biscolab-recaptcha/validate',
    // @since v3.2.0 changed in v4.0.0
    'default_token_parameter_name' => 'token',
    // @since v3.6.0 changed in v4.0.0
    'default_language'             => null,
    // @since v4.0.0
    'default_form_id'              => 'biscolab-recaptcha-invisible-form', // Only for "invisible" reCAPTCHA
    // @since v4.0.0
    'explicit'                     => false, // true|false
    // @since v4.3.0
    'api_domain'                   => "www.google.com", // default value is "www.google.com"
    // @since v5.1.0
    'empty_message'                => false,
    // @since v5.1.0
    'error_message_key'            => 'validation.recaptcha',
    // @since v4.0.0
    'tag_attributes'               => [
        'theme'                    => 'light', // "light"|"dark"
        'size'                     => 'normal', // "normal"|"compact"
        'tabindex'                 => 0,
        'callback'                 => null, // DO NOT SET "biscolabOnloadCallback"
        'expired-callback'         => null, // DO NOT SET "biscolabOnloadCallback"
        'error-callback'           => null, // DO NOT SET "biscolabOnloadCallback"
    ]
];

DO NOT SET tag_attributes.callback, tag_attributes.expired-callback, tag_attributes.error-callback to biscolabOnloadCallback. biscolabOnloadCallback is the default JavaScript callback function called when explicit is set to true and widget onload event is fired.

Here you can find further details about tag_attributes.* https://developers.google.com/recaptcha/docs/display#render_param

!!! IMPORTANT !!! Every time you change some configuration run the following shell command:

$ php artisan config:cache

If you are migrating from an older version check your config/recaptcha.php configuration file and compare it with https://github.com/biscolab/laravel-recaptcha/blob/master/config/recaptcha.php.

Make sure config/recaptcha.php is updated

Just for v2 and invisible users.

Before starting please add the validation message to resources/lang/[LANG]/validation.php file

return [
    ...
    'recaptcha' => 'Hey!!! :attribute is wrong!',
];

Insert htmlScriptTagJsApi() helper before closing </head> tag.

You can also use ReCaptcha::htmlScriptTagJsApi().

<!DOCTYPE html>
<html>
    <head>
        ...
        {!! htmlScriptTagJsApi($configuration) !!}
    </head>

htmlScriptTagJsApi function accepts $configuration argument. $configuration has different keys depending on which ReCAPTCHA you are using:

• Checkbox
• Invisible

$configuration argument can have following keys:

• lang set reCAPTCHA language. This will override default_language in config/recaptcha.php. Here you ca find the complete list of availeble languages https://developers.google.com/recaptcha/docs/language

After you have to insert htmlFormSnippet() helper inside the form where you want to use the field g-recaptcha-response.

You can also use ReCaptcha::htmlFormSnippet() .

<form>
    @csrf

    ...
    {!! htmlFormSnippet() !!}
    <!-- OR -->
    {!! htmlFormSnippet($attributes) !!}
    <input type="submit">
</form>

DO NOT forget @csrf blade directive

htmlFormSnippet() function does not require attributes but you can override default config data- attributes:

{!! htmlFormSnippet([
    "theme" => "light",
    "size" => "normal",
    "tabindex" => "3",
    "callback" => "callbackFunction",
    "expired-callback" => "expiredCallbackFunction",
    "error-callback" => "errorCallbackFunction",
]) !!}

htmlFormSnippet methos allows are only folowing attribute names:

• theme
• size
• tabindex
• callback
• expired-callback
• error-callback

Any different attribute name will be rejected

In config/recaptcha.php you can customize reCAPTCHA widget setting tag_attributes array values. Take a look to tag_attributes section in Complete configuration

$configuration argument can have following keys:

• form_id set reCAPTCHA form ID. This will override default_form_id in config/recaptcha.php. This value will be returned by getFormId() function in order to set the form tag id property.

After you have to insert htmlFormButton($button_label, $properties) helper inside the form where you want to use reCAPTCHA.

This function creates submit button therefore you don't have to insert <input type="submit"> or similar.

You can also use ReCaptcha::htmlFormButton($button_label, $properties) .

$button_label is what you want to write on the submit button

<form id="{{ getFormId() }}">
  @csrf ... {!! htmlFormButton($button_label, $properties) !!}
</form>

DO NOT forget @csrf blade directive

getFormId function returns the default form ID value. This is the value of either default_form_id in config/recaptcha.php or $configuration['form_id'] previously set as arguments of htmlScriptTagJsApi helper.

$configuration['form_id'] overrides default settings.

htmlFormButton function accepts 2 arguments:

• $button_label: (string: optional) the button lable. For example: Subscribe!;
• $properties: (array: optional) the HTML button properties. For example:

// $properties =
[
    'class' => 'btn btn-info',
    'data-foo' => 'bar'
]

If data-sitekey and data-callback properties are set, they will be overwritten

If class property is set the value g-recaptcha will be appended

Add recaptcha to your rules

$validator = Validator::make(request()->all(), [
    ...
    'g-recaptcha-response' => 'recaptcha',
    // OR since v4.0.0
    recaptchaFieldName() => recaptchaRuleName()
]);

// check if validator fails
if($validator->fails()) {
    ...
    $errors = $validator->errors();
}

Insert htmlScriptTagJsApi($config) helper before closing </head> tag.

<!DOCTYPE html>
<html>
    <head>
        ...
        {!! htmlScriptTagJsApi([
            'action' => 'homepage',
            'callback_then' => 'callbackThen',
            'callback_catch' => 'callbackCatch'
        ]) !!}

        <!-- OR! -->
        
        {!! htmlScriptTagJsApi([
            'action' => 'homepage',
            'custom_validation' => 'myCustomValidation'
        ]) !!}
    </head>

$config is required and is an associative array containing configuration parameters required for the JavaScript validation handling.

The keys are:

As callback of grecaptcha.execute an ajax call to config('recaptcha.default_validation_route') will be performed using fetch function. In case of successful response a Promise object will be received and passed as parameter to the callback_then function you have set. In not set, no actions will be performed.

Same will happen with callback_catch. callback_catch will be called in event of response errors and errors will pass as parameter et that function. If not set, no actions will be performed.

Please, go to Using Fetch for further information on fetch javascript function.

Warning!!! Check browser compatibility fetch function has compatibility issues with some browser like IE. Please create a custom validation function and set custom_validation with its name. That function has to accept as argument the tokenreceived from Google reCAPTCHA API.

Fetch browser compatibility

Default validation route is config('recaptcha.default_validation_route', 'biscolab-recaptcha/validate').
Route and relative Controller are built-in in the package. The route if filtered and protected by Laravel web Middleware, that's why is important you embed csrf-token HTML meta tag and send X-Requested-Wit and X-CSRF-TOKEN headers.

You can also change the validation end-point changing default_validation_route value in recaptcha.php config file.

<head>
    ...
    <!-- IMPORTANT!!! remember CSRF token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>

The output will be a JSON containing following data:

• Default output without errors

{
    "action":"homepage",
    "challenge_ts":"2019-01-29T00:42:08Z",
    "hostname":"www.yourdomain.ext",
    "score":0.9,
    "success":true
}

• Output when calling IP is included in "skip_ip" config whitelist

{
    "skip_by_ip":true,
    "score":0.9,
    "success":true
}

If you embed code in your blade file using htmlScriptTagJsApiV3 helper no validation call will be performed!

More info at Configuration page

• Output with an empty response from Google reCAPTCHA API

{
    "error":"cURL response empty",
    "score":0.1,
    "success":false
}

In the next paragraph you can learn how handle Validation promise object

After built-in validation you should do something. How? Using callback_then and callback_catch functions.

What you have to do is just create functions and set parameters with their names.

• callback_then must receive one argument of type Promise.

• callback_catch must receive one argument of type string

The result should be something like that:

<head>
    ...
    <!-- IMPORTANT!!! remember CSRF token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    ...
    <script type="text/javascript">
        function callbackThen(response){
        	// read HTTP status
            console.log(response.status);
            
            // read Promise object
            response.json().then(function(data){
                console.log(data);
            });
        }
        function callbackCatch(error){
            console.error('Error:', error)
        }   
    </script>    
    ...
    {!! htmlScriptTagJsApiV3([
        'action' => 'homepage',
        'callback_then' => 'callbackThen',
        'callback_catch' => 'callbackCatch'
    ]) !!}    
</head>

As just said you can handle validation with your own function. To do that you have to write your function and set custom_validation parameter with its name.

The result should be something like that:

<head>
    ...
    <!-- IMPORTANT!!! remember CSRF token --> 
    <meta name="csrf-token" content="{{ csrf_token() }}">
    ...
    <script type="text/javascript">
        function myCustomValidation(token) {
            // do something with token 
        }
    </script>    
    ...
    {!! htmlScriptTagJsApiV3([
        'action' => 'homepage',
        'custom_validation' => 'myCustomValidation'
    ]) !!}    
</head>