Login en firebase con facebook y angular
Algo muy común en paginas web es la parte de los registros, google sabe que eso es algo que nos quita tiempo, así que nos propone una solución muy eficiente, que es usar firebase en nuestro proyecto, si no sabe que es firebase puedes ver aca.
Para usar Firebase en angular , nos proponen usar algo que se llama angularfire y que es muy fácil de usar.
Instalando AngularFire
vamos a crear nuestro proyecto y vamos a usar nuestra consola dentro del proyecto para poner lo siguiente.
npm install firebase angularfire2 --save
una vez instalado vamos a crear un proyecto en la página de firebase.
cuando termina de crear el proyecto vamos a ver lo siguiente.
vamos a tocar la opción de añade firebase en tu web y nos saldrá una ventana con información, este lo copiamos para agregarlo a nuestro proyecto de angular.
Proyecto en Angular
hasta ahora en angular hemos usado
entre otras cosas pero ahora vamos a ver algo importante, las propiedades environmet.
Environmets
Son propiedades donde podemos hacer cambios entre producción, desarrollo o cualquier otro estado, estos sirven por ejemplo para tener la ruta del webservices para pruebas y otro para desarrollo, sin la necesidad de cambiar cada x tiempo o de forma manual todos estas constantes.
asi que vamos a poner lo siguiente en nuestro archivos
Envirinmets.ts
export const environment = {
production: false,
firebase: {
apiKey: "AIzaSyBlQh0Xh-AfuzKZ0wl0njqlUa5Jqg4skZA",
authDomain: "pruebaunprogramador.firebaseapp.com",
databaseURL: "https://pruebaunprogramador.firebaseio.com",
projectId: "pruebaunprogramador",
storageBucket: "pruebaunprogramador.appspot.com",
messagingSenderId: "934861995931"
}
};
con esto tendremos la configuración inicial para angularfire.
ahora vamos a importar las siguientes librerias en nuestro app module
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireAuthModule } from 'angularfire2/auth';
la primera linea es la principal y de las mas importantes, ya que tiene una gran libreria de firebase.
la segunda linea AngularFirestoreModule es otra forma de firebase, por decirlo de una forma sencilla es la versión 2 de firebase, aunque esta en estado beta, pero vale la pena.
y la ultima linea es la que usaremos para hacer autentificacion con firebase.
Autentificación de facebook en firebase
vamos a entrar en nuestro proyecto de firebase, vamos a ir a Authentication > metodos de inicio y buscamos facebook, podemos habilitar otros si queremos.
para hacer esto debemos entrar a la siguiente página de facebook, aqui vamos a crear una nueva aplicación.
una vez creada vamos a añadir un producto, vamos a buscar inicio de facebook.
en firebase cuando habilitamos facebook, nos da un link, ese link vamos a copiarlo y lo vamos a agregar en nuestra app de facebook en la sección donde dice URI de redirección de OAuth válidos.
Login en firebase y angular
vamos a hacer todo por el momento en nuestro app.component
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app'
items: Observable<any[]>;
constructor(db: AngularFirestore, public afAuth: AngularFireAuth) {
this.items = db.collection('items').valueChanges();
}
en este momento ya podemos ver nuestra info de base de datos
la estructura es la siguiente
nuestro html queda de la siguiente manera
<ul>
<li class="text" *ngFor="let item of items | async">
{{item.name}}
</li>
</ul>
Login de redes sociales en firebase y angular
vamos a colocar lo siguiente en el html
<div *ngIf="afAuth.authState | async as user; else showLogin">
<h1>Hello {{ user.displayName }}!</h1>
<img [src]="user.photoURL" width="70px" />
<button (click)="logout()">Logout</button>
</div>
<ng-template #showLogin>
<p>Please login.</p>
<button (click)="login()">Login with Google</button>
<button (click)="loginfb()">Login with Facebook</button>
<button (click)="loginemail()">Login with Email</button>
<button (click)="singupemail()">singup with Email</button>
</ng-template>
La funciones que nos da firebase son muy simple así que será una explicación simple
afAuth es la clase que dimos de alta en el constructor, este contiene un método auth y a su vez tiene la propiedad signInWithPopup, esto lo que hace es abrir una nueva ventana para que la autenticación sea del proveedor.
Es muy parecido acceder por medio de twitter, facebook o gmail, la unica diferencia es el registro por email, aqui tenemos que agregar los datos y luego hacer el login.
Ingresa con Google
this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
Login con Facebook
var provider = new firebase.auth.FacebookAuthProvider();
this.afAuth.auth.signInWithPopup(provider);
Acceso con Email
Registro
this.afAuth.auth.createUserWithEmailAndPassword("email@gmail.com","micontraseña").catch( (error) => {
console.log(error.code);
console.log(error.message);
});
Login
this.afAuth.auth.signInWithEmailAndPassword("email@gmail.com","MiEmailPassword").catch( (error) => {
console.log(error.code);
console.log(error.message);
});
como un tip es que tenemos las siguientes propiedades para los login, estas son las propiedades de los usuarios cuando hacen login, onAuthStateChanged es un método que checa si hay algún cambio en el login y nos trae sus propiedades.
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
user.providerData.forEach(function (profile) {
console.log("Sign-in provider: "+profile.providerId);
console.log(" Provider-specific UID: "+profile.uid);
console.log(" Name: "+profile.displayName);
console.log(" Email: "+profile.email);
console.log(" Photo URL: "+profile.photoURL);
});
} else {
// No user is signed in.
console.log('nel');
}