Open powolnymarcel opened 7 years ago
+1
I actually thing you can allready use it by just getting new api keys and data-size="invisible"
EDIT: Language :D
đź‘Ť
Would be nice to have invisible reCaptcha outta the box.
@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
@chiniese1904 ,yes i didnt test it cause my contact form is not even ready. But i think u are right.
data-size=invisible will hide the reCaptcha, but also cause the forms to not validate
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.
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
Found this and it's working :
or just use
{!! NoCaptcha::display(['data-size' => 'invisible']) !!}
instead of
{!! NoCaptcha::display([]) !!}
but yes using a button would implements it correctly
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
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.
Will you update this module to the new invisible reCaptcha (out today) ?