Aprende a crear pantallas de login con Flask y Firebase

Python es un lenguaje de programación interpretado, orientado a objetos y fuertemente tipado. Se utiliza ampliamente en la creación de scripts para proyectos de automatización de procesos, aprendizaje automático y ciencia de datos. A pesar de estas aplicaciones específicas, tiene una gran versatilidad, basada en sus frameworks, encargados de ampliar el abanico de posibilidades de desarrollo con Python.

En este artículo, crearemos una pantalla de inicio de sesión HTML utilizando Flask, un microframework de Python, que se integra con el sistema de autenticación Firebase, la plataforma de almacenamiento de datos de Google. Puedes ver la documentación de autenticación de Firebase haciendo clic aquí y de Flask aquí.

Especificaciones

Para este proyecto utilizaremos una serie de sistemas y software específicos que se enumeran a continuación:

• Sistema operativo Windows 11;
• Versión 3.11.2 de Python, que puede descargarse en este link;
• Versión 2.2.3 del microframework Flask;
• Editor de código Pycharm, que puede descargarse en este link.

Inicializando un ambiente virtual

Para instalar los paquetes y aislar el entorno de desarrollo, empaquetando todas las dependencias, es necesario crear un entorno virtual. Siga los pasos a continuación para crear el virtualenv y activarlo.

1. Abra la terminal escribiendo cmd en el campo Buscar, que está en la barra de tareas;
2. Digita pip install virtualenv. PIP es un administrador de paquetes que normalmente ya está instalado con Python. Sin embargo, si ocurre un error, sigue este comando para la instalación;
3. Crea el ambiente virtual escribiendo el comando: virtualenv <~nome_da_virtualenv~>;
4. Activa el ambiente virtual con: <~nome_da_virtualenv~>/Scripts/Activate.
5. Después de terminar la creación del proyecto (o querer continuar más tarde), desactiva el entorno virtual con el comando deactivate.

Conociendo e instalando Flask

Flask es un micro-framework Pythondesarrollado para la creación de aplicaciones web. A diferencia de Django, que es más robusto, Flask pretende ofrecer soluciones para la creación de plantillas basadas en una estructura simplificada. A pesar de ser conocido por su practicidad, tiene una serie de funciones disponibles.

Para instalar Flask, abre la terminal y escribe: pip install flask y espera la instalación. Es importante recalcar que la instalación debe realizarse en su entorno virtual.

Para iniciar el desarrollo, llevaremos a cabo la import de Flask y también una serie de recursos que utilizaremos a partir del mismo.

import flask

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

El render_template será responsable de cargar la página HTML. Con solicitud, realizaremos solicitudes con los métodos GET y POST en rutas definidas. El redirect será utilizado com url_for en el redireccionamiento para páginas específicas que crearemos dentro del proyecto.

El siguiente paso es crear una instancia de Flask y almacenarla en una variable, según el siguiente código:

app = Flask(__name__)

En app, Almacenamos una instancia de Flask para definir rutas y configuraciones para nuestro sitio web. El argumento (__name__) es una variable de Python necesaria al crear la aplicación.

Para que podamos realizar las pruebas y poner la pantalla al aire, es necesario insertar el siguiente extracto:

if __name__ == '__main__':

app.run(debug=True)

El if__name__ == '__main__': hace que la aplicación se ejecute, es decir app.run, solo cuando se ejecuta el archivo en cuestión. Es decir, si el archivo (en este caso, lo llamamos app) fuera importado por otro archivo, el fragmento no se ejecutará.

El debug=True facilita la creación de la página, ya que comprende que todos los cambios que se realicen en el código deben mostrarse en la pantalla. El objetivo es reducir la necesidad de detener y reiniciar el código con cada cambio, lo que aporta mayor agilidad al proceso.

Creando la ruta principal

En este punto, crearemos la ruta principal, que, en el caso de este tutorial, solo redirigirá a la página de inicio de sesión. La creación de la ruta se verá así:

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

Para explicar la estructura de este código, lo dividiremos en partes:

@app → es el identificador de nuestro sitio web, la instancia de Flask creada previamente;

.route → Se utiliza para definir la ruta de la ruta. En este caso, '/';

Con methods=['GET', 'POST'], definiremos que los métodos aceptados serán GET, que hacen una consulta, y POST, que hace una inserción de datos.

El siguiente paso es crear la función responsable de ejecutar realmente una tarea al acceder a la ruta. La función index(): retornará el redirect(url_for('login')), que hará el redireccionamiento para una nueva página o ruta. En este caso, a la página de login.

def index():

return redirect(url_for('login'))

Construyendo templates

Los elementos HTML que compondrán los textos y formularios se pueden crear en el mismo código Python. Sin embargo, es un estándar de Flask crear un directorio específico para almacenar información creada en HTML. Esta carpeta debe llamarse templates, en la cual almacenaremos los templates login.html, principal.html y register.html.

La estructura de carpeta y archivos quedará así:

register.html

La página register.html tendrá un formulario que se utilizará para crear las credenciales del usuario. El código HTML se verá así:

Como puede ver, este es un archivo HTML normal, con la estructura básica de <!DOCTYPE html>, <html></html>, <head></head>, <body></body> y <form></form>, con sus debidos elementos internos.

Estilizaremos la pantalla de login con Cascading Style Sheet (CSS) y para esto necesitaremos crear un directorio llamado static con un subdirectorio llamado css. Dentro de este subdirectorio crearemos el archivo style_register.css, que almacenará todos los selectores y atributos.

Para que los atributos se apliquen a nuestra página, necesitaremos importar el archivo CSS al HTML. Para hacer esto, insertará, como en el ejemplo anterior, esta línea en el código.

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

En este trecho, static identifica el directorio principal y el nombre del archivo identifica la ruta del archivo. Para una mejor organización en el archivo CSS, creamos las series div y class, que serán utilizadas como selectores.

Puede diseñarlo como prefiera y, para este tutorial, insertamos algunos atributos solo para que pueda ver los cambios al importar el archivo CSS.

Con la estilización, la pantalla se veía así:

Con el template Bien creado, volvemos al código Python, definiendo la ruta, los métodos y también las acciones.

Para explicar el código con más detalle, lo desglosaremos:

En este primer apartado vamos definiendo la ruta /register y los métodos GET y POST.

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

Ahora estamos creando la función register() con el condicional if, que determina que si el método fuera GET, es decir, de consulta, será cargada la página register.html. Si el método fuera POST, almacenaremos en las variables email y password, respectivamente, el e-mail y la contraseña registrados a partir del formulario exhibido en la página de registro.

login.html

En la página login.html, Agregaremos un formulario para que el usuario ingrese sus credenciales de acceso. Básicamente, el proceso es muy similar al registro. Posteriormente con la integración con Firebase las páginas tendrán diferentes funcionalidades, ya que una capturará y almacenará los datos de inicio de sesión para que sea posible acceder a través de la otra página, en el archivo login.html insertaremos el código:

El estilo se produce exactamente de la misma manera que en la página de registro. Primero, necesitamos importar el archivo CSS al código HTML y, después de configurar las clases, crear el estilo. Usando el mismo patrón, insertaremos algunos atributos a modo de ejemplo:

Con estos atributos la pantalla quedará así:

La primera etapa es definir la ruta /login, tal cual como se hizo anteriormente con los métodos GET y POST.

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

Ahora, crearemos la función:

Para explicar mejor este fragmento de código, también dividiremos el contenido.

Al definir la función login(), crearemos el condicional de que si el método requerido fuera GET, es decir, de consulta, renderizaremos el template login.html. ¿Qué significa esto? Que al accesar la ruta /login, el template login.html será exhibido. Por otra parte, si el método fuera POST, los datos de usuario y contraseña serán almacenados en las variables email y password.

principal.html

La principal.html sEsta será la página a la que se redirigirá al usuario después de iniciar sesión. Para ilustrar, crearemos un modelo muy básico, con sólo un título:

Diseñando la página, se verá así:

Integrando con Firebase

Primero, necesitas instalar Firebase en tu proyecto. Entonces, abra la terminal y escriba: pip install flask firebase-admin. Ahora, accede a https://console.firebase.google.com/u/1/?hl=pt con tu cuenta Google y haz clic en Crear un proyecto. En este tutorial, llamaremos al projeto como Login.

En Comienza agregando Firebase a tu aplicación, selecciona la opción Web. Inserta el nombre de tu app en el campo y selecciona registrar. Será necesario buscar la información de las credenciales en .json y, para esto, debes seguir estos pasos:

1. En la consola, haz clic en el proyecto creado anteriormente;
2. En el engranaje en la parte superior izquierda de la pantalla, debajo de Visión general del proyecto, haz clic en Configuración del proyecto;
3. Clic en Cuentas de servicio y en Generar nueva clave privada.
4. Un archivo .json se descargará en tu computador. Almacénalo.

En este paso, volveremos al código inicial donde hicimos los imports e insertaremos algunos paquetes adicionales: firebase_admin, del cual importamos credentials y auth, logging para ver cualquier error en la consola y pyrebase, para gestionar el proceso de autenticación con Firebase.

logging

La visualización detallada de los errores que se producen durante la ejecución de la aplicación es fundamental a la hora de crear el proyecto. Por lo tanto, recomendamos instalar el módulo logging con pip install logging.

Pyrebase4

La validación de usuario y contraseña en Firebase se debe realizar mediante el módulo Pyrebase. Es importante prestar atención a la versión del módulo. El proceso solo funcionará si el paquete instalado es Pyrebase 4. Para instalar, usa el siguiente comando: pip install Pyrebase4.

Para inicializar Firebase, haremos más configuraciones:

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

firebase_app = firebase_admin.initialize_app(cred)

Ahora creamos un objeto llamado config con algunos datos de acceso a Firebase para inicializar Pyrebase:

Estos datos se encuentran en el camino:

1. En el engranaje en la parte superior izquierda de la página, haz clic en Configuraciones del proyecto;
2. Desplázate hacia abajo hasta encontrar los datos apiKey, authDomain y storageBucket. El campo databaseURL puede ser configurado como una string vacía.

La próxima etapa es inicializar Firebase:

firebase = pyrebase.initialize_app(config)

Creando un usuario

En el tema anterior almacenamos los datos enviados en el formulario en variables. email y password. Ahora usaremos esta información para crear un nuevo usuario de Firebase en la ruta /register. Si el usuario se crea correctamente, será redirigido a la página de inicio de sesión. De lo contrario, se mostrará un mensaje de error.

Haciendo login

Después del registro, el usuario podrá iniciar sesión en la aplicación. En el siguiente extracto, el comando firebase.auth().sign_in_with_email_and_password(email, password) consultará el usuario de Firebase según el correo electrónico y la contraseña proporcionados. Si los datos introducidos son correctos el usuario será redirigido a la ruta /principal. De lo contrario, se mostrará un mensaje de "Correo electrónico o contraseña incorrectos".

Creando la ruta /principal para acceso después del login

Al iniciar sesión, el usuario será redirigido a /principal. En un tema anterior, creamos una plantilla simple para ilustrar este paso. Ahora construiremos la ruta.

Flask es un micro-framework en su definición, pero tiene una serie de características que lo hacen completo en el desarrollo simplificado de aplicaciones e integraciones con Python. En este artículo aprendiste cómo crear pantallas de registro e inicio de sesión, además de la pantalla a la que se redirige al usuario, realizando la autenticación en Firebase.

Espero que hayas disfrutado esta guía. ¡Hasta luego!