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...
Ao fazer login no firebase, vá na opção Criar um projeto.
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.
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.
Aguarde finalizar o carregamento e clique em Continuar.
Se ocorreu tudo certo, essa tela aparecerá para você.
Próximo passo agora, ir nessa opção Authentication.
Nela, vai em Vamos começar.
Selecione a opção E-mail/senha.
Então, ative a opção de login e salve a configuração.
Verá que agora ele irá mostrar na tela principal do Authentication a opção escolhida, conforme imagem.
Agora vamos na opção Adicionar novo fornecedor e vamos configurar também o login com o Google.
Só selecionar a opção Google.
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.
E mais uma vez ele irá redirecionar para a tela principal do Authentication mostrando, agora, os dois 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.
Aqui na Visão geral do projeto, vamos selecionar o app Web.
Então vamos dar um apelido para esse app, novamente, optei por colocar o nome login-app e então clique em Registrar app.
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.
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.
Top comments (0)