Cómo crear un registro de usuario en Laravel

En este tutorial, vamos a construir a mano un sistema de registro de usuarios en Laravel. Para ser justos, podríamos utilizar el comando php artisan make: auth para andamiar las vistas y rutas básicas de inicio de sesión y registro automáticamente. Esto funciona muy bien, pero en el espíritu de aprendizaje, debemos saber cómo hacerlo por nuestra cuenta. Al crear un ejemplo de registro de usuarios y administración de sesiones desde cero, obtendremos una idea mucho mejor de cómo mantener y ajustar estas características a medida que necesitamos avanzar. Sigamos adelante y abordemos el registro de usuarios y la gestión de sesiones desde cero ahora mismo.

Configurar rutas de registro y sesiones

Comenzar en el archivo de rutas tiene sentido. Esto nos da una forma de trazar lo que queremos implementar. Es casi como una forma de usar pseudocódigo para mirar hacia el futuro y ver qué necesitaremos para que algo funcione.

rutas / web.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
 
Route::get('/games', 'GamesController@index');
 
Route::get('/games/create', 'GamesController@create');
 
Route::get('/games/{game}', 'GamesController@show');
 
Route::post('/games', 'GamesController@store');
 
Route::post('/games/{game}/reviews', 'ReviewsController@store');
 
Route::get('/register', 'RegistrationController@create');
Route::post('register', 'RegistrationController@store');
 
Route::get('/login', 'SessionsController@create');
Route::post('/login', 'SessionsController@store');
Route::get('/logout', 'SessionsController@destroy');

Aquí, hemos roto la tarea de registrar un usuario frente a acciones relacionadas con la sesión (iniciar / cerrar sesión) en sus propios controladores. RegistrationController se encargará de ofrecer un formulario para registrar un nuevo usuario, así como una forma de almacenar un nuevo usuario en la base de datos una vez que el formulario se haya completado correctamente. El SessionsController se dedica a manejar ofreciendo un formulario para iniciar sesión en un usuario existente, iniciar sesión si completan sus credenciales correctamente y también cerrar la sesión cuando lo desee. Quizás se pregunte por qué usamos dos controladores cuando parece que todo podría manejarse en un AuthController dedicado de algún tipo. La verdad es que sí, puedes hacer esto fácilmente en un controlador. La razón aquí para dos es para que podamos seguir más fácilmente la estructura del método RESTful y poder predeterminar cualquiera de los métodos RESTful que podamos encontrar para un recurso. En otras palabras, index (),crear () , almacenar () , mostrar (), editar (), actualizar () o destruir () .

Con respecto a las rutas que hemos establecido hasta ahora, sabemos que el método create () normalmente mostrará un formulario al usuario. Desde allí pueden completarlo y enviarlo. Cuando lo envíen, deben enviar una solicitud POST a un método store () . Este método creará un nuevo usuario en el caso de RegistrationController o iniciará sesión en un usuario existente en el caso de SessionsController. Por último, si un usuario visita autenticados la /logoutruta, el destroy () método en el SessionsController va a correr y ellos salir de la sesión. Tiene mucho sentido.

Construya el controlador de registro

Ahora que nos ocupamos de nuestras rutas, es hora de construir los controladores. Podemos comenzar con el RegistrationController.
hacer un controlador de registro

Primero nos enfocaremos en agregar el método create () que debería mostrar un formulario al usuario para que pueda completar su información para registrarse.

app / Http / Controllers / RegistrationController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class RegistrationController extends Controller
{
    public function create()
    {
        return view('registration.create');
    }
}

Cree un formulario de registro para el método RegistrationController @ create ()

Todavía no tenemos un formulario de registro, así que creemos una carpeta en nuestro directorio de recursos llamada registro y agreguemos un archivo de vista create.blade.php . Ahora recuerde que el valor del atributo de nombre en nuestras etiquetas de entrada será la forma en que obtenemos los datos enviados en el formulario en el back-end. Lo que hacemos aquí es usar los nombres de campo de nuestra tabla de usuarios actuales en nuestra base de datos. Estos fueron creados por defecto cuando corrimos por primera vez php artisan migrate. Tenga en cuenta que tenemos la userstabla y podemos ver los campos de la tabla, pero todavía no existen usuarios.
todavía no hay usuarios

recursos / vistas / registro / create.blade.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
@extends('layouts.master')
 
@section('content')
 
    <h2>Register</h2>
    <form method="POST" action="/register">
        {{ csrf_field() }}
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" class="form-control" id="name" name="name">
        </div>
 
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" name="email">
        </div>
 
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" class="form-control" id="password" name="password">
        </div>
 
        <div class="form-group">
            <button style="cursor:pointer" type="submit" class="btn btn-primary">Submit</button>
        </div>
        @include('partials.formerrors')
    </form>
 
@endsection

Si visitamos la /registerruta, parece que ahora tenemos nuestro formulario. ¡Excelente!
formulario de registro de nuevo usuario laravel

Configure el método RegistrationController @ store () para manejar el envío del formulario de registro

Tenemos un formulario para registrar un nuevo usuario, pero necesitamos un método en nuestro RegisterController para manejar esta solicitud. Cuando se envía el formulario, enviará una solicitud POST a /register, que a su vez se dirige al método store () . Este método necesitará hacer algunas cosas.

Validar el envío del formulario
Crear y guardar un usuario en la base de datos
Redirige al usuario a la ruta de los juegos

Vamos a configurar eso aquí mismo.

app / Http / Controllers / RegistrationController.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\Http\Controllers;
 
use Illuminate\Http\Request;
use App\User;
 
class RegistrationController extends Controller
{
    public function create()
    {
        return view('registration.create');
    }
    
    public function store()
    {
        $this->validate(request(), [
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required'
        ]);
        
        $user = User::create(request(['name', 'email', 'password']));
        
        auth()->login($user);
        
        return redirect()->to('/games');
    }
}

Agregue hashing de contraseña con un mutador en el modelo de usuario

Antes de probar esto, debemos discutir un poco sobre la seguridad con respecto a las contraseñas que se almacenan en una base de datos. El método store () anterior funcionará, pero almacenará la contraseña en texto plano en la base de datos. Las contraseñas siempre deben almacenarse como un hash o token único ejecutando la cadena a través de una función como bcrypt () . Este es un agujero de seguridad que tenemos que arreglar. Podemos arreglar esto agregando un mutador al modelo de Usuario. Veamos cómo hacer eso.

app / User.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
30
31
32
33
34
35
36
37
<?php
 
namespace App;
 
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
 
class User extends Authenticatable
{
    use Notifiable;
    
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];
    
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];
    
    /**
     * Add a mutator to ensure hashed passwords
     */
    public function setPasswordAttribute($password)
    {
        $this->attributes['password'] = bcrypt($password);
    }
}

Ahora podemos probar el nuevo formulario de usuario para asegurarnos de que funciona. Registremos a Mario en nuestra base de datos de juegos.
registrar nuevo usuario mario en la base de datos

Si miramos al usuario en nuestra base de datos, ¡podemos ver que Mario está allí! Tenga en cuenta que su contraseña también está correctamente cifrada, sin texto claro. Esto nos dice que nuestro mutador en el modelo de Usuario funcionó perfectamente.
registro de usuario exitoso con hash de contraseña

Mostrar el nombre del usuario en la barra de navegación

Tenga en cuenta que en el método store () , capturamos una instancia del nuevo usuario cuando usamos $ user = User :: create (request (['nombre', 'correo electrónico', 'contraseña'])); Esto puso una instancia de ese nuevo usuario en la $uservariable. Lo siguiente que hicimos fue iniciar la sesión de ese usuario con auth () -> login ($ usuario); ¿Qué hizo esto realmente? Bueno, estableció una nueva sesión para ese usuario con el sitio. Si un usuario tiene una sesión activa, podría ser bueno mostrar su nombre de usuario en la barra de navegación para un poco de personalización. Podemos actualizar nuestra barra de navegación parcial para manejar eso.

recursos / vistas / parciales / navbar.blade.php

En este fragmento, usamos auth () -> check () para ver si el usuario ha iniciado sesión. Si esto es cierto, se representa la etiqueta <li> y el nombre de usuario se rellena a través de auth () -> user () -> nombre . Si esto es falso, el <li> no se representa en absoluto. Perfecto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">We Like Games</a>
 
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="/games">List Games</a>
            </li>
            @if( auth()->check() )
                <li class="nav-item">
                    <a class="nav-link" href="#">{{ auth()->user()->name }}</a>
                </li>
            @endif
        </ul>
    </div>
</nav>

mario ha iniciado sesión

Construye el controlador de sesión

Ahora necesitamos una forma de registrar a los usuarios existentes dentro y fuera de la aplicación. Ya tenemos nuestras rutas para manejar esto, ahora necesitamos construir el controlador real y los métodos asociados para manejar esto por nosotros. Podemos hacer eso ahora.
laravel genera controlador sesson

app / Http / Controllers / SessionsController.php

En nuestro archivo de rutas, ya determinamos que habrá tres métodos en el SessionsController. Estos serán create () para ofrecer un formulario de inicio de sesión, store () para iniciar sesión a un usuario existente y destroy () para cerrar la sesión de un usuario en la aplicación. Podemos construir esos métodos ahora.

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
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class SessionsController extends Controller
{
    public function create()
    {
        return view('sessions.create');
    }
    
    public function store()
    {
        if (auth()->attempt(request(['email', 'password'])) == false) {
            return back()->withErrors([
                'message' => 'The email or password is incorrect, please try again'
            ]);
        }
        
        return redirect()->to('/games');
    }
    
    public function destroy()
    {
        auth()->logout();
        
        return redirect()->to('/games');
    }
}

Crear un formulario de inicio de sesión para el método SessionsController @ create ()

Al igual que el método create () de nuestro RegistrationController ofrece un formulario al usuario para que se registre en el sitio, también el método create () de nuestro SessionsController ofrece al usuario un formulario para iniciar sesión en el sitio. Este formulario es un poco más simple, ya que solo necesita incluir campos para un correo electrónico y una contraseña. También incluiremos el parcial que hemos creado anteriormente para mostrar errores.

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
@extends('layouts.master')
 
@section('content')
 
    <h2>Log In</h2>
    
    <form method="POST" action="/login">
        {{ csrf_field() }}
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" name="email">
        </div>
 
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" class="form-control" id="password" name="password">
        </div>
 
        <div class="form-group">
            <button style="cursor:pointer" type="submit" class="btn btn-primary">Login</button>
        </div>
        @include('partials.formerrors')
    </form>
 
@endsection

¡Luciendo bien!
el método create representa un formulario de inicio de sesión

En el método store () de SessionsController podemos ver que hacemos uso del método auth () -> intento (request (['email', 'password']) que regresa falsesi el usuario no puede iniciar sesión, o truesi el el usuario inicia sesión con éxito. Sabiendo esto, podemos colocar esta llamada en una ifdeclaración. Si el método auth () -> intento () es false, regresamos al formulario con cualquier error. Usamos back () y withErrors () funciones para hacer esto. Aquí configuramos manualmente el mensaje a: El correo electrónico o la contraseña son incorrectos, por favor intente nuevamente . Si el Si el auth () -> intento () estruesin embargo, eso significa que el usuario inició sesión correctamente y ahora podemos redirigirlo a la /gamesruta para ver todos los juegos. Tenemos un usuario de Mario en el sistema, pero no un Luigi. Intentemos iniciar sesión como Luigi y ver qué sucede.
luigi no puede iniciar sesión con malas credenciales
El formulario de inicio de sesión funciona bien en el caso de proporcionar credenciales incorrectas. Se nos redirige al formulario y los errores se muestran muy bien debajo del formulario. Si proporcionamos las credenciales correctas para Mario, que ya está en la base de datos, iniciamos sesión sin problemas.

Actualice la navegación para incluir enlaces de inicio de sesión, registro y cierre de sesión

El último método en nuestro SessionsController es el método destroy () , y todo lo que hace es llamar a auth () -> logout (); y luego redirige al usuario a la /gamesruta para ver todos los juegos. Para hacer uso de estas rutas, deberíamos agregar algunos enlaces de navegación a nuestro diseño. Tendremos que tener en cuenta qué enlaces mostrar en función de si un usuario ha iniciado sesión o no. En nuestra navegación en este momento, tenemos un enlace /gamespara ver todos los juegos. Queremos mostrar esto para los usuarios que han iniciado sesión o que no lo han hecho. Si un usuario aún no ha iniciado sesión, deberíamos proporcionarle un enlace a ambos /loginy /register. De esta manera, pueden optar por iniciar sesión si son un usuario existente, o crear una nueva cuenta registrándose en el sitio si lo desean. Si el usuarioestá conectado, vamos a querer mostrar su nombre, así como darles un enlace para /logoutque puedan cerrar sesión si lo desean . Así es como lo haremos en nuestra área de navegación.

recursos / vistas / parciales / navbar.blade.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
30
31
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">We Like Games</a>
 
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="/games">List Games</a>
            </li>
            @if( auth()->check() )
                <li class="nav-item">
                    <a class="nav-link font-weight-bold" href="#">Hi {{ auth()->user()->name }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/logout">Log Out</a>
                </li>
            @else
                <li class="nav-item">
                    <a class="nav-link" href="/login">Log In</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/register">Register</a>
                </li>
            @endif
        </ul>
    </div>
</nav>

Registrar un nuevo usuario

Intentemos registrar un nuevo usuario llamado Luigi ahora.
luigi se registra para el sitio
Parece que nuestro trabajo está dando sus frutos. Visitamos la /registerruta a través del nuevo enlace que creamos y obtenemos el formulario de registro que esperamos. Luego completamos algo de información, enviamos y listo, tenemos un nuevo usuario creado que inicia sesión inmediatamente. También podemos ver que la barra de navegación se actualiza como esperaríamos en función de si hemos iniciado sesión o no. Finalmente, visitamos la /logoutruta a través del enlace Cerrar sesión que proporcionamos y cerramos la sesión de inmediato. ¡Increíble!

Hagamos una verificación final para asegurarnos de que Mario, nuestro primer usuario, aún pueda iniciar y cerrar sesión correctamente.
mario inicia sesión y cierra sesión
Podemos ver que ambos usuarios que hemos registrado en el sitio pueden iniciar y cerrar sesión ahora con nuestro sistema de registro de usuarios. ¡Excelente trabajo!

Agregar confirmación de contraseña al formulario de registro

Lo último que haremos para este tutorial es agregar un campo de confirmación de contraseña a nuestro formulario de registro. Probablemente esté familiarizado con esto. Es cuando necesita escribir su contraseña dos veces para asegurarse de que no cometió un error tipográfico al elegir una contraseña. Primero podemos actualizar el formulario.

recursos / vistas / registro / create.blade.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
30
31
32
33
34
35
@extends('layouts.master')
 
@section('content')
 
    <h2>Register</h2>
    <form method="POST" action="/register">
        {{ csrf_field() }}
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" class="form-control" id="name" name="name">
        </div>
 
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" name="email">
        </div>
 
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" class="form-control" id="password" name="password">
        </div>
 
        <div class="form-group">
            <label for="password_confirmation">Password Confirmation:</label>
            <input type="password" class="form-control" id="password_confirmation"
                   name="password_confirmation">
        </div>
 
        <div class="form-group">
            <button style="cursor:pointer" type="submit" class="btn btn-primary">Submit</button>
        </div>
        @include('partials.formerrors')
    </form>
 
@endsection

agregar confirmación de contraseña para registrarse

Ahora necesitamos actualizar las reglas de validación en el método RegistrationController @ store (). Muy facil de hacer.

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\Http\Controllers;
 
use Illuminate\Http\Request;
use App\User;
 
class RegistrationController extends Controller
{
    public function create()
    {
        return view('registration.create');
    }
    
    public function store()
    {
        $this->validate(request(), [
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required|confirmed'
        ]);
        
        $user = User::create(request(['name', 'email', 'password']));
        
        auth()->login($user);
        
        return redirect()->to('/games');
    }
}

Podemos intentar registrar un nuevo usuario y no coincidir intencionalmente con las contraseñas, y la validación funciona perfectamente para nosotros.
la confirmación de la contraseña no coincide

Cómo crear un registro de usuario en el resumen de Laravel

Tomamos un enfoque RESTful para manejar el registro de usuarios y el manejo de sesiones en este tutorial, e hicimos uso de los métodos bien conocidos de create () , store () y destroy () para hacer el trabajo por nosotros. Aprendimos que un método create () generalmente se usa para mostrar un formulario a un usuario. Buscamos datos de entrada en este caso. El método store () se utiliza para procesar los datos que recopilamos con un formulario representado mediante el método create (). Por último, la destrucción ()El método se utiliza para eliminar un recurso. En este caso, ese fue el acto de eliminar una sesión de usuario. Al dividir el registro y el manejo de sesiones en dos controladores de RegistrationController y SessionController, fue fácil adherirse a esos métodos RESTful, lo cual es bueno. En resumen:

Ruta :: get ('/ register', 'RegistrationController @ create'); Muestre un formulario a un visitante para que pueda registrarse para una nueva cuenta en el sitio.
Ruta :: post ('/ register', 'RegistrationController @ store'); Acepta datos de solicitud del envío del formulario de registro, valida datos, almacena nuevos usuarios en la base de datos .
Route :: get ('/ login', 'SessionsController @ create'); Muestre un formulario para que un usuario existente inicie sesión en el sitio y establezca una nueva sesión.
Ruta :: post ('/ login', 'SessionsController @ store'); Acepta los datos de solicitud del envío del formulario de inicio de sesión (o sesión), autoriza las credenciales, registra al usuario en el sitio .
Route :: get ('/ logout', 'SessionsController @ destroy'); Destruye una sesión existente y desconecta al usuario del sitio .

Header Ads Widget

Cómo crear un registro de usuario en Laravel

Configurar rutas de registro y sesiones

rutas / web.php

Construya el controlador de registro

app / Http / Controllers / RegistrationController.php

Cree un formulario de registro para el método RegistrationController @ create ()

recursos / vistas / registro / create.blade.php

Configure el método RegistrationController @ store () para manejar el envío del formulario de registro

app / Http / Controllers / RegistrationController.php

Agregue hashing de contraseña con un mutador en el modelo de usuario

app / User.php

Mostrar el nombre del usuario en la barra de navegación

recursos / vistas / parciales / navbar.blade.php

Construye el controlador de sesión

app / Http / Controllers / SessionsController.php

Crear un formulario de inicio de sesión para el método SessionsController @ create ()

Actualice la navegación para incluir enlaces de inicio de sesión, registro y cierre de sesión

recursos / vistas / parciales / navbar.blade.php

Registrar un nuevo usuario

Agregar confirmación de contraseña al formulario de registro

recursos / vistas / registro / create.blade.php

Cómo crear un registro de usuario en el resumen de Laravel

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget