Angular: 57. CRUD Firebase. AngularFire2: Autentificación con Google

Vamos a modificar la aplicación para poder autentificarnos con Google antes de entrar al chat.

La  idea es que tengamos que autentificarnos para que nuestros datos aparezcan en el chat.
Lo primero que tenemos que hacer es crear un nuevo componente, al que llamaremos "login", que utilizaremos como pantalla de login.
Luego modificamos el "app.component.html" para comentar la ventana de chat y mostrar el nuevo componente:

Ahora modificamos el html del nuevo componente para mostrar dos botones de login, uno para Google y otro para Twitter (que implementaremos en la siguiente entrada):

Creamos la función ingresar en el componente login:

Ahora sí, vamos a empezar con el login. Primero nos vamos a nuestra cuenta de Firebase y, en la parte de autentificación, seleccionamos el método de acceso:

Pulsamos en la pestaña de habilitar para el de Google y guardamos:

Con esto hemos "activado" el poder conectarnos a los datos de Firebase con una cuenta de Google. Ahora falta implementar el login en nuestro proyecto. Nos vamos a la página de AngularFire2 y buscamos la sección de autentificación de usuarios:

Pulsamos en el link y nos lleva a una documentación para implementar el login en un componente de Angular. Nosotros vamos a hacerlo en nuestro servicio de chat, así que copiamos sólo las partes que nos interesan (imports, inyección en constructor y funciones login y logout):

Y las ponemos en nuestro servicio de chats:

Ahora sólo tenemos que inyectar el servicio en nuestro componente de login:

Con esto ya debería funcionar correctamente el login. Sin embargo, vamos a mostrar por consola los datos del usuario registrado. Para ello volvemos a modificar el servicio del chat como sigue:

Como se puede ver, hemos creado una variable usuario en el servicio, y hemos modificado el constructor para suscribirnos al estado del usuario y obtener el nombre y el uid del usuario registrado.

Ahora si arrancamos la aplicación y pulsamos en el botón de Google, nos llevará a un popup de autentificación:

Una vez autentificados, nos mostrará por la consola los datos de la cuenta:

Y eso es todo de momento.