Para poner en livewire un recaptcha v2, se puede hacer de dos formas.
Poniendo directamente el texto:
<div id="captcha" class="mt-4" wire:ignore></div>
@error('captcha')
<p class="mt-3 text-sm text-red-600 text-left">
{{ $message }}
</p>
@enderror
<script src="https://www.google.com/recaptcha/api.js?onload=handle&render=explicit"
async
defer>
</script>
<script>
var handle = function(e) {
widget = grecaptcha.render('captcha', {
'sitekey': '{{ env('RECAPTCHAV2_SITEKEY') }}',
'theme': 'light', // you could switch between dark and light mode.
'callback': verify
});
}
var verify = function (response) {
@this.set('captcha', response)
}
</script>Copiando directamente el código completo
Si hubiera problemas porque hay «modals raros» habría que utilizar esta segunda versión, ya que hay que cargar el script de una manera especial. El div como tal es lo mismo pero cambia el javascript
En la vista:
<script>
var handle = function(e) {
widget = grecaptcha.render('captcha', {
'sitekey': '{{ env('RECAPTCHAV2_SITEKEY') }}',
'theme': 'light', // you could switch between dark and light mode.
'callback': verify
});
}
var verify = function (response) {
@this.set('captcha', response)
}
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
{{-- Para abrir el modal de alerta de precios --}}
var myModal_alerta = new bootstrap.Modal(document.getElementById('modal_alerta_precio'));
window.addEventListener('abrir_modal_alerta_precio', event => {
var script = document.createElement('script');
script.src = 'https://www.google.com/recaptcha/api.js?onload=handle&render=explicit';
document.body.appendChild(script);
myModal_alerta.show();
});
window.addEventListener('cerrar_modal_alerta_precio', event => {
myModal_alerta.hide();
var alerta_precio = new bootstrap.Modal('#aviso_alerta_precio');
alerta_precio.show();
});
{{-- /Para abrir el modal de alerta de precios --}}
});
Y luego en el componente
public $captcha = null;
public function updatedCaptcha($token)
{
$response = Http::post(
'https://www.google.com/recaptcha/api/siteverify?secret='.
env('CAPTCHA_SECRET_KEY').
'&response='.$token
);
$success = $response->json()['success'];
if (! $success) {
throw ValidationException::withMessages([
'captcha' => __('Google thinks, you are a bot, please refresh and try again!'),
]);
} else {
$this->captcha = true;
}
}
// validate the captcha rule
protected function rules()
{
return [
'captcha' => ['required'],
// ...
];
}
Cogido de referencia de la web: https://coderflex.com/blog/enhancing-security-and-user-experience-leveraging-recaptcha-with-laravel-and-livewire#step-9-add-google-recaptcha