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
- Ionic 3;
- Angular 5;
- https://developers.facebook.com/apps
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!