Login com facebook utilizando Ionic + Firebase

dê ao usuário a opção de logar em sua aplicação através de sua conta no facebook.

Muitos aplicativos oferecem a opção de login com o facebook isto poupa tempo permitindo “pular” o registro com o método tradicional de e-mail e senha, aprimorando a experiência de uso do usuário.

Neste tutorial você verá como ativar o login de usuários com facebook, usando o Firebase — Authentication.

Crie uma nova aplicação Ionic.

ionic start facebook-login blank

assim que o comando for finalizado insira o comando:

npm install firebase angularfire2 --save

Obtenha um id para seu app usando o facebook developers e ativando o login pelo facebook no console do firebase

Esta parte é bem chata, então tenha um pouco de paciência :)

Se você quer desenvolver uma aplicação que tenha alguma funcionalidade relacionada ou integrada ao facebook é preciso que você crie uma conta de desenvolvedor no facebook developers.

Basta clicar em começar e logar com a sua conta do facebook. Feito isto crie um novo aplicativo — selecione a opção Facebook Login e em seguida clique em www.

Em site url digite : https://localhost/ pois é onde nossa aplicação rodará ao darmos o comando serve do Ionic cli.

clique em save e em seguida vá para seção de configurações — valid OAuth…

Neste campo informaremos o endereço fornecido pelo Firebase quando ativamos o método de login pelo facebook.


Acesse o console do firebase com sua conta Google. Crie um novo projeto, navegue até a seção ‘authentication’ e habilite o método de login pelo Facebook. Clique no toggle ativar e copie o link que aparece ao fim do “card”.

Cole este link naquele campo que pede uma url válida no facebook developers. Assim que colar o link salve as alterações e clique em dashboard — ou painel. Copie e cole o ID do aplicativo e a chave secreta do aplicativo — lembre-se de fornecer sua senha ao solicitar que sua chave seja mostrada.

Finalmente esta é a ultima parte antes de começar a codificar. No console do firebase clique em configuração da web e copie aquilo que estiver dentro das chaves de variável config.


Configurando os módulos do ionic

certo, agora que a parte massante foi finalizada abra sua aplicação em seu editor de texto favorito — Atom, Sublime etc.

Navegue pela estrutura de pastas do projeto e clique com o botão direito do mouse sobre a pasta app para criar um novo arquivo. Chame este arquivo de firebase.credentials.ts e cole as configurações que copiamos do firebase nele.

Abra app.module.ts, importe os módulos do AngularFireAuth estes módulos foram baixados no momento em que executamos o comando ‘npm install firebase angularfire2--save’. Importe e ‘declare’ os módulos dentro de imports.

Vamos precisar importar os seguintes módulos:

Crie as funções de login e logout em sua aplicação

Por questões relacionadas de preguiça vamos usar a página home. Abra o arquivo home.ts importe o módulo do firebaseAuth nesta página e crie um construtor para o angularfire.

import firebase from 'firebase';
import { AngularFireAuth } from 'angularfire2/auth';
...
constructor(
...
private af : AngularFireAuth
) {}

com isto feito siga para a página home.html e crie dois botões com as funções de login e logout. Estas funções serão ativadas com um evento de clique.

Volte ao arquivo home.ts e crie as funções que passamos nos botões. Elas terão a seguinte estrutura.

A primeira função abri um espécie de popUp pedindo para que o usuário dê permissão para que nossa aplicação use suas credenciais do Facebook.

Teste sua aplicação, para testá-la rode no prompt de comando-windows ou no terminal o comando

ionic lab

este comando inicia um servidor local em sua máquina que será acessado através da porta 8100. Se estiver rodando a aplicação no google chrome pressione f12 para inspecionar e na aba console veja um objeto contendo os dados do usuário.

Por hoje é só, espero que o tutorial tenha sido útil para você!