Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dutchcodingcompany/livewire-recaptcha
Add Livewire reCAPTCHA form validation to your components.
https://github.com/dutchcodingcompany/livewire-recaptcha
laravel livewire recaptcha-v3
Last synced: about 1 month ago
JSON representation
Add Livewire reCAPTCHA form validation to your components.
- Host: GitHub
- URL: https://github.com/dutchcodingcompany/livewire-recaptcha
- Owner: DutchCodingCompany
- Created: 2024-05-31T10:21:59.000Z (6 months ago)
- Default Branch: development
- Last Pushed: 2024-07-08T03:26:21.000Z (4 months ago)
- Last Synced: 2024-10-01T09:22:10.833Z (about 1 month ago)
- Topics: laravel, livewire, recaptcha-v3
- Language: PHP
- Homepage:
- Size: 26.4 KB
- Stars: 8
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Livewire ReCAPTCHA v3/v2/v2-invisible
[](https://packagist.org/packages/dutchcodingcompany/livewire-recaptcha)
[](https://github.com/dutchcodingcompany/livewire-recaptcha/actions?query=workflow%3Arun-tests+branch%3Amain)
[](https://github.com/dutchcodingcompany/livewire-recaptcha/actions?query=workflow%3A"Check+%26+fix+styling"+branch%3Amain)
[](https://packagist.org/packages/dutchcodingcompany/livewire-recaptcha)
This package provides a custom Livewire directive to protect your Livewire functions with a _Google reCAPTCHA (v2 + v2
invisible + v3)_ check.
## Installation
```shell
composer require dutchcodingcompany/livewire-recaptcha
```
## Configuration
Read https://developers.google.com/recaptcha/intro on how to create your own key pair for the specific ReCaptcha
version you are going to implement.
This package supports the following versions. Note that each version requires a different sitekey/secretkey pair:
| **Version** | **Docs** | **Notes** |
|----------------------|-------------------------------------------------------------------|-----------------------------|
| **v3** (recommended) | [V3 Docs](https://developers.google.com/recaptcha/docs/v3) | |
| **v2** | [V2 Docs](https://developers.google.com/recaptcha/docs/display) | |
| **v2 invisible** | [V2 Docs](https://developers.google.com/recaptcha/docs/invisible) | Use `'size' => 'invisible'` |
Your options should reside in the `config/services.php` file:
```php
// V3 config:
'google' => [
'recaptcha' => [
'site_key' => env('GOOGLE_RECAPTCHA_SITE_KEY'),
'secret_key' => env('GOOGLE_RECAPTCHA_SECRET_KEY'),
'version' => 'v3',
'score' => 0.5, // An integer between 0 and 1, that indicates the minimum score to pass the Captcha challenge.
],
],
// V2 config:
'google' => [
'recaptcha' => [
'site_key' => env('GOOGLE_RECAPTCHA_SITE_KEY'),
'secret_key' => env('GOOGLE_RECAPTCHA_SECRET_KEY'),
'version' => 'v2',
'size' => 'normal', // 'normal', 'compact' or 'invisible'.
'theme' => 'light', // 'light' or 'dark'.
],
],
```
#### Component
In your Livewire component, at your form submission method, add the `#[ValidatesRecaptcha]` attribute:
```php
use Livewire\Component;
class SomeComponent extends Component
{
use DutchCodingCompany\LivewireRecaptcha\ValidatesRecaptcha;
// (optional) Set a response property on your component.
// If not given, the `gRecaptchaResponse` property is dynamically assigned.
public string $gRecaptchaResponse;
#[ValidatesRecaptcha]
public function save(): mixed
{
// Your logic here will only be called if the captcha passes...
}
}
```
For fine-grained control, you can pass a custom secret key and minimum score (applies only to V3) using:
```php
#[ValidatesRecaptcha(secretKey: 'mysecretkey', score: 0.9)]
```
#### View
On the view side, you have to include the Blade directive `@livewireRecaptcha`. This adds two scripts to the page,
one for the reCAPTCHA script and one for the custom Livewire directive to hook into the form submission.
Preferrably these scripts are only added to the page that has the Captcha-protected form (alternatively, you can add
the `@livewireRecaptcha` directive on a higher level, lets say your layout).
Secondly, add the new directive `wire:recaptcha` to the form element that you want to protect.
```html
@if($errors->has('gRecaptchaResponse'))
{{ $errors->first('gRecaptchaResponse') }}
@endif
Submit
@livewireRecaptcha
```
You can override any of the configuration values using:
```html
@livewireRecaptcha(
version: 'v2',
siteKey: 'abcd_efgh-hijk_LMNOP',
theme: 'dark',
size: 'compact',
)
```
#### Finishing up
The Google ReCAPTCHA validation will automatically occur before the actual form is submitted. Before the `save()` method
is executed, a serverside request will be sent to Google to verify the Captcha challenge. Once the reCAPTCHA
response has been successful, your actual Livewire component method will be executed.
#### Error handling
When an error occurs with the Captcha validation, a ValidationException is thrown for the key `gRecaptchaResponse`.
There is a translatable error message available under `'livewire-recaptcha::recaptcha.invalid_response'`.