Neste primeiro artigo explicarei como realizar autenticação em redes sociais utilizando um aplicativo híbrido desenvolvido com o Quasar Framework v1.0 integrado com o Cordova e com a biblioteca Hello.js.
Iremos primeiramente criar um aplicativo na plataforma Facebook for Developers de forma semelhante ao explicado neste artigo.
Após acessar o site, selecionar “Meus aplicativos” e clicar em “Criar aplicativo”.
Em seguida, deve-se informar o nome do aplicativo e o e-mail de contato.
Na tela principal, clicar em “Integrar Login do Facebook”.
Em Configurações > Básico, informar como domínio do aplicativo: https://localhost e salvar as alterações.
Em Produtos > Login do Facebook > Configurações, marcar todas as opções com “Sim” e informar https://localhost/ no campo “URIs de redirecionamento do OAuth válidos”. Salvar as alterações.
Pronto! Seu aplicativo está pronto para ser usado em autenticação com o Facebook, porém, ainda não é o momento. Vamos agora criar o aplicativo de autenticação no Google.
Acessar o Console de Desenvolvedores do Google e criar um novo projeto.
Informe o nome do projeto e pressione em “Criar”.
Em APIs e serviços > Painel, clicar em “ATIVAR APIS E SERVIÇOS”.
Acesse a tela “Biblioteca de APIs”, pesquisar por “Google People API” e pressionar em “ATIVAR”.
Na visão geral da API, pressionar em “CRIAR CREDENCIAIS”.
Acesse o menu “Credenciais”, selecione “People API”, “Navegador da Web(Javascript)” e “Dados do usuário”. Finalmente, clicar em “Preciso de quais credenciais?”.
Na janela que abrir, pressionar em “CONFIGURAR A TELA DE CONSENTIMENTO”.
Na aba “Tela de Consentimento OAuth”, informar apenas o nome do aplicativo e pressionar em “Salvar”.
Já na aba “Credenciais”, clicar em “Criar credenciais” e selecionar “ID do cliente OAuth”.
Na tela “Criar ID do cliente do OAuth”:
- selecionar “Aplicativo da Web”;
- criar um nome para o ID do cliente OAuth;
- Em “Origens JavaScript autorizadas”, adicionar os endereços: https://localhost e http://localhost;
- Em “URIs de redirecionamento autorizados”, adicionar os endereços: https://localhost/, http://localhost/ e http://localhost/login;
- Pressionar em “Criar”.
Finalmente o ID do seu cliente é criado.
Estamos prontos para testar a autenticação tanto com Facebook quanto com o Google.
Aplicativo de Teste
Faremos uma simulação onde o usuário poderá se cadastrar e se logar no sistema após se autenticar em uma rede social. Os dados serão salvos no localStorage para que o fluxo aconteça semelhante a requisições por HTTP.
Baixe o projeto de teste desenvolvido com Quasar v1.0, Cordova e Hello.js através desta URL: https://github.com/lucianopereira86/quasar-cordova-hellojs
No arquivo “package.json”, informe o ID do aplicativo do Facebook e do Google que você criou.
Abra um terminal e execute a partir da raiz do projeto os seguintes comandos:
Baixar pacotes:
npm install
Realizar a geração de Build do aplicativo:
quasar build -m cordova -T android
Entrar na pasta do Cordova:
cd .\src-cordova\
Gerar Build do Cordova:
cordova build android
Executar o aplicativo no seu aparelho:
cordova run android
A tela de login apresenta um botão para cada rede social e um formulário padrão.
Primeiramente será necessário se cadastrar no sistema. Portanto, pressione em “REGISTER”.
A tela de cadastro possui estrutura semelhante a de login.
Ao clicar em uma rede social, uma janela de autenticação irá aparecer. Após confirmar seus dados, o cadastro será realizado no sistema e o usuário será direcionado à tela de login novamente.
Basta selecionar a mesma rede social com a qual se cadastrou que terá acesso à tela interna do aplicativo.
Conclusão
Você aprendeu a criar aplicativos autenticação no Facebook e no Google com autenticação OAuth e utilizou um fluxo de login e cadastro para que seja possível utilizar autenticação por redes sociais para cadastrar um usuário no sistema.
