Autenticação com Hello.js no Quasar Framework

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
  • Google
  • Facebook
  • Dropbox
  • Twitter
  • Yahoo
  • Instagram
  • Joinme
  • Linkedin
  • 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:

Preenchemos e escolhemos as opções desta maneira:

Opções na criação do projeto quasar.

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:

E nossa aplicação estará disponível através do endereço http://localhost:8080/ :

Aplicação quasar localhost:8080

Instalando Hello.js no projeto

Para instalar o hello.js em nosso projeto, basta executarmos o seguinte comando:

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 :

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:

hello.js plugin

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 :

declarando o plugin hello no 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:

LoginLayout.vue

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:

page Login.vue

Por fim, configuramos a rota de login desta maneira:

routes

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:

http://localhost:8080/#/login

 

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:

quasar.conf.js

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”:

Facebook for Developers

Logo em seguida será solicitado um nome de identificação para sua aplicação e um email para contato:

Criando nova identificação do aplicativo

Na área do Painel clicamos em produtos na lateral, e buscamos por Login do Facebook e clicamos em configurar:

Configurar Login do Facebook

E você pode manter as configurações padrões:

Configurações Login do Facebook

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:

Configurando política de privacidade e ícone

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:

hello.js com id do aplicativo

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:

page Login.vue

Agora acessando http://localhost:8080/login e clicando em nosso botão de login com facebook, o seguinte pop-up é apresentado na tela:

pop-up facebook

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:

resposta do login facebook

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:

page Login.vue

Agora iremos criar nossa page Perfil.vue no diretório src/pages com o seguinte código:

page Perfil.vue

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:

rorute.js

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:

Rota perfil

 

Além do metodo hello.api(me) existem muitos outros no hello.js como mostrado na lista abaixo:

métodos hello

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