Stars: 253
Forks: 39
Pull Requests: 51
Issues: 44
Watchers: 5
Last Updated: 2022-05-07 12:53:02
It's probably the best Laravel Package for Google reCAPTCHA v3. Vue component supported.
License: MIT License
Languages: PHP, Vue, Blade
A star would be a nice encouragement. ^.^
If you want to use v2, please go to: https://github.com/RyanDaDeng/laravel-google-recaptcha-v2
If you only need to use Vue component, feel free to copy it.
Demo code: https://github.com/RyanDaDeng/laravel-google-recaptcha-v3/wiki/Simple-Demo
Google reCAPTCHA v3 is a new mechanism to verify whether the user is bot or not.
reCAPTCHA v3 is intended for power users, site owners that want more data about their traffic, and for use cases in which it is not appropriate to show a challenge to the user.
For example, a registration page might still use reCAPTCHA v2 for a higher-friction challenge, whereas more common actions like sign-in, searches, comments, or voting might use reCAPTCHA v3.
Please check Google site: https://developers.google.com/recaptcha/docs/faq
This package requires the following dependencies:
Laravel >= 5.x
If you want to use Validation Class your Laravel version needs to be >= 5.5
php > 5
Please ensure that you have read basic information from Google reCAPTCHA v3.
Demo code: https://github.com/RyanDaDeng/laravel-google-recaptcha-v3/wiki/Simple-Demo
Via Composer
$ composer require timehunter/laravel-google-recaptcha-v3 "~2.5" -vvv
If your Laravel framework version <= 5.4, please register the service provider under your config file: /config/app.php, otherwise please skip it.
'providers'=[
....,
TimeHunter\LaravelGoogleReCaptchaV3\Providers\GoogleReCaptchaV3ServiceProvider::class
]
And also
'aliases'=[
....,
'GoogleReCaptchaV3'=> TimeHunter\LaravelGoogleReCaptchaV3\Facades\GoogleReCaptchaV3::class
]
If your Laravel framework version is >= 5.5, just run the following command to publish config.
$ php artisan vendor:publish --provider="TimeHunter\LaravelGoogleReCaptchaV3\Providers\GoogleReCaptchaV3ServiceProvider" --tag=googlerecaptchav3.config
For vue component:
$ php artisan vendor:publish --provider="TimeHunter\LaravelGoogleReCaptchaV3\Providers\GoogleReCaptchaV3ServiceProvider" --tag=googlerecaptchav3.vuejs
After installation, you should see a googlerecaptchav3.php in your app/config folder, and vue component under js/components/googlerecaptchav3 folder.
For multi lang:
$ php artisan vendor:publish --provider="TimeHunter\LaravelGoogleReCaptchaV3\Providers\GoogleReCaptchaV3ServiceProvider" --tag=googlerecaptchav3.lang
A lang folder will be created under /resources/lang/vendor/GoogleReCaptchaV3/*
Please register all details in config for host_name, site_key, secret_key and site_verify_url.
Register credentials in .env:
RECAPTCHA_V3_SECRET_KEY=
RECAPTCHA_V3_SITE_KEY=
Specify your Score threshold and action in 'setting', e.g.
'setting' = [
[
'action' => 'contact_us', // Google reCAPTCHA required paramater
'threshold' => 0.2, // score threshold
'score_comparison' => false // if this is true, the system will do score comparsion against your threshold for the action
],
[
'action' => 'signup',
'threshold' => 0.2,
'score_comparison' => true
],
]
Note: if you want to enable Score Comparision, you also need to enable is_score_enabled to be true.
...
'is_score_enabled' = true
...
For score comparision, all actions should be registered in googlerecaptchav3 config file under 'setting' section.
For more details please check comments in config file.
You can directly use registered facade service by calling the following methods.
Example Usage
GoogleReCaptchaV3::setAction($action)->verifyResponse($value,$ip = null);
GoogleReCaptchaV3::verifyResponse($value,$ip)->getMessage();
GoogleReCaptchaV3::verifyResponse($value)->isSuccess();
GoogleReCaptchaV3::verifyResponse($value)->toArray();
GoogleReCaptchaV3::verifyResponse(
$request->input('g-recaptcha-response'),
$request->getClientIp()
)
->getMessage()
GoogleReCaptchaV3::setAction($action)->verifyResponse($value)->isSuccess();
If you manually assign a value to setScore($score), the code will fully skip your config file and force to check the score.
GoogleReCaptchaV3::setScore($score)
->setAction($action)
->verifyResponse(
$request->input('g-recaptcha-response'),
$request->getClientIp()
)
->getMessage()
You can use provided Validation object to verify your reCAPTCHA.
use TimeHunter\LaravelGoogleReCaptchaV3\Validations\GoogleReCaptchaV3ValidationRule;
$rule = [
'g-recaptcha-response' => [new GoogleReCaptchaV3ValidationRule('action_name')]
];
Include the API script at the bottom of your layout page
{!! GoogleReCaptchaV3::init() !!}
To add a nonce for content security, pass a params array with your pages nonce.
{!! GoogleReCaptchaV3::init([
'nonce' => nonce(),
]) !!}
It's recommended to include reCAPTCHA v3 on every page which can help you get the most context about interactions for analytics. You just need to enable the config:
...
'background_badge_display' => true, // if false, the badge will be invisible, if true the badge shows at bottom right.
'background_mode' => false, // if true, the script will run on every page (ensure that GoogleReCaptchaV3::init() is placed on layout or homepage)
...
If the page has not detected any Action or duplicate google script, the background mode will be enabled.
There are three methods to populate the reCAPTCHA within the form.
Method one - render():
[
$id=>$action , $id=>$action ...
]
{!! GoogleReCaptchaV3::render(['contact_us_id'=>'contact_us', 'signup_id'=>'signup']) !!}
<form method="POST" action="/verify">
<div id="contact_us_id"></div> // add div with id
<input type="submit" value="submit">
</form>
<form method="POST" action="/verify">
<div id="signup_id"></div>
<input type="submit" value="submit">
</form>
{!! GoogleReCaptchaV3::render(['contact_us_id'=>'contact_us', 'signup_id'=>'signup']) !!}
Method two - renderOne():
GoogleReCaptchaV3::renderOne($id,$action);
{!! GoogleReCaptchaV3::renderOne('contact_us_id','contact_us') !!}
<form method="POST" action="/verify">
<div id="contact_us_id"></div> // add div with id
<input type="submit" value="submit">
</form>
{!! GoogleReCaptchaV3::renderOne('contact_us_id','contact_us') !!}
Method three - renderField():
GoogleReCaptchaV3::renderField($id,$action,$class,$style)
{!! GoogleReCaptchaV3::renderField('contact_us_id','contact_us_action') !!}
<form method="POST" action="/verify">
{!! GoogleReCaptchaV3::renderField('contact_us_id','contact_us_action') !!}
<input type="submit" value="submit">
</form>
If your settings were not reflected, please run php artisan config:cache to clear cache.
Inline
[
...
'inline' => true
...
]
Invisible
This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.
Corner
Custom
The package provides two handy Javascript functions for you to get recaptcha response and refresh recaptcha as needed.
refreshReCaptchaV3(fieldId,actionName) - this function will reset the response whenever your ajax response is returned.
getReCaptchaV3Response - this function helps you to get recaptcha response by id
For example:
<script>
$("#test").click(function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '/verify',
data: {
'g-recaptcha-response':getReCaptchaV3Response('contact_id')
},
success: function (data) {
refreshReCaptchaV3('contact_id','contact');
},
error: function(err){
refreshReCaptchaV3('contact_id','contact');
}
});
});
</script>
The package provides a lightweight vue component. You need to publish the vue component before playing around it.
$ php artisan vendor:publish --provider="TimeHunter\LaravelGoogleReCaptchaV3\Providers\GoogleReCaptchaV3ServiceProvider" --tag=googlerecaptchav3.vuejs
The file will be created under js/components/googlerecaptchav3/GoogleReCaptchaV3.vue, you have full control and modification ability on this file.
The Blade way is no longer useful if you use Vue. We need to manage to assign site key by ourselves. The component supports props below:
Supported: siteKey, id, inline and action, check the original file to see the details.
<google-re-captcha-v3
v-model="gRecaptchaResponse"
ref="captcha"
site-key="Your Site Key String Here"
id="contact_us_id"
inline
action="contact_us"
></google-re-captcha-v3>
There are two ways you can bind site key to the component.
<template>
<div>
<form @submit.prevent="submit">
<div>
<google-re-captcha-v3
v-model="form.gRecaptchaResponse"
ref="captcha"
:site-key="mySiteKeyVariable"
id="contact_us_id"
inline
action="contact_us"
></google-re-captcha-v3>
</div>
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
import GoogleReCaptchaV3 from '../../components/googlerecaptchav3/GoogleReCaptchaV3';
// location might be diff to your case, ensure that your component location is right
export default {
components: {
GoogleReCaptchaV3
},
data() {
return {
form: {
gRecaptchaResponse: null
},
mySiteKeyVariable: 'Your Site Key String',
}
},
methods: {
submit() {
axios.post('/verify', this.form).then(
response => {
this.$refs.captcha.execute(); // every time you submit, the reCAPTCHA token needs to be refreshed
}
).catch(
error => {
this.$refs.captcha.execute(); // every time you submit, the reCAPTCHA token needs to be refreshed
});
}
}
}
</script>
Please remember to refresh token every time you submit the form if needed:
this.$refs.captcha.execute();
Alternatively, I believe most of cases your site key will never be changed, so you could just modify the original published component to have sitekey hard-coded in.
For instance, open published file and find code below:
....
siteKey: {
type: String,
required: false, // set to true if you don't want to store the siteKey in this component
default: 'Your Site Key Here' // set siteKey here if you want to store it in this component
},
....
For some users, they might store the config details in their own storage e.g database. You can create your own class and implement:
TimeHunter\LaravelGoogleReCaptchaV3\Interfaces\ReCaptchaConfigV3Interface
Remember to register it in your own service provider
$this->app->bind(
ReCaptchaConfigV3Interface::class,
YourOwnCustomImplementation::class
);
The package has two default options to verify: Guzzle and Curl, if you want to use your own request method, You can create your own class and implement
TimeHunter\LaravelGoogleReCaptchaV3\Interfaces\RequestClientInterface
Remember to register it in your own service provider
$this->app->bind(
RequestClientInterface::class,
YourOwnCustomImplementation::class
);
Thank you for the following contributors, You guys are the BEST!
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
MIT. Please see the license file for more information.