DEV Community: Angel Hurtado

Automatización de pruebas en Angular con GitHub Actions

Angel Hurtado — Fri, 11 Jun 2021 15:11:59 +0000

Conforme un producto de software crece, también suele incrementar el número de pruebas unitarias que se deben ejecutar. Existen varias soluciones para automatizar la ejecución de pruebas y una de ellas es GitHub Actions. A continuación explicaré como configurarlo en un proyecto de Angular.

Creando un nuevo proyecto

Primero crearemos un proyecto Angular en blanco. Es necesario instalar la ultima versión de Angular CLI, la cual podemos instalar o actualizar con el siguiente comando.

npm i @angular/cli -g # Instalación global

Ahora podemos crear nuestro proyecto con el siguiente comando

ng new ghactions-angular # Cambia ghactions... por el nombre de tu proyecto

Escoge las opciones de Angular Router y de formato de hojas de estilo que más te convengan. En mi caso si utilizaré Angular Router y SCSS como formato de hojas de estilo. La instalación de paquetes podrá demorar varios minutos. Obtendremos un resultado como este:

No olvides subir tu nuevo proyecto a un repositorio de GitHub público o privado. Si deseas hacerlo desde la terminal te recomiendo GitHub Actions.

Implementando pruebas

Ahora creemos unas cuantas pruebas. En el archivo app.component.html eliminamos todo el contenido por defecto, y dejamos solo un título y un párrafo:

<h1 id="app-title">Hola mundo!</h1>
<p id="app-descr">Esta es una aplicación Angular</p>

<router-outlet></router-outlet>

Como puedes ver, este título y párrafo tienen un id. Este nos servirá para buscar los elementos en el DOM durante las pruebas unitarias. Ahora modifiquemos el archivo app.component.spec.ts, y dejemos solo dos pruebas:

it('should create the app', () => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.componentInstance;
  expect(app).toBeTruthy();
});

it('should render title & description', () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.nativeElement;
  const title = compiled.querySelector('#app-title');
  const descr = compiled.querySelector('#app-descr');
  expect(title.textContent).toContain('Hola mundo!');
  expect(descr.textContent).toContain('Esta es una aplicación Angular');
});

Ahora comprobemos que las pruebas se ejecutan correctamente con el comando ng test. Por defecto estas pruebas las ejecuta exitosamente en el navegador, como podemos observar en esta imagen:

Ejecutar pruebas sin interfaz gráfica

Ya que las pruebas se ejecutan en un navegador (y que este se debe mostrar en pantalla) la ejecución de pruebas suele fallar en GitHub Actions, ya que solo está equipado con las herramientas mínimas y sin capacidades gráficas. Necesitamos una solución que nos permita usar un navegador por medio de la Terminal, sin interfaz gráfica. Para esto instalaremos Puppeter:

npm i puppeteer --dev

Esta instalación demorará algunos minutos, ya que puppeter incluye su propio binario del navegador Chromium. Al finalizar la instalación, cambiaremos la configuración de Karma en el archivo karma.conf.js:

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

process.env.CHROME_BIN = require("puppeteer").executablePath();

module.exports = function (config) {
  config.set({
        ...
    browsers: ['Chrome', 'ChromeHeadlessCI'],
    customLaunchers: {
      ChromeHeadlessCI: {
        base: 'ChromeHeadless',
        flags: [
          '--no-sandbox',
          '--disable-gpu',
          '--enable-features=NetworkService',
        ],
      },
    }
        ...
  });
};

Principalmente, estamos obteniendo el directorio del ejecutable de Chromium por medio de Puppeteer, y lo añadimos como ChromeHeadlessCI.

Si tu proyecto contiene pruebas E2E con Protractor, también puedes configurarlo creando un nuevo archivo protractor-ci.conf.js en el directorio e2e, con la siguiente configuración:

const config = require('./protractor.conf').config;

config.capabilities = {
  browserName: 'chrome',
  chromeOptions: {
    args: ['--headless', '--no-sandbox', '--disable-gpu'],
    binary: require('puppeteer').executablePath(),
  },
};

exports.config = config;

Como ves, este archivo extiende la configuración del archivo protractor.conf.js. También modificaremos ese archivo para usar Puppeteer:

config.capabilities = {
    ...
  browserName: 'chrome',
  chromeOptions: {
    binary: require('puppeteer').executablePath(),
  },
    ...
};

Finalmente cambiamos el archivo de configuración de Angular angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ghactions-angular": {
      ...
      "architect": {
        ...
        "test": {
          ...
                    "configurations": { // Añadir configuración opcional 'ci'
            "ci": {
              "progress": false,
              "watch": false,
              "browsers": "ChromeHeadlessCI" // Usar Chromium sin GUI al usar configuración 'ci'
            }
          }
        }
                ...
                "e2e": { // Si usas e2e
          ...
          "configurations": {
                        ...
            "ci": {
              "devServerTarget": "app:serve:ci",
              "protractorConfig": "e2e/protractor-ci.conf.js" // Usar protractor-ci al usar la configuración 'ci'
            }
          }
        },
      }
    }
  },
  ...
}

Ahora podemos ejecutar los tests sin abrir el navegador, pasando el flag --configuration=ci

ng test --configuration=ci
ng e2e --configuration=ci

Este es el resultado al ejecutar el comando con el flag --configuration=ci

Asi mismo, si ejecutas los tests sin el flag, notaras que esta vez se abre el navegador Chromium y no el navegador Chrome que usas normalmente. Es importante que sigas ejecutando los tests en tu equipo local, y usar un entorno lo más parecido al que usaremos en GitHub Actions, usando el mismo binario y versión de Puppeteer.

Asegurate de subir estos últimos cambios a GitHub.

Pruebas automáticas en GitHub Actions

Para utilizar GitHub Actions es necesario que tengamos un directorio .github, y dentro de este un directorio workflows. Dentro del directorio workflows podremos crear varios archivos .yml con distintos workflows para GitHub Actions. Por ahora solo crearemos un archivo ci.yml con el siguiente contenido:

Ahora crearemos el primer Job del Workflow, que será el de la instalación de paquetes de NodeJS:

jobs:
  install:
    name: Installation # Nombre del Job
    runs-on: ubuntu-latest # Ejecutar en Ubuntu
    steps:
      - uses: actions/checkout@v2 # Clonar repositorio actual
      - uses: actions/setup-node@v1 # Usar Node
        with:
          node-version: 12 # Versión de Node
      # Cargar cache de node_modules, para reducir tiempo de instalación en próximas ejecuciones
      - name: Cache node modules
        id: node-cache # Id del cache
        uses: actions/cache@v1
        with:
          path: node_modules
          # Se usará el mismo cache siempre y cuando sea el mismo sistema operativo y no existan cambios en el archivo package-lock
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
      # Instalar dependencias
      - name: Install dependencies
        # No ejecutar si se obtuvo node_modules de cache
        if: steps.node-cache.outputs.cache-hit != 'true' 
        run: npm install

Guardamos los cambios y los subimos a GitHub con el comando git push. Ahora vamos al repositorio y podemos ver que se ha iniciado GitHub Actions:

Asi mismo podemos ver los detalles del workflow:

Al finalizar nos mostrará un check-mark en color verde, indicando que todos los Jobs fueron ejecutados exitosamente:

Terminemos de configurar el Workflow. Este es el código completo del archivo ci.yml:

name: Continuous Integration # Nombre del workflow

on: # ¿Cuando ejecutar?
  push: # Al hacer push a las siguientes ramas
    branches: [main] # o master
  pull_request: # Al crear un pull request a las siguientes ramas
    branches: [main] # o master

jobs:
  ci:
    name: Continuous Integration # Nombre del Job
    runs-on: ubuntu-latest # Ejecutar en Ubuntu
    steps:
      - uses: actions/checkout@v2 # Clonar repositorio actual
      - uses: actions/setup-node@v1 # Usar Node
        with:
          node-version: 12 # Versión de Node
      # Cargar cache de node_modules, para reducir tiempo de instalación en próximas ejecuciones
      - name: Cache node modules
        id: node-cache # Id del cache
        uses: actions/cache@v1
        with:
          path: node_modules
          # Se usará el mismo cache siempre y cuando sea el mismo sistema operativo y no existan cambios en el archivo package-lock
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
      # Instalar dependencias
      - name: Install dependencies
        # No ejecutar si se obtuvo node_modules de cache
        if: steps.node-cache.outputs.cache-hit != 'true' 
        run: npm install
      # Generar compilación de producción
      - name: Run Build command
        run: npm run build -- --prod
      # Ejecutar pruebas unitarias
      - name: Run Unit tests
        run: npm run test -- --configuration=ci

Subimos los cambios a GitHub con el comando git push, y volvemos a la página del repositorio en GitHub. Ahora vemos que esta ejecutando los nuevos pasos que especificamos:

Finalmente obtendremos este resultado:

Ahora cada vez que hagamos push a la rama principal main, o creemos un pull request a esa rama, se ejecutará este Workflow. Puedes ver todo el código fuente aquí.

Implementando descargas de archivos con Capacitor/Cordova

Angel Hurtado — Thu, 03 Jun 2021 02:51:06 +0000

En esta guía explicaré como implementar la función de descargas en una aplicación con Capacitor y React, tal como lo hice en la aplicación StudyLater

Configurando Capacitor

Es necesario instalar Capacitor en nuestra aplicación web. Si creaste tu aplicación con Ionic 4/5 posiblemente ya lo tienes configurado, y puedes saltar al siguiente título.

En el caso de StudyLater lo hice sin Ionic, y usando una aplicación React, para demostrar que se puede usar sin Ionic ni Angular. Incluso se puede usar sin TypeScript, como lo demuestro en este otro proyecto.

Crear aplicación React con Typescript: npx create-react-app [NOMBRE APP] --template cra-template-pwa-typescript
Instalar Bootstrap (opcional): npm i bootstrap react-bootstrap@next e importar en el archivo index.tsx:

import "../node_modules/bootstrap/dist/css/bootstrap.min.css"

Instalar Capacitor: npm install @capacitor/core @capacitor/cli
Compilar aplicación: npm run build
Configurar Capacitor: npx cap init
Añadir plataformas: npx cap add [android/ios]. Se crearán los directorios android y ios respectivamente
Copiar assets y actualizar plugins: npx cap sync android
Abrir IDE y compilar:
- Android: npx cap open android (Requiere Android Studio)
- iOS: npx cap open ios (Requiere XCode)
En Capacitor 3 permite ejecutar la aplicación en un dispositivo sin abir Android Studio, con el comando: npx cap run [android/ios] --target [ID de Target]
- Para ver los dispositivos dispobibles usa el comando: npx cap run [android/ios] --list

NOTA: Cada vez que actualices tu aplicación deberás ejecutar los pasos npm run build y npx cap sync. Consulta más sobre la instalación de Capacitor y el comando cap run

Implementando descarga de archivos

Para implementar la descarga de archivos utilizaremos los plugins File y HTTP Nativo. Si bien estos plugins se pueden utilizar sin Capacitor, en una aplicación Cordova, Capacitor facilita la instalación de estos, ya que los trata como dependencias NPM y no es necesario utilizar comandos como cordova plugin ... y otros.

Instalar Ionic Native Core: npm install @ionic-native/core
Instalar plugin File: npm install cordova-plugin-file ; npm install @ionic-native/file. Con este plugin podremos determinar la ruta donde guardar los archivos, así como realizar otras operaciones como crear directorios, eliminar archivos, etc.
Instalar plugin HTTP: npm install cordova-plugin-advanced-http ; npm install @ionic-native/http. Con este plugin podremos descargar archivos, y realizar cualquier tipo de solicitud HTTP de manera nativa, y evitando errores que surgirían al solo usar fetch(), tales como errores de CORS.
Actualizar plugins: npx cap sync android. Tras ejecutar este comando observarás cambios en archivos como android/app/src/main/res/xml/config.xml:

  <feature name="CordovaHttpPlugin">
    <param name="android-package" value="com.silkimen.cordovahttp.CordovaHttpPlugin"/>
  </feature>

  <feature name="File">
    <param name="android-package" value="org.apache.cordova.file.FileUtils"/>
    <param name="onload" value="true"/>
  </feature>

Ahora puedes implementar las descargas de la siguiente manera:

import { Capacitor } from "@capacitor/core"
import { HTTP } from "@ionic-native/http"
import { File } from "@ionic-native/file"

export const descargar = async () => {
  // URL de ejemplo
  const dummyPDF =
    "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
  // Determinar que plataforma se esta usando
  const platform = Capacitor.getPlatform()
  if (platform === "web") {
    throw new Error("Operación no permitida en versión Web")
  }
  // Determinar ruta donde se guardará el archivo
  const filePath = `${File.dataDirectory}archivo.pdf`
  // Descargar archivo desde URL
  await HTTP.downloadFile(dummyPDF, {}, {}, filePath)
  // Guardar ruta donde se guardó el archivo en LocalStorage
  localStorage.setItem("DUMMY", filePath)
}

Recuerda ejecutar los comandos npm run build && npx cap sync [android/ios] antes de probar tu aplicación.

La implementación en una aplicación Angular sería diferente, ya que se puede importar estos plugins como módulos de Angular, e inyectarlos como dependencias. Ver un ejemplo para Angular

Es muy importante conservar la ruta donde se guardó el archivo. Si bien en este ejemplo guardo esta ruta en localStorage, no es conventiente utilizarlo en una aplicación en producción, ya que localStorage suele ser borrado periodicamente por el sistema operativo. Es mejor utilizar un plugin como Ionic Storage.

Abriendo archivos descargados

Para abrir los archivos utlizaremos el plugin File Opener 2. Este plugin permite abrir los archivos descargados con la aplicación por defecto registrada para el tipo de archivo; Si se abre una imagen, la abrirá en la Galería, en cambio un archivo PDF lo podría abrir en el visor PDF de Google Drive, o cualquier otro visor PDF. Para otro tipo de archivos se debe pedir al usuario instalar una aplicacion de terceros, o utilizar otra solución como el plugin Document Viewer que ya incluye un visor de documentos.

Instalar plugin File Opener 2: npm install cordova-plugin-file-opener2 ; npm install @ionic-native/file-opener
Actualizar plugins: npx cap sync android. Tras ejecutar este comando observarás cambios en archivos como android/app/src/main/res/xml/config.xml:

  <feature name="FileOpener2">
    <param name="android-package" value="io.github.pwlin.cordova.plugins.fileopener2.FileOpener2"/>
  </feature>

Ahora puedes implementar la apertura de archivos de la siguiente manera:

import { Capacitor } from "@capacitor/core"
import { FileOpener } from "@ionic-native/file-opener"

export const abrir = async () => {
  // Cargar ruta del archivo que descargamos antes
  const filePath = localStorage.getItem("DUMMY")
  if (!filePath) {
    throw new Error("No se ha descargado el archivo")
  }
  // Determinar que plataforma se esta usando
  const platform = Capacitor.getPlatform()
  if (platform === "web") {
    throw new Error("Operación no permitida en versión Web")
  }
  // Se debe especificar que tipo de archivo es
  const mimeType = "application/pdf"
  // Abrir archivo
  await FileOpener.open(filePath, mimeType)
}

Actualmente el plugin presenta un issue que impide la compilación. Para solucionarlo podemos usar Jetifier:

Instalar Jetifier: npm i jetifier
Ejecutar Jetifier: npx jetify

Deberemos ejecutar este comando despues de npm run build

Conclusión

Uno de los métodos más sencillos para crear aplicaciones móviles es el uso de Capacitor, el cual nos permite convertir cualquier aplicación web en una aplicación hibrida. Cuando se usa en conjunto con los plugins de Capacitor, plugins de Cordova y el framework Ionic podemos construir aplicaciones con un buen diseño y funcionalidades nativas.

Recursos y referencias

Usando Firebase para autenticar en Django REST Framework

Angel Hurtado — Thu, 03 Jun 2021 02:44:08 +0000

Firebase nos ofrece una gran variedad de servicios y funcionalidades para implementar en nuestras aplicaciones, las cuales abarcan desde el desarrollo hasta la implementación y el crecimiento de nuestras aplicaciones.

Uno de los servicios más populares es Firestore, el cual nos ofrece una base de datos NoSQL rápida, confiable y asequible. Sin embargo, existen ocasiones en las que necesitaremos de utilizar una base de datos relacional, y esto puede ser por las características de la aplicación, o para integrar un backend o una API legacy. Para este propósito Firebase nos permite generar un token JWT, con el cual podemos autenticar a nuestros usuarios en una API REST.

A continuación explicaré como utilizar Firebase Auth para autenticar en una API creada con Django REST Framework, y así utilizar esta API en una Aplicación Web Progresiva.

Crear PWA y configurar Firebase

El primer paso es crear una Aplicación Web Progresiva con React:

npx create-react-app [NOMBRE_PROYECTO] --template cra-template-pwa-typescript

Para dar un mejor diseño a la aplicación podemos utilizar una gran variedad de librerías de UI. En mi caso yo utilicé las librerías Bootstrap y React Bootstrap:

npm i bootstrap react-bootstrap@next

Para importar los estilos de Bootstrap debemos modificar el archivo index.tsx, y añadir la siguiente linea:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Posteriormente debemos registrar un nuevo proyecto en la Consola de Firebase:

Crear una Aplicación Web
Configurar Google como método de acceso
Configurar dominios autorizados

Tras obtener la configuración de la Aplicación Web, almacenar estas variables en el archivo .env.local, para evitar publicar estos valores en el repositorio de Git. Consultar más sobre la carga de variables de entorno en React. Estas son las variables:

REACT_APP_FIREBASE_API_KEY=
REACT_APP_FIREBASE_AUTH_DOMAIN=
REACT_APP_FIREBASE_PROJECT_ID=
REACT_APP_FIREBASE_STORAGE_BUCKET=
REACT_APP_FIREBASE_MESSAGE_SENDER_ID=
REACT_APP_FIREBASE_APP_ID=

Para cargar estas variables creamos el archivo firebaseConfig.ts con el siguiente contenido:

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
}

export default firebaseConfig

Para configurar Firebase utilicé la librería Reactfire, la cual instalé con el comando npm install --save reactfire firebase. Es necesario pasar la configuración al componente FirebaseAppProvider, en el archivo index.tsx:

ReactDOM.render(
  <FirebaseAppProvider firebaseConfig={firebaseConfig}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </FirebaseAppProvider>,
  document.getElementById("root")
)

Para habilitar el Inicio de sesión con Google es necesario utilizar la función signInWithPopup, y pasar GoogleAuthProvider como argumento:

import firebase from "firebase/app"

const googleProvider = new firebase.auth.GoogleAuthProvider()

export const loginWithGoogle = async () => {
  return await firebase.auth().signInWithPopup(googleProvider)
}

const LoginPage = () => (
  <main className="mt-3">
    <Button onClick={loginWithGoogle}>Iniciar sesión con Google</Button>
  </main>
)

Al final resultará una PWA como esta:

Crear una API REST con Django REST Framework

Para crear el API REST con Django es necesario ejecutar los comandos python3 -m django startproject djangofire y ./manage.py startapp projectmin. Para crear modelos y tablas hay que realizar estos cambios:

projectmin/models.py

from django.db import models
from django.conf import settings


class Project(models.Model):

    COLORS = (
        ("primary", "primary"),
        ("secondary", "secondary"),
        ("success", "success"),
        ("danger", "danger"),
        ("warning", "warning"),
        ("info", "info"),
    )

    title = models.CharField(max_length=100)
    color = models.CharField(max_length=10, choices=COLORS, default="primary")
    owner = models.ForeignKey(
        settings.AUTH_USER_MODEL,
        on_delete=models.CASCADE,
        related_name='projects'
    )

projectmin/admin.py

from django.contrib import admin
from projectmin.models import Project


@admin.register(Project)
class ProjectAdmin(admin.ModelAdmin):
    list_display = ('id', 'title', 'color', 'owner')

Para implementar las funcionalidades de una API REST instalé Django REST Framework con el comando pip install djangorestframework, y realicé los siguientes cambios:

projectmin/serializers.py

from django.shortcuts import render
from rest_framework import serializers
from projectmin.models import Project


class ProjectSerializer(serializers.ModelSerializer):

    owner = serializers.HiddenField(
        default=serializers.CurrentUserDefault()
    )

    class Meta:
        model = Project
        fields = ('id', 'title', 'color', 'owner')

projectmin/views.py

from django.shortcuts import render
from rest_framework import viewsets
from projectmin.models import Project
from projectmin.serializers import ProjectSerializer


class ProjectViewSet(viewsets.ModelViewSet):
    queryset = Project.objects.all()
    serializer_class = ProjectSerializer

    def get_queryset(self):
        user = self.request.user
        return Project.objects.filter(owner=user)

projectmin/urls.py

from rest_framework import routers
from projectmin.views import ProjectViewSet

projectmin_router = routers.DefaultRouter()
projectmin_router.register(r'projects', ProjectViewSet)

djangofire/urls.py

from django.contrib import admin
from django.urls import path
from django.urls.conf import include
from projectmin.urls import projectmin_router

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include(projectmin_router.urls)),
]

Para asegurar que usuarios no autorizados hagan cambios hay que realizar los siguientes cambios:

djangofire/settings.py

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    ),
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.BasicAuthentication',
        'rest_framework.authentication.SessionAuthentication',
    ),
}

Finalmente generamos las tablas con el comando ./manage.py makemigrations

Desplegar API REST en Heroku

Para que Django funcione en Heroku hay que realizar los siguientes cambios:

Procfile

release: python manage.py migrate
web: gunicorn djangofire.wsgi

djangofire/production.py

from .settings import *

import os
import django_heroku

# Usar SECRET_KEY desde Heroku enviroment values
SECRET_KEY = os.environ['SECRET_KEY']
# Desactivar modo debug
DEBUG = os.getenv('DJANGO_DEBUG', 'FALSE') == 'TRUE'
# Permitir Host de Heroku enviroment values
ALLOWED_HOSTS = [os.environ['HOST']]

# Activar paquete Django-Heroku.
django_heroku.settings(locals())

requirements.txt

Django==3.2.0
django-heroku==0.3.1
django-cors-headers==3.6.0
djangorestframework==3.12.4
gunicorn==20.1.0

Para desplegar este proyecto en Heroku es necesario inicializar un repositorio con Git y haber hecho Commit a todos los cambios anteriores. Despues podremos ejecutar los siguientes comandos:

heroku create [NOMBRE PROYECTO]
heroku config:set SECRET_KEY="[SECRET_KEY]"
heroku config:set HOST="[Heroku URL]" # La url que resultó en heroku create
git push heroku main # O master, dependiendo del nombre que utilices para tu rama principal
heroku run python manage.py createsuperuser # Crear usuario administrador

Al final podremos visitar la url de nuestro proyecto en Heroku, pero obtendremos un error ya que la ruta / no fue implementada, pero podemos navegar a la ruta /admin e iniciar sesión en Django Admin. Ya iniciada la sesión podremos ir a la ruta /api/v1/projects:

Esta interfaz viene incluida con Django REST Framework y para desactivarla debemos incluir el encabezado 'Content-Type': "application/json", en las solicitudes HTTP

Validar JWT de Firebase

Para validar los tokens JWT de Firebase podemos usar la libreria drf_firebase_auth, con la siguiente configuración

djangofire/production.py

INSTALLED_APPS = INSTALLED_APPS + [
    'drf_firebase_auth'
]
REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    ),
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.BasicAuthentication',
        'rest_framework.authentication.SessionAuthentication',
        'drf_firebase_auth.authentication.FirebaseAuthentication',
    ),
}
# Configurar Firebase JWT
DRF_FIREBASE_AUTH = {
    # allow anonymous requests without Authorization header set
    'ALLOW_ANONYMOUS_REQUESTS': os.getenv('ALLOW_ANONYMOUS_REQUESTS', False),
    # allow creation of new local user in db
    'FIREBASE_CREATE_LOCAL_USER': os.getenv('FIREBASE_CREATE_LOCAL_USER', True),
    # attempt to split firebase user.display_name and set local user
    # first_name and last_name
    'FIREBASE_ATTEMPT_CREATE_WITH_DISPLAY_NAME': os.getenv('FIREBASE_ATTEMPT_CREATE_WITH_DISPLAY_NAME', True),
    # commonly JWT or Bearer (e.g. JWT <token>)
    'FIREBASE_AUTH_HEADER_PREFIX': os.getenv('FIREBASE_AUTH_HEADER_PREFIX', 'Bearer'),
    # verify that JWT has not been revoked
    'FIREBASE_CHECK_JWT_REVOKED': os.getenv('FIREBASE_CHECK_JWT_REVOKED', True),
    # require that firebase user.email_verified is True
    'FIREBASE_AUTH_EMAIL_VERIFICATION': os.getenv('FIREBASE_AUTH_EMAIL_VERIFICATION', False),
    # secrets of firebase
    'FIREBASE_SERVICE_ACCOUNT_KEY': {
        "type": "service_account",
        "project_id": os.getenv('FIREBASE_PROJECT_ID', ''),
        "private_key_id": os.getenv('FIREBASE_PRIVATE_KEY_ID', ''),
        "private_key": os.getenv('FIREBASE_PRIVATE_KEY', '').replace('\\n', '\n'),
        "client_email": os.getenv('FIREBASE_CLIENT_EMAIL', ''),
        "client_id": os.getenv('FIREBASE_CLIENT_ID', ''),
        "auth_uri": "https://accounts.google.com/o/oauth2/auth",
        "token_uri": "https://oauth2.googleapis.com/token",
        "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
        "client_x509_cert_url": os.getenv('FIREBASE_CLIENT_X509_URL', ''),
    }
}

Tambien es necesario incluir esta librería en el archivo de requerimientos:

Django==3.2.0
django-heroku==0.3.1
drf-firebase-auth==1.0.0
django-cors-headers==3.6.0
djangorestframework==3.12.4
gunicorn==20.1.0

Es necesario obtener el archivo .json de cuenta de servicio en Configuración > Cuentas de servicio de la consola de Firebase. Se debe resguardar este archivo, ya que no se puede recuperar. No se debe incluir en el repositorio de Git. Estos valores se obtendrán por medio de variables de entorno.

Para desplegar estos cambios en Heroku es necesario hacer Commit a todos los cambios anteriores. Despues podremos ejecutar los siguientes comandos:

heroku config:set FIREBASE_PROJECT_ID="[VALOR]"
heroku config:set FIREBASE_PRIVATE_KEY_ID="[VALOR]"
heroku config:set FIREBASE_PRIVATE_KEY="[VALOR]"
heroku config:set FIREBASE_CLIENT_EMAIL="[VALOR]"
heroku config:set FIREBASE_CLIENT_ID="[VALOR]"
heroku config:set FIREBASE_CLIENT_X509_URL="[VALOR]"
git push heroku main # O master, dependiendo del nombre que utilices para tu rama principal

Finalmente para obtener el token JWT de Firebase, este se puede obtener con la función getIdToken(), la cual viene en cualquier instancia de firebase.auth.User. Este token debe ser incluido en los encabezados de cada solicitud HTTP. Utilicé una funcion para poder generar este header:

import firebase from "firebase/app"

export const getHeaders = async (): Promise<Headers> => {
  const currentUser = firebase.auth().currentUser
  if (!currentUser) {
    throw new Error("No ha iniciado sesión")
  }
  const token = await currentUser.getIdToken()
  const autorization = `Bearer ${token}`
  const headers = new Headers({
    Authorization: autorization,
    "Content-Type": "application/json",
  })
  return headers
}

Para listar todos los proyectos, podemos utilizar fetch(), como se muestra a continuación:

export interface Project {
  id: number
  title: string
  color: string
}

export const getProjects = async (): Promise<Project[]> => {
  const headers = await getHeaders()
  const url = `${apiURL}projects`
  const res = await fetch(url, {
    method: "GET",
    headers: headers,
    redirect: "follow",
  })
  if (res.status !== 200) {
    console.error(res)
    throw new Error("Error al cargar Proyectos")
  }
  const body: Project[] = await res.json()
  localStorage.setItem("ALL_PROJECTS", JSON.stringify(body))
  return body
}

Implementé las operaciones GET, POST, PATCH y DELETE en el demo, y puedes consultar el código fuente de la aplicación en GitHub.

Conclusión

La flexibilidad que nos ofrece una herramienta como Firebase hace posible implementar múltiples funcionalidades a nuestra aplicación, utilizar varios patrones de diseño, y adaptarnos lo mejor posible a los requerimientos del software.

En este Post se explora una de estas posibilidades, la de usar Firebase para autenticar en una API REST, la cual incluso podría acceder a Firestore, administrar usuarios, entre otras funcionalidades ofrecidas por Firebase Admin.

Esta solución no esta restringida a un solo framework o lenguaje de programación, ya que esta librería esta disponible para Node.js, Java, Python, Go y C#. Así, las posibilidades se vuelven infinitas.