Blade does not support background script and missing ID check if the id not exist about laravel-google-recaptcha-v3

[RyanDaDeng]

I just wake up. I am looking into it soon

[xalunda]

Hi @HdbKing

Looks like you have an issue with your Blade variable field being empty.

This plugin requires a DOM element with a given ID in order to work.

I'm not sure why you need a variable ID, but I suggest you double check your controller is correctly setting up those needed vars.

[HdbKing]

Hi @HdbKing

Looks like you have an issue with your Blade variable field being empty.

This plugin requires a DOM element with a given ID in order to work.

I'm not sure why you need a variable ID, but I suggest you double check your controller is correctly setting up those needed vars.

If you use layout , render must in layout (
Include Template script in your bottom/header of your page, params should follow 'ID'=>'Action', e.g.
),

when you open other page, Some element will never exists in current page.
It is not a controller code problem.

[RyanDaDeng]

@HdbKing I have updated the package, the previous approach does not support background script (in your case, the render needs to always have a value to populate the action, otherwise it throws errors if the script cannot find the proper element id.)

I have added a new feature which allows the user to run the script on every page.

Please read the latest update and update your version to be >= ~2.2.6: https://github.com/RyanDaDeng/laravel-google-recaptcha-v3#blade-basic-usage

The render() function will only be applied to your form in the same file.

The background() function should be included at your home/layout page.

Also remember publish the config file again.

Note:
The root issue here is that Google reCAPTCHA api script only support onload() callback function to change display style and populate multiple actions on the same page, this requires Action to be defined as well as onload() function. If not use this feature, the script will be loaded slow and the custom style won't work.

However, if the user wants to run the script without action, the above approach won't work as it takes variables.

In order to resolve this issue, we might need to treat them separately. The function that I added (ReCaptchaV3::background()) which just simply loads google script and also check if any script has been loaded before, if the script has been loaded, the background() function will just return empty to avoid loading script multiple times in case of conflicting with Action approach.

Thank you for using the package.

Please let me know if you have any confusions or suggestions. I am willing to make the changes.

[HdbKing]

@HdbKing I have updated the package, the previous approach does not support background script (in your case, the render needs to always have a value to populate the action, otherwise it throws errors if the script cannot find the proper element id.)

I have added a new feature which allows the user to run the script on every page.

Please read the latest update and update your version to be >= ~2.2.6: https://github.com/RyanDaDeng/laravel-google-recaptcha-v3#blade-basic-usage

The render() function will only be applied to your form in the same file.

The background() function should be included at your bottom of your home/layout page.

Also remember publish the config file again.

Note:
The root issue here is that Google reCAPTCHA api script only support onload() callback function to change display style and populate multiple actions on the same page, this requires Action to be defined as well as onload() function. If not use this feature, the script will be loaded slow and the custom style won't work.

However, if the user wants to run the script without action, the above approach won't work as it takes variables.

In order to resolve this issue, we might need to treat them separately. The function that I added (ReCaptchaV3::background()) which just simply loads google script and also check if any script has been loaded before, if the script has been loaded, the background() function will just return empty to avoid loading script multiple times in case of conflicting with Action approach.

Thank you for using the package.

Please let me know if you have any confusions or suggestions. I am willing to make the changes.

Still don't work. because onloadCallback still run firstly or same time, js don't like php , {{$field}} = null,
get same error
You still need

if (document.getElementById('{{$field}}')) {
let client{{$field}} = grecaptcha.render('{{$field}}'
let client{{$field}} = grecaptcha.render('{{$field}}', {

The problem is if grecaptcha.render(null)

script will stop
foreach will stop

And if you layout has render his form, script will stop in other page with render('said already rendered')

[RyanDaDeng]

@HdbKing Hmm, I am a bit confused. Can you provide me with your current Blade layout structure along with the script usage?

The render() function needs to be always binding to form. You should not put it explicitly. (Not head or bottom anymore after previous fix)

If you want it run globally, you then need to include background() function in your layout page.

You can only have one render() function in your form as well.

[HdbKing]

@HdbKing Hmm, I am a bit confused. Can you provide me with your current Blade layout structure along with the script usage?

The render() function needs to be always binding to form. You should not put it explicitly. (Not head or bottom anymore after previous fix)

If you want it run globally, you then need to include background() function in your layout page.

You can only have one render() function in your form as well.

In fact it is same with auth:make structure .

wwww.abc.com/ added some form
wwww.abc.com/login added some form

layout.blade.php

some form
///header

@yield('index')

///footer

{!! GoogleReCaptchaV3::render([
...
'navform_id'=>'navform',
'register_id'=>'register',
'changepass_id'=>'changepass',
...
]) !!}
{!! GoogleReCaptchaV3::background() !!}

---

index.blade.php
@extends('layouts.layout')
@section('index')

some form

@endsection

[RyanDaDeng]

@HdbKing I see the problems there, however, I just come up with a perfect solution for it. Give me some minutes, I am running some tests

[RyanDaDeng]

@HdbKing Hello, please upgrade version again to be >= ~2.2.11 and publish the config file (sorry about that).

in your layout.blade.php, remove {!! GoogleReCaptchaV3::background() !!} and use {!! GoogleReCaptchaV3::init() !!}

Previous:

Initially, the package does not allow all form arrays in one single place in layout.blade.php, e.g. register form located at register.blade.php, you need to include it in only that file. (Sorry for my previous wrong instruction)

However ----,

New:
I have added if() check if the field exists as you suggested before, so you can either include everything in layout page or adding them separately in different page. (check updated documentation)

Basically, after upgrade, you just need to change background() to init() and placed it in very bottom of page, everything should work as expected.

Alternatively,
You can do this as well:

<form method="POST" action="/verify">
   {!!  GoogleReCaptchaV3::renderField('contact_us_id','contact_us_action') !!}
    <input type="submit" value="submit">
</form>

[RyanDaDeng]

@HdbKing Also, it's better to check the updated README, let me know if this fix your issue (I believe so ^.^) I think the package is very complete now.

[HdbKing]

@HdbKing Hello, please upgrade version again to be >= ~2.2.11 and publish the config file (sorry about that).

in your layout.blade.php, remove {!! GoogleReCaptchaV3::background() !!} and use {!! GoogleReCaptchaV3::init() !!}

Previous:

Initially, the package does not allow all form arrays in one single place in layout.blade.php, e.g. register form located at register.blade.php, you need to include it in only that file. (Sorry for my previous wrong instruction)

However ----,

New:
I have added if() check if the field exists as you suggested before, so you can either include everything in layout page or adding them separately in different page. (check updated documentation)

Basically, after upgrade, you just need to change background() to init() and placed it in very bottom of page, everything should work as expected.

Alternatively,
You can do this as well:

<form method="POST" action="/verify">
   {!!  GoogleReCaptchaV3::renderField('contact_us_id','contact_us_action') !!}
    <input type="submit" value="submit">
</form>

is new version

{!! GoogleReCaptchaV3::renderField('contact_us_id','contact_us_action') !!}
equal to

old version

+ {!! GoogleReCaptchaV3::renderField('contact_us_id','contact_us_action') !!} ???

[RyanDaDeng]

@HdbKing That is alternative method, which is placed within the form. In your case, you just need to change background() to init(), everything should work.

[HdbKing]

@HdbKing That is alternative method, which is placed within the form. In your case, you just need to change background() to init(), everything should work.

yes,it's worked.

Could you have more detail with "score_comparision"?

If "score" less than "threshold" , what will happen? I don't find any detail in readme

[RyanDaDeng]

It will return false and fails ReCAPTCHA
please play it a bit around.

[RyanDaDeng]

I will close this ticket, if you have any other problems please create a new ticket.

Happy coding.