Seleccionar página

Laravel #11 – Validación de captchas (captcha validation)

Dic 7, 2016 | Backend, Laravel, PHP | 0 Comentarios

Laravel #11 – Validación de captchas (captcha validation)

Es recomendable incluir en los formularios de envío de datos, un captcha para evitar el spam. En este post, validaremos la información del captcha enviado desde el formulario de registro de nuevos usuarios. Para ello, vamos a seguir varios pasos:

  • Obtener las claves públicas y privadas de Google Recaptcha.
  • Instalar el paquete «google/recaptcha».
  • Crear un Trait.
  • Crear una validación personalizada donde usaremos el trait.
  • Añadir el campo para validarlo en los FormRequest/controladores donde lo requieran.
  • Añadir la dependencia javascript en la vista maestra del proyecto.
  • Usarlo en un formulario, por ejemplo, en el de registro de usuario en nuestra aplicacion web.

Si estamos en pruebas, registramos «localhost» como dominio y obtendremos la siguiente pantalla con nuestras claves:

Registramos nuestra App en https://www.google.com/recaptcha.

Ahora vamos a guardar las claves generadas por Google en el archivo de variables de entorno y usarlas de la siguiente forma:

  • La «Secret Key» la usaremos en el CaptchaTrait.
  • La «Site Key» la usaremos en la vista de registro de usuarios.

.env
INI
1
2
3
4
5
# Secret key
RECAPTCHA_SECRET=6LfqYA4UAAAAAMF6-42FKx5AO_hSLHFwOwTcFMEI
 
# Site key
RECAPTCHA_SITE=6LfqYA4UAAAAAOyzudzi22rXJGzvOuZOlEmenD9W

Instalamos el paquete de reCaptcha en nuestro proyecto:

Comando de Shell
Shell
1
composer require google/recaptcha

Ahora, a por el Trait:

app\Traits\CaptchaTrait.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
 
namespace App\Traits;
 
use ReCaptcha\ReCaptcha;
 
trait CaptchaTrait {
 
    public function captchaCheck($value = null)
    {
        if($value){
 
            $remoteip = $_SERVER['REMOTE_ADDR'];
            $secret   = env('RECAPTCHA_SECRET');
 
            $recaptcha = new ReCaptcha($secret);
 
            $resp = $recaptcha->verify($value, $remoteip);
            
            if ($resp->isSuccess()) {
                return true;
            } else {
                return false;
            }
        }else{
            return false;
        }
    }
}

Una vez tenemos el Trait listo para usar, vamos a crear el la validación personalizada «captcha» para ser usado en las validaciones, ya sean en FormRequest o en los controladores:

app\Providers\AppServiceProvider.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
use Illuminate\Support\ServiceProvider;
use App\Traits\CaptchaTrait;
class AppServiceProvider extends ServiceProvider
{
    use CaptchaTrait;
    public function boot()
    {
        \Validator::extend('captcha', function($attribute, $value, $parameters, $validator) {
            if(!empty($value) && $this->captchaCheck($value) == true)
            {
                return true;
            }
            return false;
        });
    }
}

A continuación, añadimos la validación personalizada «captcha» con el campo que viene desde el cliente «g-recaptcha-response» a las reglas del método «signup» del «TokenAuthController» (línea 9). Cuando estemos en la parte Angular, haremos mención a este post y renombraremos ese campo a simplemente «captcha»:
app\Http\Controllers\TokenAuthController.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
public function signup(Request $request)
    {
        // validación de los datos del formulario
        $this->validate($request, [
            'name'                 => 'required|string|min:3|max:15',
            'email'                => 'required|email|max:255|unique:users',
            'password'             => 'required|min:4|max:60|confirmed',
            'timezone'             => 'max:50',
            'g-recaptcha-response' => 'required|captcha',
        ], $messages = []);
        . . . .
    }

Para que se renderice el campo de captcha, hay que añadir la dependencia javascript de google en la vista maestra que Laravel trae por defecto:
resources\views\layouts\app.blade.php
JavaScript
1
2
3
4
......
    <!-- Scripts -->
    <script src="/js/app.js"></script>
    <script src='https://www.google.com/recaptcha/api.js'></script>

Y para finalizar, añadimos el campo captcha al formulario de registro:
resources\views\auth\register.blade.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
@extends('layouts.app')
 
@section('content')
 
<form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
    <div class="form-group">
        <label for="captcha" class="col-md-4 control-label"></label>
        <div class="g-recaptcha col-md-6" data-sitekey="{{ env('RECAPTCHA_SITE') }}"></div>
    </div>
</form>
 
@endsection

Así quedaría el formulario de registro:

GET /register