¿Qué es Firebase Auth?
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- Como veíamos antes, la mayoría de proyectos necesitan algún tipo de autenticación.
- Puedes construirlo tú mismo/a (en ocasiones si el proyecto lo exige esa es la solución a seguir) o puedes utilizar un servicio externo para que cumpla esa función integrándolo en tu proyecto. Firebase Auth es perfecto para esta tarea. Es sencillo de utilizar y muy potente.
- Como ves permite utilizar proveedores sociales como Google, Facebook, GitHub y demás. Incluso autentificación con número de teléfono.
- Además incluye una serie de componentes llamados Firebase UI para integrar todo el flujo de de acceso de tu aplicación. En el curso no lo usaremos, sino que haremos toda la integración de forma manual.
- Por ejemplo, antes de comenzar a integrar Firebase Auth en VueTalk vamos a poner a prueba el proveedor social de Google.
- Primero, debemos ir a la consola de Firebase, seleccionar nuestro proyecto creado anteriormente, hacer click en "Authentication" y activar al menos un método de inicio de sesión. Por ahora, Google.
- Ahora, de nuevo en la documentación, vamos al apartado Web y proveedor Google para seguir las instrucciones, aunque utilizando el wrapper
async/await
en lugar dePromises
. - Por ejemplo, en nuestro
Home.vue
podemos crear dos métodos locales para hacer login y logout con Google. Primero, creando un nuevo proveedor connew firebase.auth.GoogleAuthProvider
y luego usándolo para crear un nuevo popup de Auth consignInWithPopup
.
// Home.vue
methods: {
async doLogin() {
try {
const provider = new fb.auth.GoogleAuthProvider();
const user = await auth.signInWithPopup(provider);
} catch (error) {
console.error(error.message);
}
},
async doLogout() {
try {
await auth.signOut();
} catch (error) {
console.error(error.message);
}
}
}
- Al ponerlo en práctica verás como el usuario se ha creado en la consola Auth de Firebase. Podemos crear un saludo personalizado utilizando la propiedad
displayName
. - Por supuesto hay mucho más que hacer, como por ejemplo utilizar algún tipo de persistencia ya que al refrescar el navegador perdemos el estado de autentificación. Sin embargo el objetivo de esta lección era mostrarte en esencia cómo funciona Firebase Auth.
- En la siguiente lección empezaremos a implementar un sistema de autentifcación completo basado en usuario y contraseña y centralizado en su própio módulo de Vuex.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?
Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.