Login con Google desde Angular 16
HTML-код
- Опубликовано: 12 сен 2023
- Autenticación con google OAuth 2.0 desde Angular usando Client IDs de google cloud.
Sigueme en mis redes sociales.
Instagram: / neisercode
X: / neisercp
Repositorio: github.com/neiserdeveloper/ng...
Suscribete y comparte, que estoy pensando grabar una segunda parte(BackEnd)
Escucho sus sugerencias ¿En que lenguaje desean que desarrollemos el BackEnd ? 😊
Nest
java
@@facundowehrli2322 La segunda parte se hizo en NestJS voy a conciderar hacerlo en java, además se vienen mas videos de java muy interesantes.
muchas gracias! me parecía interesante hacer un login completo sumandolé JWT + SpringSecurity@@neisercp
@@neisercp gracias genio!! consulta hiciste el video del back con Java?
Maravilloso, simple, directo, no te das vueltas, simplemente un video grandioso
gracias :'D
Muchas gracias, me alegra que te haya servido, suscribete y comparte para llegar a mas personas.
Saludos crack!
Muy buen video, me viene como anillo al dedo para algo que estoy creando
Que bueno que te sirvió, suscribte y comparte para seguir subiendo más contenido de este tipo.
Excelente video! te felicito por tu dominio en el tema, lo explicaste de una manera muy simple.
Sub++
Muchas gracias, estoy preparando más contenido de este tipo, comparte para poder llegar a más personas.
Saludos!
Excelente video, me ayudó bastante en mi proyecto en la U
Me alegra que te haya servido.
Excelente video !
Que bueno que te sirvió.
Saludos!
Gracias Bro buen video
Muchas gracias.
Saludos!
Excelente!!!
Que bueno que te sirvió, suscribete y comparte crack 😉
Buenísima explicación! 👌
Muito bom!
Thank you !!!
Grande hermano, deberías hacer un curso en udemy, te iría muy bien
Muchas gracias estos comentarios me motivan a seguir creando este tipo de contenido, comparte.
Un abrazo!
Hola, luego del login exitoso, si voy a la ruta del Login y presiono el botón de Login con google, me vuelve a dejar hacer el proceso de inicio de sesión. No debería detectar la sesión?
Hola Isaias, no aún te permite volver hacer el proceso, lo que debes hacer en un crear un Guard para que detecte la sesión, y te redireccione directo al "/main", aca te dejo el código de como sería.
1. Crea un guard y valida si el usuario esta logueado, de ser asi solo redireccionas al "/main".
export class NoAuthGuard {
constructor(private authenticationService: AuthenticationService, private router: Router) { }
canActivate():
| Observable
| Promise
| boolean
| UrlTree {
if (this.authenticationService.isLoggedIn()) {
this.router.navigate(['/home']);
return false;
}
!this.authenticationService.isLoggedIn();
return true;
}
}
Nota: En el metodo isLoggedIn() debes validar si el token esta en el localstorage y si aún no expira.
2. Agrega el Guard a tu routing de la page "/login" de esta manera.
{
path: 'login',
component: LoginComponent,
canActivate: [NoAuthGuard]
}
¡Éxitos!
O sea, que para iniciar sesión y tener control sobre ese usuario generado, se tendría que pasar esa información al backend si quiere tenerlo en mi db? cómo se haría el proceso de iniciar con google y tener control sobre la cuenta en un backend?
Para gestionar los usuarios mediante una bd, se puede hacer, solo debes tener claro como quieres que funcione tu autenticación, el login con google solo sirve para que el user no tenga que estar creando una cuenta en tu app, ademas, para obtener información de la cuenta.
Si quieres registrar el correo, nombres, picture en la bd, deberías hacer lo siguiente:
1. La autenticacion que ves en el video.
2. Crear un api en el back que reciba el token de Google.
3. El token que recibes de Google debes ir comprobar en Google si es un token válido, si es así obtiene la información.
4. Registras esos datos en tu bd
5. Implementas jwt en base al resultado y en la api del punto 1 devuelves el token, pero el jwt que generaste en el back, para las peticiones de tus APIs.
Espero te haya ayudado.
Suscribete y comparte.
Saludos!
que hago cuando el getIdentityClaims es null o no trae ninguna de los scopes?
Si estas recibiendo un null lo mas probable es que no te estas autenticando, verifica si tienes un token, puedes usar este metodo:
this.oauthService.hasValidAccessToken()
Saludos, puedo hacer lo mismo con Angular 17?? Y cuando creo el proyecto, no me sale el app.modules, ese es indispensable?
No hay problema, tambien lo puedes hacer en 17, en el canal subi un video de angular 17. fijate como importo las dependencias, y esto que tienes en el modulo, OAuthModule.forRoot(), lo colocas a nivel de componente.
Amigo me sirvio de mucha ayuda este tutorial , me gustaria mucho si podrias aplicar este ejemplo pero ahora utilizando los servicios de facebook , estoy buscando tutoriales y guias pero no me han resultado mucho , es posible trabajar con algunas dependencia para hacer login con facebook similar a lo que has hecho para Google?
Si claro veré si lo comtemplo en un siguiente video.
Saludos
Hola @Neiser , tengo una consulta , yo lo estoy trabajando en un proyecto de angular : Angular CLI: 15.2.11 Node: 18.15.0 , y me sale este error: ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(LoginModule)[LoginService -> LoginService -> OAuthService -> OAuthService -> OAuthService]:
NullInjectorError: No provider for OAuthService!
Actualizacion: Descubri el problema y era porque no habia colocado en el app.module.ts lo siguiente : OAuthModule.forRoot() , sin embargo me sale este error: RROR Error: Uncaught (in promise): issuer must use HTTPS (with TLS), or config value for property 'requireHttps' must be set to 'false' and allow HTTP (without TLS).
@@hisoka-dddd1452 Ese error surge como una medida de seguridad para asegurar de que las credenciales de autenticación se transmitan de manera segura. Sin embargo, durante el desarrollo local, es posible que desees desactivar temporalmente esta restricción para trabajar con un server de autorización que no tenga configurado https, para resolver ese problema puedes ajustar la configuración de la autenticación, esto puedes agregar a tu config
requireHttps: false
Eso colócalo dentro de tu AuthConfig, a y no olvides dejarlo en true cuando despliegues tu app.
Saludos!
Hola saludos muy buen contenido, tengo una pregunta, en el caso de que quiera hacer ese flujo utilizando oauth pero con un api de odoo por ejemplo que tenga el mismo flujo para chequear si el token es valido y asi me envie valores customizados del usuario, tendrias algun ejemplo al respecto del flujo en cuestión?, no un ejemplo exacto sino un ejemplo del flujo pero tirando a un api para que retorne valores customizados del usuario , buena jornada
No tengo un ejemplo especifico de ello, pero seria muy similiar, solamente que enves de recuperar la informacion de google se deberia llamar al API.
Buenas, estoy teniendo un problema con los Guards. Lo que yo querría hacer es que una vez el usuario ingresó no pueda volver a la landing page porque esa página es pública, es decir para todos los usuarios previo al logueo pero inaccesible post-logeo. Me podrías dar un ejemplo de esto?
Hola Ezequiel, entiendo, lo que puedes hacer es un no-guard de la siguiente manera:
1. Crea un guard y valida si el usuario esta logueado, de ser asi solo redireccionas a tu page "/home" aca te dejo el code.
export class NoAuthGuard {
constructor(private authenticationService: AuthenticationService, private router: Router) { }
canActivate():
| Observable
| Promise
| boolean
| UrlTree {
if (this.authenticationService.isLoggedIn()) {
this.router.navigate(['/home']);
return false;
}
!this.authenticationService.isLoggedIn();
return true;
}
}
Nota: En el metodo isLoggedIn() debes validar si el token esta en el localstorage y si aún no expira.
2. Agrega el Guard a tu routing de la page "/login" de esta manera.
{
path: 'login',
component: LoginComponent,
canActivate: [NoAuthGuard]
}
Con eso es suficiente para lograr ello.
¡Éxitos!
segun veo el tiempo de expiracion es de 1 hora, una vez se vence se renueva? o como podria extender ese tiempo?@@neisercp
de pura casualidad sabes o conoces algún recurso para implementar okta authentication con angular? uso la versión 8 pero puedo actualizar
Si claro la librería más usada es @okta/okta-angular, también recuerda tener una cuenta de desarrollador en okta, posiblemente lo contemple en un siguiente video.
Saludos!
@@neisercp por favor quiero implementarlo en mi trabajo y te mando cafecito
Hola primero muchas gracias por el video muy bueno, sabes hice todo lo que me dijiste y al parecer no me acepta el redirectUri: window.location.origin + '/main', me sale un error de Acceso bloqueado: la solicitud de esta aplicación no es válida, averiguando me sale que es por el redirect, alguna sugerencia?
Revisa el link de redirección que se crea al momento de generar la key google, además recuerda la url de origen.
ojo con colocar en la info de la pantalla de consentimiento, ese fue el origen de mi error, cuando le dejé solo funcionó
thanks much, please, how to get DOB and Gender from google account?
Exceltent, to get information account google, DOB, gender, etc, you can call API people google with token return to you in authetication, besides, you shoud enable permissions in Contacts API, can you check this links, there is an example to call api.
developers.google.com/people/api/rest/v1/people/get
console.cloud.google.com/apis/library/contacts.googleapis.com
Greeting!
@@neisercp Can you help me with details? I have tried many ways
@@kienngo1391 This is how the request should be, look.
const accessToken = 'TOKEN_GOOGLE'; // The acces token you obtained during authetication
const headers = new HttpHeaders({
'Authorization': `Bearer ${accessToken}`
});
// Make a request to the Google API to obtain the user profile infomation
this.httpClient.get('www.googleapis.com/plus/v1/people/me', { headers: headers })
.subscribe((userData) => {
const dateOfBirth = userData.birthday;
const gender = userData.gender;
console.log('DOB:', dateOfBirth);
console.log('gENDER:', gender);
});
Muy bueno el video, estoy usando angular 17 y me da fallos como este y ns solucionarlo: ERROR NullInjectorError: R3InjectorError(Standalone[_AppComponent])[OAuthLogger -> OAuthLogger -> OAuthLogger]:
NullInjectorError: No provider for OAuthLogger!
En Angular 16 no había que usar los providers?
La importación de la library es OAuthModule, y no uso ningún provider, por favor puedes detallar el error, o clonar el proyecto que deje en git, para comparar, o sino comparte tu repo y lo puedo revisar.
Saludos!
Gracias@@neisercp pero ya encontré el error :)
Me alegra que lo hayas podido solucionar@@kangurinho9418
@@kangurinho9418 A que se debia?