• Síguenos en :

Crear Registro de Usuarios en Laravel 10

Tutorial para crear un sistema de registro y autenticación de usuarios en Laravel 10 paso a paso. Con ejemplos de código y validación de formularios.

Crear Registro de Usuarios en Laravel 10

Guía Completa para Registrar Usuarios en Laravel

Laravel es uno de los frameworks más populares para desarrollar aplicaciones web con PHP. La versión 10 de Laravel, lanzada en febrero de 2022, introduce muchas mejoras y cambios respecto a versiones anteriores.

Una de las tareas más comunes cuando se desarrolla cualquier aplicación web es la creación de un sistema de registro e inicio de sesión de usuarios. Laravel facilita enormemente esta tarea gracias a su potente sistema de autenticación, validación de formularios y encriptación de contraseñas.

Al finalizar este tutorial tendrás los conocimientos necesarios para crear un registro y autenticación robusta en tus proyectos con Laravel 10. Comencemos!

Índice

Introducción a la creación de registros de Usuarios en Laravel

Antes de empezar a codificar, es importante entender algunos conceptos básicos sobre la creación de sistemas de registro de usuarios en Laravel:

El registro o signup permite a los usuarios crear una nueva cuenta en nuestra aplicación web proporcionando datos como nombre, email y contraseña. Los datos del usuario se almacenan en la base de datos para que pueda "registrarse" en el sistema. Posteriormente podrá iniciar sesión usando sus credenciales. Un proceso de registro bien implementado debe validar y sanear los datos para mantener la seguridad e integridad de la aplicación.

Conceptos básicos

Algunos conceptos importantes al trabajar con registros de usuarios son:

  • - Autenticación: corroborar la identidad del usuario comparando sus credenciales con los datos almacenados.

  • - Autorización: determinar los recursos y acciones permitidas al usuario autenticado.

  • - Hashing: transformar la contraseña en una cadena de texto indescifrable mediante funciones hash criptográficas.

  • - Tokens: cadenas únicas de caracteres aleatorios utilizadas para verificar cuentas de usuario.

Comparación con otros frameworks

Laravel destaca por la flexibilidad y potencia de su sistema de autenticación. Permite personalizar fácilmente todo el flujo de registro y sesión.

Otros frameworks como Django, Ruby on Rails o ASP.NET también incluyen sistemas de autenticación, pero pueden requerir más configuración. La ventaja de Laravel es poder adaptarlo a nuestras necesidades.

Configuración inicial del registro en Laravel 10

Lo primero que haremos será crear el proyecto en laravel, configurar la base de datos y establecer las rutas, controlador y vistas necesarias para el registro de usuarios:

Crear Proyecto Laravel 10

Empezamos creando nuestro nuevo proyecto Laravel 10:

composer create-project laravel/laravel registro-laravel

Creación de rutas, controlador y vistas

Lo primero a configurar sería la creación de las rutas para las URLs del registro. Para ello nos dirigimos a routes/web.php

<?php

//routes/web.php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AuthController;

Route::get('/formulario-registro', [AuthController::class, 'showRegisterForm'])->name('register');

Route::post('/register', [AuthController::class, 'registerUser'])->name('register.user');

Como vemos nos aparece una excepción de que no se encuentra el Controller para ello debemos generar el controlador AuthController con el comando Artisan:

php artisan make:controller AuthController

Hay que tener en cuenta que debemos estar en la raiz del proyecto en la terminal si no no detectará el php artisan

Este controlador tendrá los métodos showRegisterForm, y registerUser que iremos creando.

A continuación añadimos la plantilla Blade(la crearemos en resources/views/auth/register.blade.php) para mostrar el formulario de registro:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Registro de Usuarios</title>
</head>

<body>

    <h1>Registrarse</h1>

    <form method="POST" action="{{ route('register.user') }}">
        @csrf

        <!-- Campos del formulario -->

    </form>

</body>

</html>

Mostrar Formulario de Registro

En nuestro controlador AuthController creamos una función showRegisterForm que devolverá la vista del formulario de registro

// App/Http/Controllers/AuthController.php    

public function showRegisterForm()
{
    return view('auth.register');
}

Validación del formulario

Antes de registrar usuarios necesitamos validar los datos del formulario. Laravel incluye la clase Validator que facilita esta tarea:

// App/Http/Controllers/AuthController.php

public function registerUser(Request $request) {

  $validatedData = $request->validate([
    'name' => 'required|max:255',
    'email' => 'required|email|unique:users',
    'password' => 'required|confirmed'
  ]);

}

Aquí validamos que los campos no estén vacíos, el email sea único y las contraseñas coincidan.

Configuración de base de datos

Laravel utiliza migraciones para crear la tabla de usuarios donde almacenaremos los registros.

La migración quedaría así (es muy probable que la migración ya esté creada puesto que Laravel 10 ya va predefinida):

Schema::create('users', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('email')->unique();
    $table->timestamp('email_verified_at')->nullable();
    $table->string('password');
    $table->rememberToken();
    $table->timestamps();
});

Ejecutamos php artisan migrate para crear la tabla correspondiente. Es importante tener verificar que los datos de conexión con la base de datos sean correctos en el .env DB_HOST DB_PORT DB_DATABASE DB_USERNAME DB_PASSWORD

Creación del formulario de registro

Una vez tenemos la configuración inicial, vamos a enfocarnos en la interfaz y la experiencia de usuario al registrarse.

Campos del formulario

Los campos típicos en un formulario de registro son:

  • - Nombre

  • - Email

  • - Contraseña

  • - Confirmar contraseña

Podemos añadirlos así:

<h1>Registrarse</h1>

<form method="POST" action="{{ route('register.user') }}">

@csrf

<div>
<label>Nombre:</label>
<input type="text" name="name">
{{-- Si hay un error tendremos el mensaje --}}
@if ($errors->has('name'))
{{ $errors->first('name') }}
@endif
</div>

<div>
<label>Email:</label>
<input type="email" name="email">
@if ($errors->has('email'))
{{ $errors->first('email') }}
@endif
</div>

<div>
<label>Contraseña:</label>
<input type="password" name="password">
@if ($errors->has('password'))
{{ $errors->first('password') }}
@endif
</div>

<div>
<label>Confirmar contraseña:</label>
<input type="password" name="password_confirmation">
</div>

<button type="submit">
<span>Registrarse</span>
<svg>...</svg>
</button>

</form>

CSS y diseño del formulario

Queremos que el formulario se vea atractivo y profesional. Podemos mejorar el diseño agregando estilos CSS:

<!-- resources/views/auth/register.blade.php -->

<style>
.form-register {
  max-width: 400px;
  margin: 0 auto;
}

.form-register .form-control {
  border-radius: 0;
  box-shadow: none;
  border-color: #ddd;
}

.form-register button[type="submit"] {
  background: #007bff;
  border-color: #007bff;
}
</style>

Y aplicando la clase "form-register" al formulario:

<!-- resources/views/auth/register.blade.php -->

<form class="form-register" method="POST">

  <!-- Campos del formulario -->

</form>

Botones y envío

Es buena idea deshabilitar el botón de submit mientras enviamos los datos para evitar múltiples clicks:

<!-- resources/views/auth/register.blade.php -->

<button type="submit" disabled>
  <span>Registrarse</span>
  <svg>...</svg>
</button>

Luego habilitarlo de nuevo cuando termine la request:

<!-- resources/views/auth/register.blade.php -->

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<script>
    $("form").submit(function() {
        $("button[type='submit']").attr('disabled', true);
    });

    $("form").on('ajaxStop', function() {
        $("button[type='submit']").attr('disabled', false);
    });
</script>

Así mejoramos la experiencia del usuario.

Almacenamiento de usuarios registrados

Aunque ya tenemos la validación básica, vamos a ampliarla para asegurarnos que los datos sean correctos.

// App/Http/Controllers/AuthController.php    

    public function registerUser(Request $request)
    {
        $request->validate([
            'nombre' => ['required', 'string', 'max:255'],
            'email' => ['required', 'email', 'unique:users,email', 'max:250'],
            'password' => ['required', "min:8", 'confirmed']
        ]);
    }

Esto requiere que los campos no estén vacíos, tengan formato válido y la contraseña sea lo suficientemente segura.

Guardar el Usuario Registrado

Una vez tenemos la validación guardaremos el usuario creado:

// App/Http/Controllers/AuthController.php    
// Función registerUser()
    User::create([
            'name' => $request->nombre,
            'email' => $request->email,
            'password' => Hash::make($request->password)
        ]);

Es importante que importemos el modelo del User y el paquete Hash que nos permitirá cifrar la contraseña. Debemos poner lo siguiente con las otras importaciones(encima del class )

// App/Http/Controllers/AuthController.php    
use App\Models\User;
use Illuminate\Support\Facades\Hash;

Iniciar Sesión al Usuario Creado

Una vez se ha creado el nuevo usuario podemos hacer para que se inicie sesión

// App/Http/Controllers/AuthController.php    
public function registerUser(Request $request)
{
$request->validate([
'nombre' => ['required', 'string', 'max:255'],
'email' => ['required', 'email', 'unique:users,email', 'max:250'],
'password' => ['required', "min:8", 'confirmed']
]);

User::create([
'name' => $request->nombre,
'email' => $request->email,
'password' => Hash::make($request->password)
]);

$credentials = $request->only('email', 'password');
Auth::attempt($credentials);
$request->session()->regenerate();

// Ruta donde queremos que se redirija el usuario registrado
return redirect()->route('/');
}

Debemos importar la librería Auth

// App/Http/Controllers/AuthController.php    
use Illuminate\Support\Facades\Auth;

Conclusión

A lo largo de este tutorial hemos visto cómo crear un sistema completo de registro de usuarios en Laravel 10.

Los puntos clave han sido:

  • - Configuración inicial de rutas, controladores y vistas.

  • - Creación del formulario con campos para nombre, email y contraseña.

  • - Validación de datos de entrada del lado del servidor.

  • - Almacenamiento seguro en base de datos con hash de contraseña.

Laravel abstracta toda la complejidad de la autenticación, permitiéndonos construir con facilidad un flujo de registro y sesión customizado.

Los sistemas de usuario e identidad son la base de muchas aplicaciones web modernas. ¡Espero que este tutorial te haya resultado útil para crear los tuyos con Laravel 10!

Etiquetas

Laravel