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 15

Preguntas 11

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

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.

Recuerden que a dia de hoy Marzo 2023 la URL Correcta es la del fakeStore de platzi.

Documentacion AQUi

La URL para el post seria esta 鈥https://api.escuelajs.co/api/v1/auth/login

Y adicional es importante que tengan en cuenta que cuando envien el BODY vaya en formato JSON si no les va a arrojar un error de 401

![](

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

Esta clase estuvo buenisimaaaaa!!!

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

Nico se volvio mi unica compa帽ia, lo veo todo el dia

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

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

Estoy intentando hacer el login , pero me devuelve un error 401, adem谩s en la documentaci贸n de la API el endpoint no recibe par谩metros URL que utilice = <https://young-sands-07814.herokuapp.com/api/auth/login> Doc = <https://young-sands-07814.herokuapp.com/docs/#/auth/AuthController_login>

Tambi茅n pueden usar la p谩gina oficial de JWT para mirar la informaci贸n de los tokens 馃槃

Super la clase 馃槂

Genial justo acabo de hacer el API del login ahora me falta el frontend :3