Autenticação de usuários com Firebase

Você está naquele momento que deseja criar uma aplicação web? Firebase te facilitará esa tarea porque es una plataforma que abarca muchas áreas, desde el hosting o alojamiento web, registro de bases de datos, autenticación de usuarios, envío de mensajes personalizados y almacenamiento de archivos hasta analizar el comportamiento del usuario mediante la característica Analytics, entre outros.

Além disso, tem a vantagem de poder usufruir destes serviços gratuitamente e, como requisito, é necessário ter uma conta Gmail e ter vontade de aprender, mas tem as suas limitações. Por exemplo, em seu site oficial preços, mostra-nos uma tabela sobre o armazenamento do seu site até 10 GB. Se for excedido, para cada GB adicional você deverá pagar US$ 0,026. Por isso recomendo que você reserve um tempo para analisar esta seção e avaliar se esses preços cabem no seu orçamento.

Se continuar a explorar esta página verá uma calculadora, que lhe permite visualizar com precisão o custo de utilização destes serviços. Isso o ajudará a controlar o uso de recursos.

Como usar o Firebase?

Para começar, você precisa seguir alguns passos simples. Primeiro, entramos no Firebase Console, no qual você deverá se cadastrar com um email de sua preferência. Nesta imagem, mostro a tela inicial. Agora vamos criar um projeto para autenticar usuários do Google com React.

Depois de pressionar o botão Adicionar Projeto, devemos concluir duas etapas.

Depois que o projeto estiver configurado, explicarei como funcionam três recursos do Firebase.

Authentication

Isso nos permitirá saber se um usuário está cadastrado no projeto, a partir de uma função React. Além disso, o Firebase permitirá que você se conecte a partir de suas contas do Google. Para isso, solicitaremos este serviço da seguinte forma:

Nesta ocasião, selecionamos o provedor Google que se encarregará de cadastrar e conectar sua conta ao projeto. Em seguida, nos levará a outra tela que devemos habilitar no canto superior direito para escolher e salvar o e-mail de suporte (o mesmo que utilizamos para o cadastro).

A seguir, precisamos integrá-lo à nossa aplicação criada com React. Para isso, procuramos no painel esquerdo a Descrição Geral, depois a Configuração do Projeto e o ícone indicado na imagem a seguir.

A seguir, vamos ao editor de código do Visual Studio Code, abrimos um novo terminal e colamos o primeiro comando indicado pela imagem para instalar todas as funcionalidades que o Firebase oferece no desenvolvimento da aplicação.

npm install firebase

Como boa prática, é aconselhável criar um arquivo .env na raiz do projeto para salvar essas variáveis ​​de ambiente e gerar maior segurança para nossas credenciais. Isso permite manter informações confidenciais, como chaves de API ou URLs de servidor, fora do código-fonte e facilita a configuração e implantação do aplicativo em diferentes ambientes (desenvolvimento, teste, produção, etc.).

O próximo passo é criar um arquivo chamado firebase.js, onde colamos o código da imagem acima que contém o initializeApp, usado para inicializar uma aplicação dentro do Firebase. Este método é chamado uma vez na aplicação para estabelecer a conexão com o projeto.

Nesta aplicação criaremos uma função como uma nova instância do GoogleAuthProvider, que permite utilizar a autenticação Google como método de login, obtendo um token de acesso que pode ser utilizado para posteriormente autenticar o usuário no servidor.

Conforme mostrado na imagem, a função retorna signinwithpopup, um processo que permite ao usuário fazer login em um aplicativo ou serviço por meio de uma janela pop-up em vez de ser redirecionado para uma página de login separada. Isso pode oferecer uma experiência de usuário mais tranquila, pois evita a necessidade de alternar entre páginas diferentes.

Esta janela pop-up mostra as diferentes contas do Google disponíveis em nosso histórico. Como selecionei a primeira opção, vou ao console do Firebase para verificar a autenticação do e-mail. Na verdade, ele estava registrado e pronto para ser autenticado.

Firestore Database

Com este serviço podemos armazenar e sincronizar dados em tempo real entre diferentes clientes e dispositivos, além de utilizar um modelo de dados baseado em documentos que organiza os dados em coleções e permite consultas flexíveis e escaláveis.

Nesta fase escolheremos a primeira opção: Modo Produção. Isso nos diz que podemos ler e escrever dados.

Como segundo passo para configurar nosso banco de dados, devemos selecionar o local. Por estar na América Latina, deixarei esta opção. Se você estiver em outro continente, poderá escolher aquele mais próximo da sua localização.

Esta é a aparência da tela após a habilitação deste serviço, portanto este banco de dados não é relacional por utilizar diferentes modelos de dados.

Esses bancos de dados não relacionais são adequados para lidar com grandes volumes de dados não estruturados ou semiestruturados e são usados ​​em aplicações web, móveis e de Internet das Coisas (IoT), onde a escalabilidade e o desempenho são críticos.

Isso significa que à medida que fazemos solicitações de registro de dados, o Firebase se encarrega automaticamente de fazer as coletas e documentos.

Depois que o usuário se registrar ou fazer login, seus dados poderão ser salvos no banco de dados do Firestore. Para isso, é necessário criar uma coleção chamada users e adicionar um documento para cada usuário com seu identificador único como chave. Em cada documento você pode salvar as informações desejadas pelo usuário, como nome, foto ou preferências.

Continuamos com a seção Regras e vamos para o código da sexta linha. Alteramos a condição falsa para true e false as alterações no botão Publicar. Isso permite a leitura e gravação de dados.

Storage

Ele nos fornece segurança e controle de acesso aos arquivos blogfiles, ajudando a definir quem pode visualizar e baixar cada arquivo. São arquivos relacionados a um blog, como imagens, vídeos, documentos ou qualquer outro tipo de arquivo multimídia utilizado para enriquecer o conteúdo do blog.

Esses arquivos são usados ​​para aprimorar a experiência dos leitores e fornecer informações adicionais ou visualmente atraentes. É importante mencionar isso em seu site oficial, Firebase oferece um guia para fazer upload dos arquivos que o usuário precisa.

Se quiser permitir que o usuário carregue arquivos de mídia para o aplicativo, você deve ter um input file em um formulário no arquivo App.jsx, que gera uma interface para selecionar o arquivo que deseja armazenar. Então adicionamos o evento onChange, que será executado toda vez que o valor da entrada mudar, atualizando o estado com o novo valor. Dessa forma, o valor atualizado pode ser acessado a qualquer momento.

Na imagem a seguir, criaremos a variável file com useState que armazenará o arquivo que o usuário selecionar. Então atribuímos outra variável handleSubmit como uma função assíncrona. Também adicionamos o evento preventDefault para evitar que a página seja atualizada ao pressionar o botão Carregar arquivo.

Como último passo, adicionamos o bloco try-catch, que consiste em uma estrutura para tratar erros que os arquivos carregados pelo usuário possam apresentar. Então definimos a variável result, o que nos permitirá invocar a função uploadFile.

Para enviar arquivos binários, imagens, vídeos ou documentos para um destino específico, criamos esta função assíncrona chamada uploadFile e temos como parâmetro file, composto por um arquivo.

A seguir, definimos a variável storageRef para obter uma referência. Portanto, adicionamos a variável storage, que já estabelecemos como método getStorage enviar os arquivos binários, imagens, vídeos ou documentos para nosso banco de dados Storage do Firebase.

Agora, cada arquivo deve ser único. Para fazer isso, usaremos o formato v4, que é gerado usando uma combinação de informações aleatórias e o endereço MAC do dispositivo no qual foi criado.

Esse identificador é composto por 32 dígitos, geralmente representados em grupos separados por travessões. Os primeiros 8 dígitos representam as informações de tempo, os próximos 4 dígitos representam a versão do UUID e os últimos 12 dígitos são gerados aleatoriamente.

Por outro lado, o Firebase também gera uma URL após o upload do arquivo, e a leva para nosso banco de dados, que fica abaixo da imagem. E se clicarmos nesta URL, uma nova aba se abre mostrando o arquivo.

Para obter a URL para baixar ou exibir o arquivo, usamos o método de nosso aplicativo getDownloadURL. Você também pode salvar esse URL no documento do usuário no Firestore Database para acessar o arquivo posteriormente.

Com esse passo a passo, demonstrei que o Firebase nos fornece ferramentas para entender como usar o console, onde você pode gerenciar e monitorar suas aplicações, visualizar estatísticas e fazer os ajustes necessários.

Posso dizer que essas são as etapas básicas para autenticar usuários com Firebase aplicando Firestore Database e Storage. Há aqui um mar de possibilidades que podem ser exploradas com esses serviços, como usar regras de segurança para proteger dados e arquivos, usar funções de nuvem para executar código sem servidor ou usar notificações push para enviar mensagens aos usuários.

Você também pode acessar recursos adicionais, como documentação, para expandir seu conhecimento e aproveitar ao máximo o Firebase.

Se você busca simplificar o desenvolvimento de suas aplicações, melhorar a escalabilidade e o desempenho e aproveitar um ecossistema completo, o Firebase é a plataforma que você precisa. Explore seus recursos, experimente seus serviços e descubra como o Firebase pode transformar seus projetos de desenvolvimento. Não espere mais e comece a usar o Firebase hoje mesmo. O céu é o limite!