Aprenda a criar telas de registro e login de usuários com Flask e Firebase

Python é uma linguagem de programação interpretada, orientada a objetos e com tipagem forte. É muito utilizada na criação de scripts para automações de processos, projetos de Machine Learning e Ciência de Dados. Apesar destas aplicações específicas, possui grande versatilidade, a partir de seus frameworks, responsáveis por ampliar a gama de possibilidades de desenvolvimento com Python.

Neste artigo, criaremos uma tela de login em HTML utilizando Flask, um micro-framework Python, integrando ao sistema de autenticação do Firebase, plataforma de armazenamento de dados do Google. Você pode conhecer a documentação do Firebase Authentication clicando aqui e do Flask, clicando aqui.

Especificações

Para este projeto, utilizaremos uma série de sistemas e softwares específicos que estão listados abaixo:

• Sistema operacional Windows 11;
• Versão 3.11.2 do Python, que pode ser baixada neste link;
• Versão 2.2.3 do micro-framework Flask;
• Editor de código Pycharm, que pode ser baixado neste link.

Inicializando um ambiente virtual

Para instalar os pacotes e isolar o ambiente de desenvolvimento, empacotando todas as dependências, é necessário criar um ambiente virtual. Siga as etapas abaixo para criar a virtualenv e ativá-la.

1. Abra o terminal digitando cmd no campo Pesquisar, que está na barra de tarefas;
2. Digite pip install virtualenv. O PIP é um gerenciador de pacotes que, normalmente, já vem instalado junto com o Python. Entretanto, caso aconteça algum erro, siga estes comandos para fazer a instalação;
3. Crie o ambiente virtual, digitando o comando: virtualenv <~nome_da_virtualenv~>;
4. Faça a ativação do ambiente virtual, digite no terminal: <~nome_da_virtualenv~>/Scripts/Activate.
5. Após encerrar a criação do projeto (ou desejar continuar posteriormente), desative o ambiente virtual com o comando deactivate.

Conhecendo e instalando o Flask

Flask é um micro-framework Python desenvolvido para a criação de aplicações web. Diferente do Django, que é mais robusto, o Flask se propõe a oferecer soluções para a criação de templates a partir de uma estrutura simplificada. Apesar de ser conhecido pela sua praticidade, possui uma série de recursos disponíveis.
Para instalar o Flask, abra o terminal e digite: pip install flask e aguarde a instalação. É importante reforçar que a instalação deve ser feita no seu ambiente virtual.

Para iniciar o desenvolvimento, realizaremos o import do Flask e também de uma série de recursos que utilizaremos a partir dele.

import flask

from flask import Flask, render_template, request, redirect, url_for

O render_template será responsável por carregar a página HTML. Com o request, realizaremos as requisições com os métodos GET e POST nas rotas definidas. O redirect será utilizado, com o url_for, no redirecionamento para páginas específicas que criaremos dentro do projeto.

O próximo passo é criar uma instância do Flask, armazenando-a em uma variável, conforme o código abaixo:

app = Flask(__name__)

Em app, armazenamos uma instância do Flask para definir rotas e configurações do nosso site. O argumento (__name__) é uma variável Python necessária na criação da aplicação.

Para que possamos realizar os testes e colocar, de fato, a tela no ar, é necessária a inserção do trecho abaixo:

if __name__ == '__main__':

app.run(debug=True)

O if__name__ == '__main__': faz com que a aplicação seja executada, ou seja, o app.run, apenas quando o arquivo em questão for rodado. Ou seja, se o arquivo (neste caso, o que denominamos de app) for importado por outro arquivo, o trecho não será executado.

O debug=True facilita na criação da página, pois entende que todas as alterações que estão sendo feitas no código precisam ser mostradas na tela. O objetivo é diminuir a necessidade de parar e reiniciar o código a cada mudança, o que traz maior agilidade no processo.

Criando a rota principal

Neste momento, criaremos a rota principal, que, no caso deste tutorial, apenas fará o redirecionamento para a página de login. A criação da rota ficará desta forma:

@app.route('/', methods=['GET', 'POST'])

Para explicar a estrutura deste código, dividiremos ele em partes:

@app → é o identificador do nosso site, a instância de Flask criada anteriormente;

.route → utilizado para definir o caminho da rota. Neste caso, '/';

Com methods=['GET', 'POST'], definiremos que os métodos aceitos serão o GET, que faz uma consulta, e o POST, que faz uma inserção de dados.

A próxima etapa é a criação da função responsável por executar, de fato, uma tarefa ao acessar a rota. A função index(): retornará o redirect(url_for('login')), que fará o redirecionamento para uma nova página ou rota. Neste caso, para a página de login.

def index():

return redirect(url_for('login'))

Construindo templates

Os elementos em HTML que irão compor os textos e formulários podem ser criados no mesmo código Python. Entretanto, é uma norma do Flask a criação de um diretório específico para armazenar informações criadas em HTML. Esta pasta deve ter o nome de templates, na qual armazenaremos os templates login.html, principal.html e register.html.

A estrutura de pasta e arquivos ficará desta forma:

register.html

A página register.html possuirá um formulário, que será utilizado para criar as credenciais do usuário. O código em HTML ficará da seguinte forma:

Como é possível observar, este é um arquivo HTML normal, com a estrutura básica de <!DOCTYPE html>, <html></html>, <head></head>, <body></body> e o <form></form>, com seus devidos elementos internos.

Estilizaremos a tela de login com o Cascading Style Sheet (CSS) e, para isso, precisaremos criar um diretório chamado static com um subdiretório chamado css. Dentro deste subdiretório, criaremos o arquivo style_register.css, que armazenará todos os seletores e atributos.

Para que os atributos sejam aplicados na nossa página, precisaremos importar o arquivo CSS no HTML. Para isto, você irá inserir, como no exemplo acima, esta linha no código.

<link rel="stylesheet" href="{{ url_for('static', filename='css/style_login.css') }}">

Neste trecho, static identifica o diretório principal e o filename o caminho do arquivo. Para melhor organização no arquivo CSS, criamos uma série de div e class, que serão utilizados como seletores.

Você pode estilizar da maneira que preferir e, para este tutorial, inserimos alguns atributos apenas para que seja possível observar as alterações a partir da importação do arquivo CSS.

Com a estilização, a tela ficou desta forma:

Com o template devidamente criado, voltamos ao código Python, definindo a rota, os métodos e também as ações.

Para explicar o código mais detalhadamente, iremos separá-lo:

Neste primeiro trecho, estamos definindo a rota /register e os métodos, que serão GET e POST.

@app.route('/register', methods=['GET', 'POST'])

Agora, estamos criando a função register() com a condicional if, que determina que se o método for GET, ou seja, de consulta, será carregada a página register.html. Se o método for POST, iremos armazenar nas variáveis email e password, respectivamente, o e-mail e a senha cadastrados a partir do formulário exibido na página de registro.

login.html

Na página login.html, adicionaremos um formulário para que o usuário insira suas credenciais de acesso. Basicamente, o processo é muito semelhante ao de registro. Posteriormente, com a integração ao Firebase, as páginas terão funcionalidades diferentes, pois uma irá capturar e armazenar os dados de login para que seja possível fazer o acesso pela outra página.No arquivo login.html, iremos inserir o código:

A estilização ocorre exatamente da mesma forma da página de registro. Primeiramente, precisamos importar o arquivo CSS no código HTML e, após configuradas as classes, criar a estilização. Utilizando o mesmo padrão, inseriremos alguns atributos para fins de exemplo:

Com estes atributos, a tela ficará desta forma:

A primeira etapa é definir a rota /login, tal qual foi feito anteriormente, com os métodos GET e POST.

@app.route('/login', methods=['GET', 'POST'])

Agora, criaremos a função:

Para explicar melhor este trecho de código, também faremos a divisão do conteúdo.

Ao definirmos a função login(), criaremos a condicional de que se o método requerido for GET, ou seja, de consulta, renderizaremos o template login.html. O que isto quer dizer? Que ao acessar a rota /login, o template login.html será exibido. Contudo, se o método for POST, os dados de usuário e senha serão armazenados nas variáveis email e password.

principal.html

A principal.html será a página para qual o usuário será redirecionado após o login. Para ilustrar, criaremos um modelo muito básico, apenas com um título:

Estilizando a página, ela ficará desta forma:

Integrando com o Firebase

Primeiramente, é necessário instalar o Firebase no seu projeto. Portanto, abra o terminal e digite: pip install flask firebase-admin. Agora, acesse https://console.firebase.google.com/u/1/?hl=pt com sua conta Google e clique em Criar um projeto. Neste tutorial, chamaremos o projeto de Login.

Em Comece adicionando o Firebase ao seu aplicativo, selecione a opção Web. Insira o nome do seu app no campo e clique em registrar. Será necessário buscar as informações das credenciais em .json e, para isto, você deve seguir o seguinte passo a passo:

1. No console, clique no projeto criado anteriormente;
2. Na engrenagem do lado superior esquerdo da tela, em Visão geral do projeto, clique em Configurações do projeto;
3. Clique em Contas de serviço e em Gerar nova chave privada.
4. Um arquivo .json será baixado em seu computador. Armazene-o.

Nesta etapa, retornaremos ao código inicial onde fizemos os imports e iremos inserir mais alguns pacotes: firebase_admin, do qual importamos credentials e auth, logging para visualizar eventuais erros no console, e pyrebase, para gerenciar o processo de autenticação com o Firebase.

logging

A visualização detalhada dos erros que acontecem durante a execução da aplicação é fundamental na criação do projeto. Portanto, recomendamos a instalação do módulo logging, com pip install logging.

Pyrebase4

A validação de usuário e senha no Firebase deve ser feita utilizando o módulo Pyrebase. É importante se atentar à versão do módulo. O processo só funcionará se o package instalado for Pyrebase 4. Para fazer a instalação, utilize o seguinte comando: pip install Pyrebase4.

Para inicializar o Firebase, faremos mais algumas configurações:

cred = credentials.Certificate('path/to/credentials.json')

firebase_app = firebase_admin.initialize_app(cred)

Agora, criamos um objeto chamado config com alguns dados de acesso ao Firebase para inicializar o Pyrebase:

Estes dados são encontrados no caminho:

1. Na engrenagem no lado superior esquerdo da página, clique em Configurações do projeto;
2. Role a tela até encontrar os dados de apiKey, authDomain e storageBucket. O campo databaseURL pode ser configurado como uma string vazia.

A próxima etapa é inicializar o Firebase:

firebase = pyrebase.initialize_app(config)

Criando um usuário

No tópico anterior, armazenamos os dados enviados no formulário nas variáveis email e password. Agora, utilizaremos estas informações para criar um novo usuário no Firebase na rota /register. Se o usuário for criado com sucesso, será redirecionado para a página de login. Caso contrário, será exibida uma mensagem de erro.

Fazendo login

Após o registro, o usuário poderá fazer login na aplicação. No trecho abaixo, o comando firebase.auth().sign_in_with_email_and_password(email, password) consultará o usuário do Firebase de acordo com o e-mail e password informados. Se os dados informados estiverem corretos, o usuário será redirecionado para a rota /principal. Caso contrário, será exibida uma mensagem de "E-mail ou senha incorretos”.

Criando a rota /principal para acesso após login

Ao fazer login, o usuário será redirecionado para a /principal. Em um tópico anterior, criamos um template simples para ilustrar esta etapa. Agora, construiremos a rota.

O Flask é um micro-framework em sua definição, mas possui uma série de recursos que o tornam completo no desenvolvimento simplificado de aplicações e integrações com Python. Neste artigo, você aprendeu sobre como criar telas de registro e de login, além da tela para a qual o usuário é redirecionado, realizando a autenticação no Firebase.

Espero que você desfrute este guia. Até logo!