Quasar Framework — Cordova — Usando o Facebook para autenticação

6 min readJul 30, 2019

Uma aspecto importante ao desenvolver uma aplicação Hibrida, é tentar entregar uma experiencia o mais próximo possível de uma aplicação Nativa. Por exemplo, ao invés de simplesmente abrir um Popup Web pedindo a senha do Facebook do Usuário, devemos utilizar o SDK do próprio Facebook e se comunicar com o aplicativo já instalado.

1 — Obtendo a Fingerprint/Assinatura do Aplicativo

Antes de registramos o Aplicativo junto ai Facebook, vamos descobrir o Fingerprint/Assinatura do nosso aplicativo, para tal, você terá de seguir este outro artigo: Quasar Framework — Assinando uma APK durante o Build (clique para mais detalhes)

Após realizar todo o processo acima, você deverá conseguir valores como o exibido abaixo.

Debug:   4E:96:80:2D:B8:C6:A9:44:D6:15:7B:FC:54:79:B6:45:C8:26:43:90
Release: 60:64:04:26:71:71:B4:AA:BC:1F:68:EC:2D:0B:59:06:A3:E5:2F:81

Porém, estes valores em Hexa, não nós é util, devemos converter os mesmos para Base64, você pode usar um Site da sua preferencia, para realizar a conversão online, ou executar o seguinte script.

let debugKey = '4E:96:80:2D:B8:C6:A9:44:D6:15:7B:FC:54:79:B6:45:C8:26:43:90'
let releaseKey = '60:64:04:26:71:71:B4:AA:BC:1F:68:EC:2D:0B:59:06:A3:E5:2F:81'
let debug = Buffer.from(debugKey.replace(/:/g, ''), 'hex').toString('base64')
let release = Buffer.from(releaseKey.replace(/:/g, ''), 'hex').toString('base64')
console.log({ debug, release })

O resultado deve ser o mesmo, ou seja, os seguintes valores:

Debug:   TpaALbjGqUTWFXv8VHm2RcgmQ5A=
Release: YGQEJnFxtKq8H2jsLQtZBqPlL4E=

Apenas anote estes valores, e vamos para o próximo passo.

2 — Registrando uma Aplicação junto ao Facebook

O primeiro passo, é ir ao portal para desenvolvedores do Facebook e criar a aplicação: Facebook Developers (clique para mais detalhes)

Vá nas configurações básicas, e anote o Id do Aplicativo, Chave Secreta do Aplicativo e o Nome de Exibição.

Vá até o final da pagina, e cadastre uma noa plataforma

Agora, cadastre o Id do Aplicativo na Store, assim como a assinatura utilizada na APK de Desenvolvimento e na de Produção. Você obteve estas chaves durante a primeira parte deste artigo.

Salve as alterações, e o aplicativo estará configurado e pronto para ser integrado a aplicação Android.

3 — Instando o Plugin do Cordova para se comunicar com o SDK do Facebook

Abra o projeto no VS Code e execute o seguinte comando no terminal.

$ cd src-cordova
$ cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="352033225467507" --variable APP_NAME="Quasar - Cordova Sign"
$ cd ..

Note que você deve substituir o APP_ID e o APP_NAME pelo Id e Nome de Exibição do aplicativo que você acabou de criar no Dashboard do Facebook.

Como estamos trabalhando com um projeto Quasar, e talvez este mesmo projeto deva rodar na Web ou em Desktops usando o Electron, então vamos isolar o código especifico para o Cordova em serviços. Você pode ler mais sobre este modelo de organização no seguinte artigo: Quasar Framework — Combinando Boots com detecção de Plataforma (clique para mais detalhes)

Está aqui o serviço que seja consumido pela aplicação (src/boot/social/index.js)

class SocialService {
  provider = void 0
  config ({ provider }) {
    this.provider = provider
  }
  login ({ provider }) {
    return this.provider.login({ provider })
  }
}const service = new SocialService()
export default async ({ Vue }) => {
  Vue.prototype.$social = service
}export { service }

E o provider com a implementação para Cordova (src/boot/social/cordova.js)

import { service } from './index'const promisify = (action) => {
  return (...args) => {
    return new Promise((resolve, reject) => {
      args.push(resolve)
      args.push(reject)
      return action.apply(null, args)
    })
  }
}const fb = {
  login: promisify(facebookConnectPlugin.login)
}class CordovaProvider {
  name = void 0
  constructor () {
    this.name = 'cordova'
  }
  config ({ app, router, store, Vue, ssrContext }) {
    // configurações adicionais no provider que depedem do context
       { app, router, store, Vue, ssrContext }
  }
  login ({ provider }) {
    switch (provider) {
      case 'facebook': return fb.login(['email', 'public_profile'])
    }
  }
}const provider = new CordovaProvider()
service.config({ provider })export default async (context) => {
  provider.config(context)
}

como facebookConnectPlugin é uma variável global, será necessário incluir ela no .eslintrc.js > globals

Claro, teremos de registrar os arquivos de boot acima (service e provider) no quasar.config.js.

module.exports = function (ctx) {
  const boot = [
    'i18n',
    'axios',
    'social/index'
  ]
  switch (true) {
    case ctx.mode.cordova:
      boot.push('social/cordova')
      break
    default:
      boot.push('social/web-client')
      break
  }
  return {
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    boot,
    ...
  }
}

E por fim, vamos alterar a pagina Index (src/pages/Index.vue)para chamar o serviço acima.

<template>
  <q-page class="flex flex-center">
    <img alt="Quasar logo" src="~assets/quasar-logo-full.svg">
    <q-btn icon="mdi-facebook" color="blue-10" 
           label="Facebook" @click="facebook" ></q-btn>
  </q-page>
</template><style>
</style><script>
export default {
  name: 'PageIndex',
  methods: {
    async facebook () {
      let result = await this.$social.login({
        provider: 'facebook'
      })
      console.log(result)
    }
  }
}
</script>

Pronto, a parte da implementação está concluída.

4 — Testando a Aplicação

Para testar a aplicação, você vai precisar de um dispositivo com Android, ou um Emulador que permita instalar o Facebook pela Play Store. Caso opte por um Emulador, eu recomendo o Nox. Se precisar de ajuda para configurar o mesmo, pode seguir o seguinte artigo: Quasar Framework — Usando o Nox para debugar uma APK android (clique para mais detalhes)

Para iniciar a aplicação, execute o seguinte comando:

yarn cordova:dev

Neste momento, como não setamos a versão minima do SDK no gradle.properties, e o plugin modificou o build.gradle para usar a versão 19, é bem provável que ocorra o seguinte erro.:

Basta atualizar o cdvMinSdkVersion para 19. (src-cordova/platforms/android/gradle.properties)

Agora sem surpresas, execute o comando novamente, então verá as seguintes telas:

Apareceu este popup horrendo ao clicar no Botão, por que o aplicativo do Facebook não está instalado. Se for o caso, instale o Facebook e realize o Login. Então tente novamente.

Ah, agora esta bem melhor. Antes de continuar, conecte o dispositivo ao Dev Tools do Chrome, para que possamos ver o que o Facebook nos retorna.

Basicamente um objeto com a seguinte estrutura.:

{
 status: "connected",
 authResponse: {
  session_key: true,
  accessToken: "<long string>",
  expiresIn: 5183979,
  sig: "...",
  secret: "...",
  userID: "634565435"
 }
}

Com isto, a parte que cabe so front-end está encerrada.

5 — Autenticando em um Servidor

Aqui não vamos discutir uma implementação, afinal a escolha do Pipe usado no Backend é algo bem pessoal, e não cabe ao Quasar opinar aqui. Porém, podemos citar em linhas gerais o que seria os próximos passos.

Enviar o accessToken para o servidor
Servidor valida o accessToken junto ao Facebook, obtendo os dados do usuário (userId, email, nome, etc)
Verificar se o UserId (FB) está associado a algum Usuário Ativo do Sistema. Se sim, retornar um token JWT
Caso não encontre um usuário, verificar se tem algum Usuário cujo Username/Email, coincide com o Email informado pelo Facebook. Aqui a aplicação pode ser proativa e associar o FB à conta e já realizar o Login, ou informar à aplicação cliente que já existe uma Conta em potencial.
Nada foi encontrado, se for um cadastro simples, que requer apenas email e nome, então ele pode ser concluído agora, e já retorna o token JWT, caso contrario, devolve o Nome e Email e pede que a aplicação finalize o cadastro.

Quasar Framework — Cordova — Usando o Facebook para autenticação

Written by Tobias Mesquita