Olá pessoal, hoje estarei dando uma introdução de como realizar autenticação usando redes sociais. Para isso iremos utilizar um plugin muito interessante chamado hello.js.
O hello.js
O hello.js é um SDK Javascript do lado do cliente para autenticação com serviços da Web OAuth2 e que também consulta suas APIs REST. O HelloJS padroniza caminhos e respostas para APIs comuns, como o Google Data Services, o Facebook Graph e Windows Live Connect.
Algumas das possibilidades de autenticação com o hello.js :
- Window
- Dropbox
- Yahoo
- Joinme
- Soundcloud
- Foursquare
- Github
- Flickr
- Vk
Consulte mais informações na documentação.
Criando o projeto
Como framework front-end utilizarei o Quasar na sua versão 0.17.20.
Para criação do projeto já tenho o Node, Vue-cli e Quasar-cli instalados em meu ambiente de desenvolvimento. Caso você seja novo no mundo Vue/Quasar veja na documentação oficial como preparar seu ambiente através desse link:
https://quasar-framework.org/guide/#Development-with-Quasar-CLI-The-best-developer-experience
Se seu ambiente já está configurado, vamos para a criação do projeto. Para criar um novo projeto basta usar o comando:
quasar init quasar-hello-auth
Preenchemos e escolhemos as opções desta maneira:
Além disso utilizaremos o padrão Standard no ESLint, e o NPM como gerenciador das dependências.
Ao finalizar o download das dependências, temos que acessar o diretório e executar o comando para levantar nosso servidor de desenvolvimento:
cd quasar-hello-auth quasar dev
E nossa aplicação estará disponível através do endereço http://localhost:8080/ :
Instalando Hello.js no projeto
Para instalar o hello.js em nosso projeto, basta executarmos o seguinte comando:
npm i -S hellojs
Para termos certeza que a instalação foi bem sucedida, abrimos nosso projeto no editor de texto de preferência e analisamos o arquivo package.json :
Criando o Plugin hello.js
Para termos acesso ao hello.js dentro do quasar, iremos criar um simples plugin para isso. Dentro do diretório src/plugins criamos um arquivo hello.js com o seguinte código:
Observe o parâmetro “facebook”, é nele que iremos configurar o id do aplicativo que criaremos no Facebook for Developers posteriormente.
Além disso, adicionamos o nosso plugin hello em nosso arquivo quasar.conf.js :
Criando nosso Layout de Login
Como queremos proteger a nossa aplicação com uma autenticação, não iremos usar o layout padrão que já vem pré-definido no quasar. Criamos outro Layout chamado LoginLayout.vue no diretório src/layouts com o seguinte código:
A imagem usada para o background no CSS pode ser baixada neste link. Após fazer o download da imagem renomeie para background-img.
Agora iremos criar nossa página de login, para isso crie o arquivo Login.vue dentro do diretório src/pages com o seguinte código:
Por fim, configuramos a rota de login desta maneira:
Acessamos a rota login para verificar se tudo está funcionando corretamente. Basta acessar o endereço http://localhost:8080/#/login, e o resultado será esse:
Observe que temos o hash(#) em nossa rota, vamos remover isso ativando o modo history em nossa configuração de rotas. Para isso, nós vamos no arquivo quasar.conf.js e tiramos o comentário da linha vueRouterMode:
Agora nossa aplicação pode ser acessada pelo endereço http://localhost:8080/login
Criando uma aplicação no Facebook for Developers
Antes de prosseguirmos com a implementação da autenticação com as redes sociais, precisamos primeiro ter um aplicativo cadastrado na plataforma Facebook for Developers.
Após acessar a plataforma, clicamos em “Meus aplicativos” e em seguida em “Adicionar novo Aplicativo”:
Logo em seguida será solicitado um nome de identificação para sua aplicação e um email para contato:
Na área do Painel clicamos em produtos na lateral, e buscamos por Login do Facebook e clicamos em configurar:
E você pode manter as configurações padrões:
Agora acessamos Configurações-> Básico e precisamos de uma URL da Política de Privacidade. Para isso nós precisamos ter consciência das políticas e colocar o endereço dela no formulário. Você pode acessar as políticas através dessa URL. Além disso coloquei um ícone do quasar no tamanho 512 x 512 como ícone do aplicativo:
Salve as alterações, por enquanto apenas isso servirá para realizarmos nossos testes.
Obs: você precisa preencher a URL da política de privacidade corretamente, então não esqueça de acessar colocar-la no formulário.
Implementando o método de autenticação
Lembram daquele parâmetro “facebook” que não preenchemos na inicialização do plugin hello.js ? Pois agora é o momento de preenchermos.
Pegue o id do aplicativo criado no Facebook for Developers e coloque no arquivo hello.js no diretório src/plugins da sua aplicação quasar:
Você precisa criar seu aplicativo, como o meu não está público, você não terá acesso a ele da sua conta do facebook.
Agora vamos configurar nossa página Login.vue, com o método de login do hello js. Para isso criamos um método chamado auth() e implementamos o login da seguinte forma:
Agora acessando http://localhost:8080/login e clicando em nosso botão de login com facebook, o seguinte pop-up é apresentado na tela:
Ao autorizar nosso aplicativo recebemos como resposta um access_token, e alguma outras informações da api de autenticação do facebook. Em nosso console é possível ver:
Recuperando informações do usuário
Agora que já conseguimos nos autenticar, vamos recuperar algumas informações do usuário logado em nossa aplicação. Primeiro iremos configurar nosso login para ao autenticar, acessar uma rota de perfil:
Agora iremos criar nossa page Perfil.vue no diretório src/pages com o seguinte código:
Observe que usamos o método hello.api(me), este método nos retornas as informações do perfil da rede social usada para autenticação, neste caso do facebook.
E claro, não esquecer de criar uma rota para essa página no arquivo routes.js no diretório src/router:
Agora acesse a url http://localhost:8080/login e ao realizar o login com facebook você será redirecionado para a página de perfil, onde deverá conter sua foto, nome e sobrenome:
Além do metodo hello.api(me) existem muitos outros no hello.js como mostrado na lista abaixo:
Você pode consultar a documentação para saber mais e acessar as demos no github para entender de forma mais rápida.
Considerações finais
A ferramenta hello.js é de fato muito simples para implementar, e nos da uma variedade de redes sociais para utilizar como autenticação para nossas aplicações.
Existe uma versão v2 já sento implementada também, com uma escrita mais moderna. Você pode consultar como usa-la através deste link.
Além disso você pode conferir o código desse projeto em meu github
Agradecimentos
Quero agradecer imensamente a Aline Morisson pela arte de capa feita para este artigo. Um trabalho excelente e do jeito que eu imaginei.
Caso necessitem de um trabalho freelancer de design gráfico, seguem algumas formas de contato com ela:
e-mail: alinemorisson0@gmail.com
Instagram: @alinemorisson
