Criar formulario de login com Laravel 11
Neste tutorial, será explicado como criar formulário de login com Laravel 11.
Primeiramente, será demonstrado como criar formulário no Laravel.
Em seguida, será explicado como implementar a funcionalidade de exibir e ocultar senhas.
Por fim, será mostrado como validar o usuário e a senha com PHP.
Download do código fonte desenvolvido na aula: Download
PlayList sobre Laravel 11: Acessar
Receber as aulas gratuitas do curso de Laravel: Acessar
Para começar, é utilizado como base o projeto da aula "Como criar paginação com Laravel 11".
Primeiro, criado a rota de login no arquivo 'routes/web.php'.
Route::get('/', [LoginController::class, 'index'])->name('login');Criada a controller LoginController.
php artisan make:controller LoginControllerEm seguida, na controller 'LoginController', criado o método 'index' para carregar a view com o formulário de login.
public function index()
{
return view('login.index');
}Criada a view com o formulário de login.
php artisan make:view login/indexNa mesma, é implementado o formulário, incluído o layout 'layouts.auth' e enviados os dados para a rota 'login.process'.
@extends('layouts.auth')
@section('content')
<main class="form-signin w-100 m-auto text-center bg-light rounded">
<img class="mb-4" src="{{ asset('images/logo-define-100x100_v1.png') }}" alt="" width="72" height="72">
<h1 class="h3 mb-3 fw-normal">Área Restrita</h1>
<x-alert />
<form action="{{ route('login.process') }}" method="POST">
@csrf
@method('POST')
<div class="form-floating mb-4">
<input type="email" name="email" class="form-control" id="email"
placeholder="Digite o e-mail de usuário" value="{{ old('email') }}">
<label for="email">Usuário</label>
</div>
<div class="mb-4">
<div class="input-group">
<div class="form-floating">
<input type="password" name="password" class="form-control" id="password" placeholder="Password">
<label for="password">Senha</label>
</div>
<span class="input-group-text" role="button" onclick="togglePassword('password', this)"><i
class="bi bi-eye"></i></span>
</div>
</div>
<button class="btn btn-primary w-100 py-2 mb-4" type="submit">Acessar</button>
<a href="{{ route('login.create-user') }}" class="text-decoration-none">Cadastrar</a>
</form>
</main>
@endsection
Os dados do formulário serão enviados para a rota 'login.process', que foi criada no arquivo 'routes/web.php'.
Route::post('/login', [LoginController::class, 'loginProcess'])->name('login.process');A rota chama o método 'loginProcess' da controller 'LoginController', que recebe os dados, realiza a validação com a classe 'LoginRequest' e valida o e-mail e a senha. Se os dados estiverem corretos, o usuário é redirecionado para a página que lista os usuários. Caso o e-mail ou a senha estejam incorretos, o usuário permanece na página de login e a mensagem de erro é exibida.
public function loginProcess(LoginRequest $request)
{
// Validar o formulário
$request->validated();
// Validar o usuário e a senha com as informações do banco de dados
$authenticated = Auth::attempt(['email' => $request->email, 'password' => $request->password]);
// Verificar se o usuário foi autenticado
if(!$authenticated){
// Redirecionar o usuário para página anterior "login", enviar a mensagem de erro
return back()->withInput()->with('error', 'E-mail ou senha inválido!');
}
// Obter o usuário autenticado
$user = Auth::user();
$user = User::find($user->id);
// Redirecionar o usuário
return redirect()->route('user.index');
}É necessário criar a classe para validar os dados do formulário com o comando.
php artisan make:request LoginRequestNo arquivo 'app/Http/Request/LoginRequest', é implementada a validação.
class LoginRequest extends FormRequest
{
public function authorize(): bool
{
return true;
}
public function rules(): array
{
return [
'email' => 'required|email',
'password' => 'required',
];
}
public function messages(): array
{
return[
'email.required' => 'Campo e-mail é obrigatório!',
'email.email' => 'Necessário enviar e-mail válido!',
'password.required' => 'Campo senha é obrigatório!',
];
}
}Em seguida, é implementada a rota sair.
Route::get('/logout', [LoginController::class, 'destroy'])->name('login.destroy');Implementado na controller 'LoginController' o método 'destroy', que desloga o usuário e o redireciona para a página de login.
public function destroy()
{
// Deslogar o usuário
Auth::logout();
// Redirecionar o usuário, enviar a mensagem de sucesso
return redirect()->route('login')->with('success', 'Deslogado com sucesso!');
}Para indicar as rotas restritas, nas quais o usuário precisa estar logado para acessar, é utilizado o auth como middleware, envolvendo as rotas restritas no arquivo "routes/web.php".
Route::group(['middleware' => 'auth'], function () {
Route::get('/index-user', [UserController::class, 'index'])->name('user.index');
Route::get('/show-user/{user}', [UserController::class, 'show'])->name('user.show');
Route::get('/create-user', [UserController::class, 'create'])->name('user.create');
Route::post('/store-user', [UserController::class, 'store'])->name('user-store');
Route::get('/edit-user/{user}', [UserController::class, 'edit'])->name('user.edit');
Route::put('/update-user/{user}', [UserController::class, 'update'])->name('user-update');
Route::delete('/destroy-user/{user}', [UserController::class, 'destroy'])->name('user.destroy');
});Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!