Primero vamos a implementar el logout. Lo primero que vamos a hacer es modificar la función logout del servicio del chat para poner manualmente el usuario a nulo, para que no queden datos del usuario:
Luego nos vamos al componente de la aplicación y le inyectamos el servicio del chat para poder llamar a su función logout:
Ahora modificamos el html del componente de la aplicación para añadir un botón de logout que llamará a la función logout del servicio y que sólo se mostrará si ya hay un usuario registrado.
También modificamos los botones de login para que aparezcan sólo cuando no hay usuarios registrados:
Ahora si arrancamos la aplicación, comprobamos que sólo aparecen los botones de login:
Y si nos registramos con Google, sólo aparece el botón de logout:
Con esto ya tendríamos el logout implementado.
Ahora vamos a ver cómo autentificarnos con Twitter.
Como con Google, tenemos que irnos a la web de Firebase, a la sección de autentificación, y activar la de Twitter:
Sin embargo, en este caso nos solicitan dos claves que tenemos que buscar de Twitter, así que pulsamos en el enlace señalado:
Desde la web a la que nos lleva el enlace, nos vamos a la parte de Twitter en web:
Y nos aparecerán los pasos que tenemos que dar. En nuestro caso sólo nos queda registrar nuestra aplicación en Twitter, así que pulsamos el enlace:
En la web a la que nos lleva, pulsamos en crear nueva aplicación:
Antes de seguir, volvemos a Firebase, donde al activar la autentificación de Twitter nos daban un enlace de callback, que tenemos que copiar porque nos lo van a pedir en uno de los campos de Twitter:
Ahora sí, vamos rellenando los campos de la nueva aplicación e Twitter con los datos que queramos:
No nos olvidamos de copiar la dirección de callback:
Seguimos rellenando campos y pulsamos en el botón de crear:
Una vez la aplicación está creada, nos vamos a la parte de "keys and tokens" y comprobamos que allí están las claves que necesitamos para Firebase:
Las copiamos en Firebase y guardamos. Ya tenemos activada la autentificación de Twitter mediante Firebase:
Ahora, por dar un poco más de seguridad, volvemos a la aplicación de Twitter y en la parte de permisos marcamos solo lectura y guardamos:
Con esto ya estaría todo configurado. Ahora sólo falta modificar nuestro código para llamar a la función correspondiente.
Primero modificamos la función de ingresar del componente de login para pasarle a la función de login del servicio el proveedor (para distinguir si hemos pulsado en el botón de Google o de Twitter):
Y, lógicamente, modificamos la función de login del servicio para recibir ése parámetro.
Además, llamamos a un servicio de login u a otro dependiendo del proveedor:
Y ya estaría completado. Ahora si arrancamos la aplicación y pulsamos en el botón de Twitter, nos aparecerá la ventana de login y podremos autentificarnos:
Y eso es todo.
No hay comentarios:
Publicar un comentario