Hoy acabo el curso!!! Ya falta poco!
Http Basic
Lo que aprenderás para consumir API con Angular
Solicitudes GET
Detalle de producto
Implementando slides
Solicitudes POST
Solicitudes PUT y PATCH
Solicitudes DELETE
Url Parameters / Paginación
Observable vs. Promesa
Reintentar una petición
Buenas prácticas
El problema de CORS
Manejo de ambientes
Manejo de errores
Transformar peticiones
Evitando el callback hell
Auth
Login y manejo de Auth
Manejo de headers
Uso de interceptores
Enviar Token con un interceptor
Creando un contexto a interceptor
Archivos
Descarga de archivos con Http
Subida de archivos con Http
Despedida
Continúa con el Curso de Angular Router y Programación Modular
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Muchas aplicaciones hoy en dÃa requieren de un Login para identificar al usuario y que pueda interactuar con la plataforma.
Veamos a continuación buenas prácticas para el manejo de sesiones con Angular.
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. *
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);
}
}
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
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/
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. RegÃstrate o inicia sesión para participar.