Ionic 3 + Angular 5 — Login com Facebook Native
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 você pode começar com o seguinte comando:
Criando app uma conta no dashboard facebook developers
Para que seja possível logar com facebook e 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. rs.
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 moveis teremos que adicionar as plataformas escolhidas vamos começar com 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 mesmo 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.
Apos instalar o ionic-native/facebook seu arquivo config.xml recebera uma atualização ficando como abaixo:
caso tudo tenha encontrado essa marcação seu config.xml foi configurado com êxito. Com esse passos realizados podemos partir pro TypeScript.
Criando pagina de autenticação
Vou criar uma pagina para o login chamada autenticação podemos usar o comando:
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
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:
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 criar a interface com o botão (login com facebook).
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:
No meu caso o usuário foi salvo em um Banco de dados no meu Backend que foi feito em Java. uma vez retornando os dados do usuário o dever de casa da API do facebook esta cumprido. Agora cabe a você o que deseja fazer com os os dados.
Brinde (Logando em um painel)
Agora vamos usar os dados do usuário que salvei no meu banco de dados para realizar um login no app:
Acesso ao Painel do app
Acho que é isso pessoal, nã são poucos passos mais vale a pena quando vemos o resultado. Espero que tenham gostado e qualquer duvida ou feedback favor, da aquele like, ops, deixe seu comentário, critica duvida ou sugestão. Participe.
Grande abraço!
