DEV Community

Cover image for Login/cadastro com firebase + Vue JS #PASSO 1️⃣
Jackson Dhanyel Santin
Jackson Dhanyel Santin

Posted on

Login/cadastro com firebase + Vue JS #PASSO 1️⃣

Recentemente descobri essa ferramenta incrível e simples de autenticação para implementar nos meus projetos e gostaria de compartilhar toda a funcionalidade e passo a passo para que possam utilizar no projeto de vocês também.

Sou desenvolvedor front-end e, claro, meu conhecimento com back-end é muito vago, principalmente quando se trata de implementar uma tela de login/cadastro onde tem que armazenar informações sensíveis e criptografadas dos usuários, foi então que, ao desenvolver uma aplicação pessoal, essa ferramenta incrível e muito fácil de utilizar surgiu como uma opção, então, sem mais delongas, vamos aos exemplos e explicações.

Nesse primeiro post, vamos criar um projeto no Firebase e configurar tudo o que iremos precisar para por o projeto funcionar, então...

Gif


  1. Ao fazer login no firebase, vá na opção Criar um projeto.
    criar_projeto

  2. Após, dê um nome para o seu projeto (recomendo colocar o nome do seu app, no meu caso login-app) e clique em Continuar.
    nome_projeto

  3. Próximo passo é referente a ativar ou não o Google Analytics ao projeto, no meu caso, não irei ativar, mas fica a critério de vocês, após, só clicar em Criar projeto.
    analytics_projeto

  4. Aguarde finalizar o carregamento e clique em Continuar.
    carregando_projeto

  5. Se ocorreu tudo certo, essa tela aparecerá para você.
    tela_inicial

  6. Próximo passo agora, ir nessa opção Authentication.
    authentication

  7. Nela, vai em Vamos começar.
    vamos_comecar

  8. Selecione a opção E-mail/senha.
    email_senha

  9. Então, ative a opção de login e salve a configuração.
    ativar

  10. Verá que agora ele irá mostrar na tela principal do Authentication a opção escolhida, conforme imagem.
    home_authentication

  11. Agora vamos na opção Adicionar novo fornecedor e vamos configurar também o login com o Google.
    adicionar

  12. Só selecionar a opção Google.
    Google

  13. Ai então, precisa Ativar, logo após ele abrirá uma aba com o Nome público do projeto onde ele mesmo criará um nome aleatório, mas no meu caso, eu coloquei o mesmo nome do projeto login-app e também vai solicitar um e-mail para suporte, onde normalmente ele irá buscar o seu e-mail do google e você só precisa selecionar e por fim Salvar.
    configuracao_google

  14. E mais uma vez ele irá redirecionar para a tela principal do Authentication mostrando, agora, os dois provedores ativos.
    provedores_ativos

Essa parte de criação de projeto e configuração dos provadore finalmente acabou ✨, prometo que logo vamos botar a mão na massa e fazer tudo isso funcionar.


Agora, precisamos voltar lá na página inicial do firebase para que possamos pegar o código que precisamos para integrar o firebase ao nosso projeto lá no código.

  1. Aqui na Visão geral do projeto, vamos selecionar o app Web.
    visao_geral

  2. Então vamos dar um apelido para esse app, novamente, optei por colocar o nome login-app e então clique em Registrar app.
    nome

  3. Feito isso ele vai nos dar tudo o que precisamos para adicionar o SDK no nosso projeto, desde o comando para instalar o firebase até as configurações do web app.
    sdk_configs

Note que nessa parte de adicionar o SDK você pode optar por utilizar npm ou a tag script, no meu caso, como a idéia é integrar isso a um projeto Vue JS então vou utilizar o NPM mesmo.

Agora sim, finalmente vamos ao que interessa, o CÓDIGO.
cat

Top comments (0)