Cómo integrar Facebook login con Firebase

Seria bueno la autenticacion con facebook pero con una base de datos como mysql o postgresql Alguien sabe como?

Saludos

Irving Sarmiento

Esa implementación queda fuera por parte de Angular. Lo que tienes que hacer es desarrollar el backend con otra tecnología y desarrollar una Rest API para consumir los servicios con Angular de la misma manera en la que lo haces ahora en el curso, bueno casi de la misma manera solo con algunos pequeños ajustes

Mabel Exalta Peña Garcia

alguien me puede ayudar a entender la diferencia entre import { firebase } from “@firebase/app”; y import * as firebase from “@firebase/app”;

gracias

Abraham Sanchez

Normalmente cuando haces un import de una sola clase exportada en un archivo javascript es asi:

class MiClase {
	//codigo de mi clase
}

export default MiClase

Luego para usarla:

Import MiClase from 'MiClase.js'

Pero ahora suponemos que tenemos un archivo js con multiples export ejemplo:

export const DEFAULT_ENV = "production";
export const getEnv = env => { /*code*/ };
export const setEnv  = env => { /*code*/ };

Para poder usar alguno de estos elementos se aplica como una destructuracion al archivo javascript al hacer import ejemplo:

Import { DEFAULT_ENV, getEnv } from "./utils.js";

De esta forma solo puede usar solo las funciones y constantes que solo me interese de ese archivo javascript en especifico.

Pero si necesito usar todo lo que esta en ese archivo javascript pues entonces lo uso de la siguiente manera:

import * as Utils from "./utils.js";

Esto significa que todos los elementos que contiene el archivo utils.js seran almacenados en un objeto que estoy llamano Utils. El * significa que llamas todos los elementos, pero tambien puedes usar destructuración. Usando esta forma ahora puedes usar los diferentes elementos de la siguiente forma:

const currentEnv = Utils.DEFAULT_ENV;
Utils.setEnv(currentEnv);

En resumen:

La diferencia entre import { firebase } from “@firebase/app”; y import * as firebase from “@firebase/app”; es que uno esta llamando un elemento especifico del paquete @firebase/app y el segundo llama a todos los elementos contenidos en el paquete @firebase/app para usarlos como un objeto llamado firebase

Espero haberme explicado bien. Un saludo.

MA MateriaGris01

Si no les autentica con facebook, seguramente es porque la cuenta con la que ingresan es la misma al email que registraron en el registro con email, Intenten ingresar a la consola de firebase -> Authentication -> Opciones avanzadas - boton “Cambiar”. Debe quedar en: “Varias cuentas por dirección de correo electrónico”.

Jesús Olivares Olivares Suarez

Este video debería ir despues del de logout… Aqui usan :
**import {Router} from “@angular/router”; **
Y eso lo explican es en el video 65

Francisco Manuel Velásquez Escobar

Es correcto amigo, se debe importar el router y agregar el constructor para poder redirigir a /lugares luego del login.

import {Injectable} from "@angular/core";
import {AngularFireAuth} from "angularfire2/auth/auth";
import * as firebase from 'firebase/app';
import {Router} from "@angular/router";

@Injectable()
export class AutorizacionService {
	constructor(private angularFireAuth: AngularFireAuth, private router: Router){
		this.isLogged();
	}
	public facebookLogin(){
		this.angularFireAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())
			.then((resutl) => {
				console.log(resutl);
				alert('usuario loggeado con Facebook');
				this.router.navigate(['lugares']);
			})
			.catch((error) =>{
				console.log(error);
			});
	}
	public login = (email, password) => {
		this.angularFireAuth.auth.signInWithEmailAndPassword(email, password)
			.then((response) => {
				alert('Usuario Logueado con éxito');
				console.log(response);
				this.router.navigate(['lugares']);
			})
			.catch((error) => {
				alert('Un error ha ocurrido');
				console.log(error);
			})
	}
	public registro = (email, password) => {
		this.angularFireAuth.auth.createUserWithEmailAndPassword(email, password)
			.then((response) => {
				alert('Usuario Registrado con éxito');
				console.log(response);
				this.router.navigate(['lugares']);
			})
			.catch((error) => {
				alert('Un error ha ocurrido');
				console.log(error);
			})
	}
	public isLogged(){
		return this.angularFireAuth.authState;
	}
}

Andres Felipe Jerez Giraldo

Como extra, recordar que si has registrado un correo ya anteriormente en firebase y ese mismo es el que usa tu cuenta de fb va a saltar error por que el usuario ya existe con el email anterior.

Joshua Michael Rodriguez

Al momento de dar clic en el botón Create new Facebook App de la pagina:

Me aparece el siguiente mensaje:

Este contenido ya no está disponible
El contenido solicitado no se puede mostrar en este momento. Es posible que no esté disponible, que el enlace seleccionado haya caducado o que no tengas permiso para ver esta página.

¿Alguien sabe a que se podría deber esto?

Diego Forero

Team Platzi

A mi me funciona, ya creaste primero tu developer account?

Joshua Michael Rodriguez

Aun no, quizás se deba a eso.

Gracias, lo intentaré.

Jhon Carmona

Presente un error “FacebookAuthProvider’ of undefined” lo solucione cambiando la importación.
import { firebase } from “@firebase/app”;

Yohan Estiven Arias Vasquez

Excelente tu aporte friend! Muchas gracias

Usuario anónimo

User

Buena recomendación.

Alejandro Valenzuela

Buenas compañeros, les dejo el link para aquellos que quieran probar la autenticacion pero con gtiHub…es mucho mas fácil que hacerlo con facebook.

Saludos.

Carlos Uriel de Jesus Sánchez González

esta muy bien el logueo con redes sociales

Jesus David Mendez Coronell

Para los que se le dificulta hacerlo con facebook, solo cambien el servicio por otro como el de google es gratis

Yonny Rivera Espinoza

Una pregunta como puedo hacer una autenticacion de dos factores en Angular 6

Miguel Fernando Urquijo Gómez

en facebook developers esta la opción de poder registrar la aplicación para iniciar sesión con facebook!

Miguel Fernando Urquijo Gómez

recuerden ver primero el **video 65 **que explican la parte de logout y luego si ver este!

Luis Felipe Cardona Florez

Hay algo que nunca he etendido, que significa auntenticarse en una plataforma a traves de otra ? que es eso de entrar por ejemplo a spotify, a un vlog, a shopify o cualquier otra plataforma a tra vez de otra plataforma como facebook, instagram, tweeter ?

Diego Forero

Team Platzi

Usas el sistema de autenticación por ejemplo de redes sociales, con esto no tienes que recordar dos contraseñas si no solo una, las redes sociales preguntan por permisos y generan un token el cual es almacenado y con este se valida que puedas acceder al servicio o plataforma.

Luis Felipe Cardona Florez