Tutorial de captcha do Laravel 8. Neste tutorial, mostraremos como adicionar uma validação de captcha com laravel 8 forms.
O captcha oferece um desafio de segurança em formulários para evitar spam de comentários, spam de formulários.
Laravel 8 Captcha - Adicionar Validação de Captcha no Formulário
- Passo 1 - Baixe o aplicativo Laravel 8
- Etapa 2 - Configurar banco de dados com aplicativo
- Etapa 3 - Instale o pacote Captcha
- Etapa 4 - Registrar o pacote Captcha
- Etapa 5 - Configuração de Captcha
- Etapa 6 - Criar Rotas de Formulários
- Etapa 7 - Criar controlador de formulário por comando Artisan
- Etapa 8 - Criar arquivo de folha de formulário
- Etapa 9 - Executar o servidor de desenvolvimento
Passo 1 - Baixe o aplicativo Laravel 8
Em primeiro lugar, baixe ou instale a nova configuração do laravel 8. Portanto, abra o terminal e digite o seguinte comando para instalar o novo aplicativo laravel 8 em sua máquina:
composer create-project --prefer-dist laravel / laravel FormValidation
Etapa 2 - Configurar banco de dados com aplicativo
Nesta etapa, configure o banco de dados com seu aplicativo laravel 8 baixado / instalado. Portanto, você precisa encontrar o arquivo .env e os detalhes do banco de dados de configuração da seguinte forma:
|
1
2
3
4
5
6
|
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password
|
Etapa 3 - Instale o pacote Captcha
captcha package:
composer require mews/captcha
Etapa 4 - Registrar o pacote Captcha
Nesta etapa, registre este pacote no aplicativo laravel. Portanto, abra o arquivo supplies / config / app.php e registre o provedor de serviço captcha e os aliases .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
'providers' => [
...
...
...
Mews\Captcha\CaptchaServiceProvider::class,
]
'aliases' => [
...
...
...
'Captcha' => Mews\Captcha\Facades\Captcha::class,
]
|
Etapa 5 - Configuração de Captcha
Nesta etapa, abra o arquivo config / captcha.php . E neste arquivo você pode habilitar ou desabilitar as configurações com base nas suas necessidades:
|
1
2
3
4
5
6
7
8
9
10
11
|
return [
'default' => [
'length' => 5,
'width' => 120,
'height' => 36,
'quality' => 90,
'math' => true,
'expire' => 60,
],
];
|
Etapa 6 - Criar Rotas
Nesta etapa, abra o arquivo web.php do diretório de rotas. E atualize as seguintes rotas no arquivo web.php:
|
1
2
3
4
5
6
|
use App\Http\Controllers\CaptchaValidationController;
Route::get('contact-form-captcha', [CaptchaValidationController::class, 'index']);
Route::post('captcha-validation', [CaptchaValidationController::class, 'capthcaFormValidate']);
Route::get('reload-captcha', [CaptchaValidationController::class, 'reloadCaptcha']);
|
Etapa 7 - Criar controlador de formulário por comando Artisan
Nesta etapa, execute o seguinte comando no prompt de comando para criar o arquivo do controlador:
php artisan make: controlador CaptchaValidationController
Depois disso, vá para app / http / controllers e abra o arquivo CaptchaValidationController.php . E atualize o seguinte código nele:
|
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
|
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CaptchaValidationController extends Controller
{
public function index()
{
return view('form-with-captcha');
}
public function capthcaFormValidate(Request $request)
{
$request->validate([
'name' => 'required',
'email' => 'required|email',
'message' => 'required',
'captcha' => 'required|captcha'
]);
}
public function reloadCaptcha()
{
return response()->json(['captcha'=> captcha_img()]);
}
}
|
Etapa 8 - Criar Arquivo Blade
Agora, crie um arquivo de visualização em lâmina para exibir o formulário com o desafio captcha e enviar ao banco de dados. Portanto, vá para resources / views e crie form-with-captcha.blade.php e atualize o seguinte código nele:
|
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Form Captcha Validation</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container mt-4">
@if(session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<div class="card">
<div class="card-header text-center font-weight-bold">
<h2>Laravel 8 Add Captcha in Form For Validation</h2>
</div>
<div class="card-body">
<form name="captcha-contact-us" id="captcha-contact-us" method="post" action="{{url('captcha-validation')}}">
@csrf
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" id="name" name="name" class="@error('name') is-invalid @enderror form-control">
@error('name')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" id="email" name="email" class="@error('email') is-invalid @enderror form-control">
@error('email')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="exampleInputEmail1">Message</label>
<textarea name="message" class="@error('message') is-invalid @enderror form-control"></textarea>
@error('message')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
<div class="form-group mt-4 mb-4">
<div class="captcha">
<span>{!! captcha_img() !!}</span>
<button type="button" class="btn btn-danger" class="reload" id="reload">
↻
</button>
</div>
</div>
<div class="form-group mb-4">
<input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$('#reload').click(function () {
$.ajax({
type: 'GET',
url: 'reload-captcha',
success: function (data) {
$(".captcha span").html(data.captcha);
}
});
});
</script>
</body>
</html>
|
O código a seguir exibirá uma mensagem de erro de validação no arquivo de visualização em lâmina:
|
1
2
3
|
@error('name')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
|
Etapa 9 - Executar o servidor de desenvolvimento
Última etapa, abra o prompt de comando e execute o seguinte comando para iniciar o servidor de desenvolvimento:
php artisan serve
Em seguida, abra seu navegador e acesse o seguinte url:
http://127.0.0.1:8000/contact-form-captcha
Fontes:
https://www.tutsmake.com/laravel-8-captcha-tutorial-add-captcha-in-forms/
https://packagist.org/packages/mews/captcha
