srdante/invisible-recaptcha

Invisible reCAPTCHA For Laravel.

v1.8.5 2018-11-10 20:54 UTC

README

reCAPTCHA

Explanation

This is a fork of albertcht/invisible-recaptcha with a little difference. On albertcht version, you use render() function to get HTML & JS at the same time. You need to insert this function inside of a form, but with you do this with Vue.js, you will have a problem. You can't put JS code inside Vue.js body. This version remove render() and add renderHTML() and renderJS().

Why Invisible reCAPTCHA?

Invisible reCAPTCHA is an improved version of reCAPTCHA v2(no captcha). In reCAPTCHA v2, users need to click the button: "I'm not a robot" to prove they are human. In invisible reCAPTCHA, there will be not embed a captcha box for users to click. It's totally invisible! Only the badge will show on the buttom of the page to hint users that your website is using this technology. (The badge could be hidden, but not suggested.)

Notice

  • The master branch doesn't support multi captchas feature, please use multi-forms branch if you need it. (Most of the time you are misusing recaptcha when you try to put multiple captchas in one page.)

Installation

composer require srdante/invisible-recaptcha

Laravel >= 5.5

Configuration

Before you set your config, remember to choose invisible reCAPTCHA while applying for keys.

Add INVISIBLE_RECAPTCHA_SITEKEY, INVISIBLE_RECAPTCHA_SECRETKEY to .env file.

// required
INVISIBLE_RECAPTCHA_SITEKEY={siteKey}
INVISIBLE_RECAPTCHA_SECRETKEY={secretKey}

// optional
INVISIBLE_RECAPTCHA_BADGEHIDE=false
INVISIBLE_RECAPTCHA_DATABADGE='bottomright'
INVISIBLE_RECAPTCHA_TIMEOUT=5
INVISIBLE_RECAPTCHA_DEBUG=false

There are three different captcha styles you can set: bottomright, bottomleft, inline

If you set INVISIBLE_RECAPTCHA_BADGEHIDE to true, you can hide the badge logo.

You can see the binding status of those catcha elements on browser console by setting INVISIBLE_RECAPTCHA_DEBUG as true.

Usage

Before you render the captcha, please keep those notices in mind:

  • There can only be one submit button in your form.
  • renderJS() function was projected to be used on final of <body> tag
  • renderHTML() function needs to be called within a form element.
  • You have to ensure the type attribute of your submit button has to be submit.

Exempla : <button type="submit">Click</button>

Display reCAPTCHA in Your View
// this will render the html divs 
{!! app('captcha')->renderHTML(); !!}

// or you can use this in blade
@captchaHTML


// this will render the javascript
{!! app('captcha')->renderJS(); !!}

// or you can use this in blade
@captchaJS

With custom language support:

{!! app('captcha')->renderHTML(); !!}

// or you can use this in blade
@captchaHTML


// this will render the javascript
{!! app('captcha')->renderJS('en'); !!}

// or you can use this in blade
@captchaJS('en')
Validation

Add 'g-recaptcha-response' => 'required|captcha' to rules array.

$validate = Validator::make(Input::all(), [
    'g-recaptcha-response' => 'required|captcha'
]);

Take Control of Submit Function

Use this function only when you need to take all control after clicking submit button. Recaptcha validation will not be triggered if you return false in this function.

_beforeSubmit = function(e) {
    console.log('submit button clicked.');
    // do other things before captcha validation
    // e represents reference to original form submit event
    // return true if you want to continue triggering captcha validation, otherwise return false
    return false;
}

Customize Submit Function

If you want to customize your submit function, for example: doing something after click the submit button or changing your submit to ajax call, etc.

The only thing you need to do is to implement _submitEvent in javascript

_submitEvent = function() {
    console.log('submit button clicked.');
    // write your logic here
    // submit your form
    _submitForm();
}

Here's an example to use an ajax submit (using jquery selector)

_submitEvent = function() {
    $.ajax({
        type: "POST",
        url: "{{route('message.send')}}",
         data: {
            "name": $("#name").val(),
            "email": $("#email").val(),
            "content": $("#content").val(),
            // important! don't forget to send `g-recaptcha-response`
            "g-recaptcha-response": $("#g-recaptcha-response").val()
        },
        dataType: "json",
        success: function(data) {
            // success logic
        },
        error: function(data) {
            // error logic
        }
    });
};

Example Repository

Repo: https://github.com/albertcht/invisible-recaptcha-example

This repo demonstrates how to use this package with ajax way.

Showcases

Credits