angular tutorial

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.

firebase

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

autentificacion de facebook

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'
 vamos a agregar nuestras librerías.
ahora vamos a crear un item observable, ya que estara al pendiente de cualquier cambio en la base de datos.
items: Observable<any[]>;
  constructor(db: AngularFirestore, public afAuth: AngularFireAuth) {
    this.items = db.collection('items').valueChanges();
  }
recuerden usar Cloud Firestore en database en firebase.
db.collection es el nombre de la base de datos.

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');
      }

por Cesar Flores

Programador de tiempo completo, Gamer de medio tiempo y fotógrafo ocasionalmente, me gusta el front-end y mi framework favorito es angular aunque no por eso le hago el feo a un nuevo lenguaje.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

%d