No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Login y manejo de Auth

16/23
Recursos

Muchas aplicaciones hoy en día requieren de un Login para identificar al usuario y que pueda interactuar con la plataforma.

Login de Usuarios

Veamos a continuación buenas prácticas para el manejo de sesiones con Angular.

1. Interfaces para tipado de datos

Comencemos creando algunas interfaces para conocer y tipar la estructura de los datos.

// interfaces/user.interface.ts
export interface Credentials {
  email: string;
  password: string;
}
export interface Login {
  access_token: string;
}
export interface User {
  id: string;
  email: string;
  password: string;
  name: string;
}

Hemos creado tres interfaces. *

  • Credentials para tomar los datos necesarios para registrar a un usuario
  • Login que contiene la respuesta al registrar exitosamente un usuario
  • User la interfaz que contiene la estructura de datos de un usuario

2. Servicio para el manejo del Login

Crea un simple servicio que manejará todo lo relacionado con inicios de sesión de los usuarios.

// services/auth.service.ts
import { Credentials, Login, User } from 'src/app/interfaces/user.interface';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private http: HttpClient) { }

  loginUser(credentials: Credentials): Observable<Login> {
    return this.http.post<Login>(`https://example.com/api/login`, credentials);
  }
}

3. Inicio de sesión desde el componente

Desde el componente que contiene el formulario de login, realizamos el inicio de sesión del usuario.

// components/login/login.components.ts
import { Component } from '@angular/core';
import { AuthService } from 'src/app/services/auth.service';
import { Credentials, Login, User } from 'src/app/interfaces/user.interface';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent {

  constructor(private auth: AuthService) { }

  loginUser(): void {
    const credentials: Credentials = {
      email: '[email protected]',
      password: '123456',
    };
    this.auth.loginUser(credentials)
      .subscribe((res: Login) => {
        localStorage.setItem('platzi_token', res.access_token);
      });
  }
}

En este ejemplo, efectuamos el login de un usuario con su email y password. El backend suele devolver el token de autenticación del usuario o un access_token. Lo guardamos en Local Storage o en el store que sea de tu preferencia.

NOTA: Existen diferentes tipos de Tokens para autenticar usuarios. Uno de los más comunes es Json Web Token o JWT.


Contribución creada por: Kevin Fiorentino.

Aportes 9

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Hoy acabo el curso!!! Ya falta poco!

No se hace cuando salio este curso, pero me pregunto porque no lo tome antes es buenisimo, siento que todo programador no tan solo angular deberia tomarlo 🤩

Recuerden que si estan siguiendo el curso, deben inciar el server desde consola como

npm run start:proxy

ya que seguimos en hambiente de desarrollo y estamos utilizando proxy.

Esta clase estuvo buenisimaaaaa!!!

Ya obtuvimos el Token, ahora veamos como lo debemos enviar para autenticarnos en la API

Seria bueno notificar al usuario cuando se ha restructurado un curso y el usuario lo ha tomado.

Recomiendo investigar el servicio de Autenticación de Firebase. Funciona con JWT y ya trae implementado todo lo necesario. Login, logout, validación de email, recuperar contraseña, etc. Además, es totalmente gratuito, puedes tener miles de usuarios y no pagar nada.
Ideal para proyectos que tienen que desarrollarse rápido y no hay tiempo, o ganas, de desarrollar todo un backend que administre usuarios.

Pense que hacer un login era complicado pero con esta clase es super sencillo 😃

les recomiendo que user Auth0 , es un sistema ya muy implementado y es gratuito hasta muchos usuarios. https://platzi.com/cursos/autenticacion-oauth/