Implementation of invisible reCaptcha

[powolnymarcel]

Will you update this module to the new invisible reCaptcha (out today) ?

[alanaasmaa]

+1

I actually thing you can allready use it by just getting new api keys and data-size="invisible"

EDIT: Language :D

[base-zero]

👍

Would be nice to have invisible reCaptcha outta the box.

[chrisbbreuer]

@alanaasmaa I don't believe it will work just like that. It should throw an error saying The g-recaptcha-response field is required., right? Have you gotten it to work? I will try it out later and if it such an easy fix I will send create a PR

[alanaasmaa]

@chiniese1904 ,yes i didnt test it cause my contact form is not even ready. But i think u are right.

[alvinbakker]

data-size=invisible will hide the reCaptcha, but also cause the forms to not validate

[alanaasmaa]

I got it working.

In my HTML:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
                    <script>
                       function onSubmit(token) {
                         document.getElementById("send-message").submit();
                       }
                     </script>
                    <button class="g-recaptcha" data-sitekey="6LfBqRgUAAAAAFVLb2qxCIGIZmY2AmoHNJKtWBk3" data-size="invisible" data-callback="onSubmit">
                        Lähetä
                    </button>

and in php i didnt change anything.

[chrisbbreuer]

It is not complicated to get it to work, especially when it is this well documented and easy. For not as experienced users it is a little could be a little more complicated to include, though.

Let me explain my approach and my scenario.

My form used to look like this and I am sure it looks familiar to a lot of your forms:

<form id="register-form" class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
    {{ csrf_field() }}
    <input type="text" name="username" placeholder="Username" value="{{ old('username') }}">

    ...

    {!! app('captcha')->display() !!}
    <button id="submit" class="btn btn-primary btn-block" type="submit">Register</button>
</form>

With the invisible captcha the goal is to essentially combine

    {!! app('captcha')->display() !!}
    <button id="submit" class="btn btn-primary btn-block" type="submit">Register</button>

So, what you can do is as follows: {!! app('captcha')->display() !!} outputs a div-container, so let's change NoCaptcha.php slightly https://github.com/anhskohbo/no-captcha/blob/master/src/NoCaptcha.php#L58

Line 58 is currently: $html .= '<div class="g-recaptcha"'.$this->buildAttributes($attributes).'></div>'; and it should be $html .= '<button class="g-recaptcha"'.$this->buildAttributes($attributes).'></button>';

Now, in my case, I need some styling for my submit button which has these classes: btn btn-primary btn-block. I also need it the button to display "Register". I could hard code those classes and "Register" in $html, but I preferred to inject them via jQuery, so when updates of NoCaptcha get released, I don't constantly have to hard code those classes back into NoCaptcha.php

The jQuery looks as follows and can get inserted anywhere as long as jQuery gets loaded before:

$(".g-recaptcha").addClass("btn btn-primary btn-block").html("Register");

function onSubmit(token) {
    $("#register-form").submit();
}

My final form looks like this:

<form id="register-form" class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
    {{ csrf_field() }}
    <input type="text" name="username" placeholder="Username" value="{{ old('username') }}">

    ...

    {!! app('captcha')->display($attributes = ['data-badge' => 'bottomleft', 'data-callback' => 'onSubmit']) !!}
    {{--<button id="submit" class="btn btn-primary btn-block" type="submit">Register</button>--}}
</form>

@section('scripts')
<script>
    $(".g-recaptcha").addClass("btn btn-primary btn-block").html("Register");

    function onSubmit(token) {
        $("#register-form").submit();
    }
</script>
@endsection

[powolnymarcel]

Found this and it's working :

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

[Grummfy]

or just use

{!! NoCaptcha::display(['data-size' => 'invisible']) !!}

instead of

{!! NoCaptcha::display([]) !!}

but yes using a button would implements it correctly

[soutorafaelbr]

or just use

{!! NoCaptcha::display(['data-size' => 'invisible']) !!}

instead of

{!! NoCaptcha::display([]) !!}

but yes using a button would implements it correctly

if a i do this {!! NoCaptcha::display(['data-size' => 'invisible']) !!}, should i remove the g-recaptcha validation? because it's always failing

[timbogdanov]

or just use

{!! NoCaptcha::display(['data-size' => 'invisible']) !!}

instead of

{!! NoCaptcha::display([]) !!}

but yes using a button would implements it correctly

That approach makes little to no sense.