# Añadir Passkeys a mis aplicaciones Django
## Cambios en Dockerfile
En el Dockerfile de creación de la imagen hay que hacer un pequeño cambio para copiar el logo de passkeys con fondo negro al directorio de instalación del módulo de passkeys dentro del contenedor.
Esto es necesario porque el logo que viene por defecto es blanco y si el botón de entrar con passkey es también blanco, pues no se ve.
COPY ./src/config/FIDO_Passkey_mark_A_black.jpg /root/.local/lib/python3.14/site-packages/passkeys/static/passkeys/imgs/
Para ello, en el directorio ```./src/config``` hay que dejar el logo correcto. Lo descargué de la página de la [FIDO Alliance](https://fidoalliance.org/get-the-passkey-icon/).
## Cambios en ```settings.py````
En ```settings.py```` hay que hacer los siguientes cambios:
1. Añadir ```'passkeys',``` a ```INSTALLED_APPS```:
INSTALLED_APPS = [
...
...
'passkeys',
...
...
]
2. Añadir el backend de autenticación:
AUTHENTICATION_BACKENDS = ['passkeys.backend.PasskeyModelBackend']
3. Añadir las siguientes variables:
FIDO_SERVER_ID="finanzas.reymota.es" # Server rp id for FIDO2, it the full domain of your project
FIDO_SERVER_NAME="Finanzas"
KEY_ATTACHMENT = None # Set None to allow all authenticator attachment
> en ```FIDO_SERVER_ID``` hay que poner el nombre del dominio. Este de aquí es un ejemplo.
## Cambios en ```urls.py``` del proyecto.
En el fichero ```urls.py``` del proyecto, hay que añadir una entrada para passkeys.
urlpatterns = [
...
...
path('passkeys/', include('passkeys.urls')),
...
...
]
No olvidar importar ```include```:
from django.urls import path, include
## Cambios en ```reymotausers```
En ```reymotausers``` hay que añadir un nuevo fichero llamado ```auth.py``` con el siguiente contenido:
import json
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.forms import AuthenticationForm
from django.shortcuts import render, redirect
from rest_framework.exceptions import AuthenticationFailed
from rest_framework.permissions import AllowAny
from rest_framework.response import Response
from rest_framework.serializers import Serializer, CharField
from rest_framework.views import APIView
from passkeys.api.token_backends import get_token_response
def loginView(request):
if request.method == "POST":
passkeys_raw = request.POST.get("passkeys", "")
if passkeys_raw:
user = authenticate(request)
if user:
login(request, user)
return redirect(request.POST.get("next", "") or "principal")
form = AuthenticationForm(request)
form.add_error(None, "Passkey authentication failed. Try again.")
else:
form = AuthenticationForm(request, data=request.POST)
if form.is_valid():
user = form.get_user()
login(request, user)
return redirect(request.POST.get("next", "") or "principal")
else:
form = AuthenticationForm(request)
return render(request, "registration/login.html", {"form": form})
# def create_session(request,username):
# user=User.objects.get(username=username)
# user.backend='django.contrib.auth.backends.ModelBackend'
# login(request, user)
# return HttpResponseRedirect(reverse('home'))
def logoutView(request):
logout(request) # pragma: no cover
return render(request,"logout.html",{}) # pragma: no cover
class LoginSerializer(Serializer):
username = CharField()
password = CharField()
class LoginAPIView(APIView):
"""
Username + password login API.
Returns the same token format as passkey authentication
(JWT, DRF Token, or session depending on project config).
Use this to get an initial token before registering passkeys.
"""
permission_classes = [AllowAny]
serializer_class = LoginSerializer
def post(self, request):
serializer = LoginSerializer(data=request.data)
serializer.is_valid(raise_exception=True)
user = authenticate(
request,
username=serializer.validated_data['username'],
password=serializer.validated_data['password'],
)
if user is None:
raise AuthenticationFailed("Invalid username or password")
token_data = get_token_response(user, request)
return Response({
'user_id': user.pk,
'username': user.get_username(),
**token_data,
})
A continuación, hay que modificar ```urls.py``` de ```accounts``` añadiendo
from reymotausers.auth import loginView
y en ```urlpatterns``` cambiar el path de login por:
path('login/', loginView, name='login'),
## Templates para passkeys.
En el directorio ```templates``` hay que añadir una carpeta ```passkeys``` con un fichero ```manage.html``` cuyo contenido es el siguiente:
{% extends "passkeys/base.html" %}
{% load static %}
{% block head %}
{{block.super}}
{% endblock %}
{% block content %}
{{block.super}}
Name
Date Added
Platform
Last Used
Status
Delete
{% if keys %}
{% for key in keys %}
{{ key.name }}
{{ key.added_on }}
{{ key.platform }}
{% if key.last_used %}{{ key.last_used }}{% else %}Never{% endif %}
{% endfor %}
{% else %}
You didn't have any keys yet.
{% endif %}
{% include "passkeys/modal.html" %}
{% endblock %}
## Template de login.
en la template ```login.html``` hay que añadir los componentes necesarios para ofrecer la posibilidad de entrar con passkey.
Para ello, antes del final del form (``````) y después del botón de login propiamente dicho, hay que añadir otro botón para ofrecer la posibilidad de entrar con passkeys:
La clave están en el tag ```button``` en cual tiene una opción ```onclick``` que hace que se invoque a la funcionalidad de passkeys.
Aquí es donde he metido un nuevo logo de FIDO Passkey que es mejor (para mis web) que el que viene por defecto que está en blanco total.
También he añadido un estilo específico para que se separe un poco del botón de login que tiene justo encima:
style="margin-top: 10px"
Por último, antes del cierre de ```body``` hay que añadir:
{%include 'passkeys/passkeys.js' with allow_password=True %}
## Cambios en ```base.html```
En ```base.html``` hay que añadir una opción al menú de usuario para que este pueda gestionar las llaves de paso.
En el dropdown, se añade la línea resaltada:
## Cambios en ```requirements.txt```
En ```requirements.txt``` hay que añadir estos dos requisitos para que sean instalados en la imagen:
django-passkeys>=2.1
djangorestframework-simplejwt>=5.0
## Migraciones.
Cuando se lanza la aplicación, en ```entrypoing.sh``` se llama a ```migrate``` y a ```collectstatic```.
Esto hace que se cree la tabla de llaves de paso y también que se copien los componentes estáticos de passkeys en el directorio correspondiente.
## Otras consideraciones.
El primer proyecto que modifiqué fue el de ```ReyMotaAppsOC```. Luego seguí por ```misfinanzas```. En este último no estaban bien configuradas las templates en lo que se refiere principalmente al bloque head.
Lo dejé igual que en ```ReyMotaAppsOC```. Básicamente, ```_head.html``` no cierra el head con `````` y se cierra en las plantillas que la incluyen. Solo en ```base.html``` se include ```{% block head %}{% endblock %}```. Con esto la template ```passkeys/manage.html``` incluye el código necesario para la función de añadir llaves.
## cambios para hacer que si hay passkey no pida password
On branch passkeys
Your branch is up to date with 'origin/passkeys'.
Changes not staged for commit:
(use "git add ..." to update what will be committed)
(use "git restore ..." to discard changes in working directory)
modified: .current_version
modified: .kube/config
modified: .version
modified: ../passkeys-django.md
modified: ../src/accounts/urls.py
modified: ../src/reymotausers/auth.py
modified: ../src/templates/registration/login.html
no changes added to commit (use "git add" and/or "git commit -a")
=======