Login con Google desde Angular 16

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/nei...

[@neisercp]

Suscribete y comparte, que estoy pensando grabar una segunda parte(BackEnd) Escucho sus sugerencias ¿En que lenguaje desean que desarrollemos el BackEnd ? 😊

[@chuny_dev]

Nest

[@facundowehrli2322]

java

[@neisercp]

@@facundowehrli2322 La segunda parte se hizo en NestJS voy a conciderar hacerlo en java, además se vienen mas videos de java muy interesantes.

[@facundowehrli2322]

muchas gracias! me parecía interesante hacer un login completo sumandolé JWT + SpringSecurity@@neisercp

[@santiagobruno_t1581]

@@neisercp gracias genio!! consulta hiciste el video del back con Java?

[@JulianLasso]

Gracias por compartir la información, me fue de muchísima utilidad

[@neisercp]

@@JulianLasso Que bueno que te sirvió, comparte para llegar a más personas crack 😉

[@jero.aliaga]

Excelente tutorial, estuve meses probando con otros métodos de autenticación y siempre algún problema surgía, con esta forma funcionó todo perfecto a la primera. Muchísimas gracias

[@neisercp]

Me alegra que te haya servido, suscribete y comparte crack.

[@SrQuesoH]

Maravilloso, simple, directo, no te das vueltas, simplemente un video grandioso gracias :'D

[@neisercp]

Muchas gracias, me alegra que te haya servido, suscribete y comparte para llegar a mas personas. Saludos crack!

[@programadorextraterrestre]

Muy buen video, me viene como anillo al dedo para algo que estoy creando

[@neisercp]

Que bueno que te sirvió, suscribte y comparte para seguir subiendo más contenido de este tipo.

[@henryviloria2898]

Excelente video, me ayudó bastante en mi proyecto en la U

[@neisercp]

Me alegra que te haya servido.

[@patriciopardo4238]

Excelente video! te felicito por tu dominio en el tema, lo explicaste de una manera muy simple. Sub++

[@neisercp]

Muchas gracias, estoy preparando más contenido de este tipo, comparte para poder llegar a más personas. Saludos!

[@renzo1255]

Excelente video !

[@neisercp]

Que bueno que te sirvió. Saludos!

[@naranjaapps5]

Excelente!!!

[@neisercp]

Que bueno que te sirvió, suscribete y comparte crack 😉

[@sergio058-pb6hf]

Amigo muy bien vídeo, me sacaste una duda grande y es que yo solo pensaba que se podia implementar solo en el backend, pero ya veo que no. Ahora quiero tu punto de vista desde la seguridad de la web, recomendarias implementar esto en el frontend?? si en caso uno quiere una aplicación segura, porque el id token si contiene informacion muy personal. Seria mas seguro implementar el login en el backend en su lugar??. Saludos bro.

[@neisercp]

@@sergio058-pb6hf De poder claro que se puede, pero no es recomendable, lo ideal es validar la auth en el back, para mayor seguridad, tal y como lo puedes ver en el siguiente video, recuerda que hay parte 2 del video. Saludos crack!

[@sergio058-pb6hf]

@@neisercp Muchas gracias!!

[@eduardo.hernandez91]

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

[@neisercp]

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.

[@YILSONALEXISMALAMBOMADRIGAL]

Gracias Bro buen video

[@neisercp]

Muchas gracias. Saludos!

[@ARODIEMMANUELHAROPALACIOS]

Grande hermano, deberías hacer un curso en udemy, te iría muy bien

[@neisercp]

Muchas gracias estos comentarios me motivan a seguir creando este tipo de contenido, comparte. Un abrazo!

[@hisoka-dddd1452]

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!

[@hisoka-dddd1452]

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).

[@neisercp]

@@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!

[@JeyssonReino]

Uno con Backend con Spring por favor, existe poca información en español sobre como hacerlo.

[@neisercp]

Lo tomare en cuenta, crack!!!

[@yzzygomez]

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?

[@neisercp]

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!

[@hisoka-dddd1452]

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?

[@neisercp]

Si claro veré si lo comtemplo en un siguiente video. Saludos

[@AndreyRojasGarcia-cw1wv]

Saludos, puedo hacer lo mismo con Angular 17?? Y cuando creo el proyecto, no me sale el app.modules, ese es indispensable?

[@neisercp]

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.

[@chuny_dev]

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?

[@neisercp]

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!

[@camilorroa8835]

que hago cuando el getIdentityClaims es null o no trae ninguna de los scopes?

[@neisercp]

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()

[@ferlezcano]

Buenísima explicación! 👌

[@kangurinho9418]

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?

[@neisercp]

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!

[@kangurinho9418]

Gracias@@neisercp pero ya encontré el error :)

[@neisercp]

Me alegra que lo hayas podido solucionar@@kangurinho9418

[@hisoka-dddd1452]

@@kangurinho9418 A que se debia?

[@isaacdgz9967]

@@kangurinho9418 que era?

[@SoyJavero]

de pura casualidad sabes o conoces algún recurso para implementar okta authentication con angular? uso la versión 8 pero puedo actualizar

[@neisercp]

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!

[@SoyJavero]

@@neisercp por favor quiero implementarlo en mi trabajo y te mando cafecito

[@lodden7]

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?

[@neisercp]

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!

[@yzzygomez]

segun veo el tiempo de expiracion es de 1 hora, una vez se vence se renueva? o como podria extender ese tiempo?@@neisercp

[@francilvanlima]

Muito bom!

[@neisercp]

Thank you !!!

[@joaquinvargas6842]

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?

[@neisercp]

Revisa el link de redirección que se crea al momento de generar la key google, además recuerda la url de origen.

[@programadorextraterrestre]

ojo con colocar en la info de la pantalla de consentimiento, ese fue el origen de mi error, cuando le dejé solo funcionó

[@kienngo1391]

thanks much, please, how to get DOB and Gender from google account?

[@neisercp]

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!

[@kienngo1391]

@@neisercp Can you help me with details? I have tried many ways

[@neisercp]

@@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); });