Olá, pessoal!

Neste artigo eu trago uma introdução com o procedimento de autenticação usando redes sociais. Usaremos 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, Facebook Graph e Windows Live Connect.

Algumas das possibilidades de autenticação com o hello.js:

• Windows
• 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 do seguinte link:

• https://quasar-framework.org/guide/#Development-with-Quasar-CLI-The-best-developer-experience

Se o 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 dessa 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 executar o seguinte comando:

npm i -S hellojs

Para termos certeza de que a instalação foi bem sucedida, abrimos nosso projeto no editor de texto de nossa preferência e analisamos o arquivo package.json:

Criando o Plugin hello.js

Para termos acesso ao hello.js dentro do quasar, criaremos 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 usaremos 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 criaremos 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 dessa 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. Removeremos isso ativando o modo history em nossa configuração de rotas. Para isso, 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 e-mail para contato:

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

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

Agora acessamos Configurações > Básico e precisamos de uma URL da Política de Privacidade. Para isso, 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.

Observação: você precisa preencher a URL da política de privacidade corretamente, então não esqueça de acessar e coloca-la no formulário.

Implementando o método de autenticação

Lembra 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 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 que, ao autenticar, uma rota de perfil seja acessada:

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

Observe que usamos o método hello.api(me). Esse método retorna as informações do perfil da rede social usada para autenticação – neste caso, do Facebook.

E claro, não podemos nos 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 oferece uma variedade de redes sociais para utilizar como autenticação para nossas aplicações.

Existe uma versão v2 já sendo implementada também, com uma escrita mais moderna. Você pode consultar como usá-la através deste link.

Além disso você pode conferir o código desse projeto em meu GitHub.