Desenvolvimento

10 jan, 2018

Ionic 3 + Angular 5 – Login com Facebook Native

Publicidade

Desde que comecei a estudar Ionic tenho feito coisas bem interessantes e uma delas foi implementar em um projeto pessoal um cadastro de usuários via Facebook. Gostei muito do resultado e por isso gostaria de compartilhar com vocês.

Pré requisitos

Ponto de partida

Antes de criar o app, certifique-se de já ter um projeto Ionic rodando, caso ainda não tenha, você pode começar com o seguinte comando:

ionic start nome-app tabs

Criando app uma conta no dashboard facebook developers

Para que seja possível logar com Facebook, é necessário criar um app diretamente na API que a rede social disponibiliza. A configuração é um pouco chatinha e eu penei um pouco pra conseguir.

Sao 5 passos que você precisa realizar no Dashboard do Facebook Apps.

1. Criando o app

Preencha os dados solicitados na imagem abaixo:

2. Configurações do Dashboard

O ID do aplicativo é muito importante, assim como também a chave secreta. Atente-se a versão da API, vamos precisar dela mais tarde.

3. Adicionando o produto a nossa conta

Até o momento, possuímos somente uma conta e não temos nenhum produto vinculado a ela. Vamos adicionar o Login com Facebook.

Clique em adicionar produto e procure por Login com Facebook. Entre no painel do produto e siga as configurações abaixo:

4. Adicionando uma plataforma

Para conseguir logar em dispositivos móveis, teremos que adicionar as plataformas escolhidas. Vamos começar com o Android. Para isso, no dashboard clique em configurações.

5. Configurando a platforma Android

Depois de selecionado a opção Android, será necessário realizar as seguintes configurações:

Faça os mesmos passos para configurar outras plataformas.

Instalação de plugins essenciais do Ionic

O Ionic disponibiliza um plugin nativo para integração da API de login do facebook, Abaixo, aprenda a configurar e instalar.

ionic cordova plugin add cordova-plugin-facebook4 
--variable APP_ID="1883896635255783" 
--variable APP_NAME="app-tutorial"

npm install --save @ionic-native/facebook

Apos instalar o ionic-native/facebook, seu arquivo config.xml receberá uma atualização, ficando assim:

<plugin name="cordova-plugin-facebook4" spec="^1.9.1">
    <variable name="APP_ID" value="1883896635255783 />
    <variable name="APP_NAME" value="app-tutorial />
</plugin>

Criando pagina de autenticação

Vou criar uma pagina para o login chamada autenticação. Podemos usar o comando:

ionic generate page autenticacao

Agora vamos explorar as possibilidades da API do Facebook Login com o uso do TypeScript. Nesse exemplo estou utilizando métodos da API para realizar o login autenticacao.ts.

import { Facebook } from '@ionic-native/facebook';

@IonicPage()
@Component({
  selector: 'page-autenticacao',
  templateUrl: 'autenticacao.html'
})

export class AutenticacaoPage {
  constructor() {
    //atribuicao do pacote do facebook
    public facebook: Facebook,
  }

//método para chamar api do facebook e salvar no banco o usuario    
loginFacebook() {
     let permissions = new Array<string>();
     permissions = ["public_profile", "email"];

     this.facebook.login(permissions).then((response) => {
      let params = new Array<string>();

      this.facebook.api("/me?fields=name,email", params)
      .then(res => {

          //estou usando o model para criar os usuarios
          let usuario = new Usuario();
          usuario.nome = res.name;
          usuario.email = res.email;
          usuario.senha = res.id;
          usuario.login = res.email;
        
          this.logar(usuario);
      }, (error) => {
        alert(error);
        console.log('ERRO LOGIN: ',error);
      })
    }, (error) => {
      alert(error);
    });
  }

  logar(usuario: Usuario) {
    this.salvarService.salvarFacebook(usuario)
    .then(() => {
        console.log('Usuario cadastrado via facebook com sucesso!');
    })
  }
}

No código acima, estou utilizando a conversão de tipos do TypeScript para criar um tipo de usuário, e para criar o objeto model, vamos escrever da seguinte forma:

export class Model {

  constructor(objeto?) {
      Object.assign(this, objeto);
  }

}

export class Usuario extends Model {
    codigo: number;
    nome: string;
    email: string;
    login: string;
    senha: string;
}

Agora que já temos a lógica do component aplicado com o Typescript, vamos partir para o Html. O Ionic disponibiliza tags personalizadas e vamos usa-las para criar a interface com o botão (Login com Facebook).

<ion-header>
  <ion-navbar>
    <ion-title>
      Login com Facebook
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <button ion-button full icon-left (click)='loginFacebook();'>
      <ion-icon name="logo-facebook"></ion-icon>Login com Facebook
    </button>
</ion-content>

Repare no Html acima que temos o eventBind do Angular com evento de click no botão, direcionando nossa ação para um método chamado loginFacebook, o que significa que ao clicar no botão (Login com Facebook), executaremos o métodos que faz a chamada para a API.

Resultado

Execute a aplicação em um emulador para rodar o Emulador do Android Studio, rode:

ionic cordova run android -l -c

Acesso ao Painel do app:

Acho que é isso pessoal. Não são poucos passos, mas vale a pena quando vemos o resultado. Espero que tenham gostado e qualquer dúvida ou feedback, dê um like, deixe seu comentário, critica, dúvida ou sugestão. Participe.

Grande abraço!