Tutorial: Autenticación de usuarios con Django en Visual Studio

2025-06-12

En este artículo se presenta el paso 5 de la serie de tutoriales Trabajar con el marco web de Django en Visual Studio.

La autenticación es un requisito común para las aplicaciones web. La plantilla proyecto web de Django de Visual Studio proporciona todos los módulos necesarios para la autenticación en el archivo settings.py del proyecto de Django. En el paso 4 de esta serie de tutoriales se crea una aplicación web de Django mediante esta plantilla. En el paso 5, explorará las funcionalidades de autenticación de la plantilla y trabajará con las características de la aplicación en ejecución.

En el paso 5 del tutorial, aprenderá a:

Exploración del flujo de autenticación en la plantilla proyecto web de Django en Visual Studio
Examen del código que admite el proceso de autenticación
Modificación del código para habilitar el acceso a las interfaces de administrador de Django
Ejecución de la aplicación web de Django y uso de características de autenticación

Prerrequisitos

Una solución de Visual Studio y una aplicación web de Django basadas en la plantilla de proyecto web de Django (DjangoWeb). Paso 4: Usar la plantilla completa proyecto web de Django describe cómo crear esta aplicación.
La aplicación web de Django debe tener una cuenta de superusuario (administrador). paso 4 (Crear superusuario de Django) describe cómo crear las credenciales de superusuario.
Revise la sección requisitos previos del paso 1 de esta serie de tutoriales para obtener más información sobre las versiones de plantilla de Django, los proyectos de Visual Studio frente a los proyectos de Django y el desarrollo de Python en Mac.

Exploración del flujo de autenticación

En esta sección se explica el flujo de autenticación predeterminado proporcionado por la plantilla de Proyecto web de Django para una aplicación web de Django.

En Visual Studio, seleccione Depurar>Iniciar depuración (F5) para iniciar la aplicación web de Django (DjangoWeb).
Cuando se abra la aplicación en el explorador, observe la opción Iniciar sesión de la derecha en la barra de navegación:

La aplicación Django en ejecución tiene una barra de navegación con tres opciones de página, Inicio, Acerca dey Contactoy una opción Iniciar sesión en. La configuración de autenticación permite a cualquier usuario ver el contenido en las páginas "Inicio", "Acerca de" y "Contacto".
Para el acceso autenticado a la aplicación web de Django, un superusuario designado puede usar la opción Iniciar sesión en, que abre la página "Iniciar sesión":
Una vez que el superusuario inicia sesión, puede acceder a vistas de página restringidas para el sitio y completar tareas de administración:
El superusuario puede usar la opción Cerrar sesión para cerrar la sesión de la aplicación web de Django y volver a la página "Inicio" de la aplicación web de Django como usuario no autenticado.

En las secciones siguientes, modificará la configuración de autenticación para admitir el acceso al sitio administrativo de Django para el superusuario.

Examen del código de autenticación

Ahora que comprende las características generales de autenticación de una aplicación web de Django, está listo para examinar el código subyacente proporcionado por la plantilla de Proyecto web de Django:

En el Explorador de Soluciones, amplíe la carpeta app/templates/app del proyecto. En los pasos siguientes se revisan varios archivos de esta carpeta.
Abra el archivo de plantilla base, layout.html. Desplácese hasta el elemento <div class="navbar ...> y busque la etiqueta {% include app/loginpartial.html %}.

La etiqueta {% include %} indica al sistema de plantillas de Django que extraiga el contenido del archivo incluido en este punto de la plantilla contenedora.

Abra el archivo loginpartial.html. Observe cómo esta plantilla usa la etiqueta condicional {% if user.is_authenticated %} junto con una etiqueta {% else %} para representar diferentes elementos de la interfaz de usuario en función de si el usuario está autenticado:

{% if user.is_authenticated %}
<form id="logoutForm" action="/logout" method="post" class="navbar-right">
    {% csrf_token %}
    <ul class="nav navbar-nav navbar-right">
        <li><span class="navbar-brand">Hello {{ user.username }}!</span></li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
</form>

{% else %}

<ul class="nav navbar-nav navbar-right">
    <li><a href="{% url 'login' %}">Log in</a></li>
</ul>

{% endif %}

Al iniciar la aplicación, no se autentica ningún superusuario y el código de plantilla representa solo el vínculo Iniciar sesión. El vínculo tiene como destino la ruta de acceso relativa al "inicio de sesión" del sitio especificada en el archivo de dirección URL del proyecto de Django (DjangoWeb/DjangoWeb/urls.py), como se describe en paso 4 (Examinar patrones de ruta de dirección URL). La ruta de "inicio de sesión" se asigna a la vista django.contrib.auth.views.login y la vista recibe los datos siguientes:
```
{
    'template_name': 'app/login.html',
    'authentication_form': app.forms.BootstrapAuthenticationForm,
    'extra_context':
    {
        'title': 'Log in',
        'year': datetime.now().year,
    }
}
```
Este código define tres propiedades:
- template_name identifica la plantilla de la página "Iniciar sesión" definida en el archivo app/login.html. Recuerde que este vínculo es relativo al sitio. La ruta de acceso a la carpeta completa es app/templates/app/login.html.
- extra_context agrega información a los datos de contexto predeterminados proporcionados a la plantilla. En este caso, la información incluye un título "Iniciar sesión", junto con la fecha, la hora y el año.
- authentication_form especifica una clase de formulario que se va a usar con el procedimiento de inicio de sesión. En la plantilla, este valor de propiedad aparece como el objeto form. El valor predeterminado es AuthenticationForm (de django.contrib.auth.views), pero la plantilla de proyecto de Visual Studio usa en su lugar el formulario definido en el archivo app/forms.py del proyecto:
```
from django import forms
from django.contrib.auth.forms import AuthenticationForm
from django.utils.translation import ugettext_lazy as _

class BootstrapAuthenticationForm(AuthenticationForm):
    """Authentication form which uses bootstrap CSS."""
    username = forms.CharField(max_length=254,
                            widget=forms.TextInput({
                                'class': 'form-control',
                                'placeholder': 'User name'}))
    password = forms.CharField(label=_("Password"),
                            widget=forms.PasswordInput({
                                'class': 'form-control',
                                'placeholder':'Password'}))
```
  La clase de formulario se deriva de AuthenticationForm y reemplaza específicamente los campos de nombre de usuario y contraseña para agregar texto de marcador de posición. La plantilla de Visual Studio incluye este código explícito en la suposición de que probablemente quiera personalizar el formulario, como agregar validación de seguridad de contraseña.

Cuando la interacción del usuario con la aplicación abre la página "Iniciar sesión", la aplicación representa la plantilla de login.html. Las variables {{ form.username }} y {{ form.password }} representan los formularios CharField de la clase BootstrapAuthenticationForm. También hay una sección integrada para mostrar errores de validación y un elemento listo para los inicios de sesión sociales si decide agregar esos servicios:

{% extends "app/layout.html" %}

{% block content %}

<h2>{{ title }}</h2>
<div class="row">
    <div class="col-md-8">
        <section id="loginForm">
            <form action="." method="post" class="form-horizontal">
                {% csrf_token %}
                <h4>Use a local account to log in.</h4>
                <hr />
                <div class="form-group">
                    <label for="id_username" class="col-md-2 control-label">User name</label>
                    <div class="col-md-10">
                        {{ form.username }}
                    </div>
                </div>
                <div class="form-group">
                    <label for="id_password" class="col-md-2 control-label">Password</label>
                    <div class="col-md-10">
                        {{ form.password }}
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="hidden" name="next" value="/" />
                        <input type="submit" value="Log in" class="btn btn-default" />
                    </div>
                </div>
                {% if form.errors %}
                <p class="validation-summary-errors">Please enter a correct user name and password.</p>
                {% endif %}
            </form>
        </section>
    </div>
    <div class="col-md-4">
        <section id="socialLoginForm"></section>
    </div>
</div>

{% endblock %}

Cuando el usuario selecciona Iniciar sesión en el formulario de página, Django intenta autenticar las credenciales, como las credenciales del superusuario:
- Si se produce un error en la autenticación, el usuario permanece en la página "Iniciar sesión" y la etiqueta form.errors se establece en true:
- Si la autenticación se realiza correctamente, Django abre la dirección URL relativa en el campo next, <input type="hidden" name="next" value="/" />, que en este caso es la página "Inicio" (/).
Cuando la aplicación muestra la página "Inicio" después de que el usuario se autentica, la propiedad user.is_authenticated es true cuando se representa la plantilla loginpartial.html. En este caso, la barra de navegación muestra un mensaje Hello (nombre de usuario) y la opción Cerrar sesión reemplaza a la opción Iniciar sesión.

Puede usar la propiedad user.is_authenticated en otras partes del código de la aplicación para comprobar la autenticación.

Acceso a las interfaces de administrador de Django

Para comprobar si el usuario autenticado está autorizado para acceder a recursos específicos, debe recuperar permisos específicos del usuario de la base de datos.

El superusuario o administrador, en particular, está autorizado para acceder a las interfaces de administrador integradas de Django mediante las direcciones URL relativas del sitio /admin/ y /admin/doc/. Para obtener más información, consulte Uso del sistema de autenticación de Django (documentos de Django).

Para habilitar el acceso a las interfaces de administrador de Django, siga estos pasos:

Instale el paquete de docutils Python en su entorno. Para obtener instrucciones, consulte Instalación de paquetes para el entorno de Python.
En Explorador de Soluciones, amplíe la carpeta del proyecto de Django, DjangoWeb/DjangoWeb/. En los pasos siguientes se actualizan varios archivos de esta carpeta.
Abra el archivo urls.py del proyecto de Django y modifique el contenido de la siguiente manera:
1. En la parte superior del archivo, agregue la siguiente importación de paquetes para direcciones URL al final de la lista actual:
```
from django.conf.urls import include
```
2. Después de la lista de importación, agregue la siguiente instrucción:
```
admin.autodiscover()
```
3. Busque la definición de urlpatterns y agregue la siguiente entrada de ruta de acceso antes de la entrada 'admin/':
```
path('admin/doc/', include('django.contrib.admindocs.urls')),
```
Abra el archivo settings.py del proyecto de Django y busque la colección INSTALLED_APPS. Agregue la siguiente entrada inmediatamente después de la entrada app:
```
'django.contrib.admindocs',
```
Detenga y reinicie la aplicación web de Django.
En el campo Dirección URL del explorador, cambie la vista de página de la aplicación a la ruta /admin/ o /admin/doc/. Estas páginas proporcionan al superusuario acceso a tareas administrativas de Django, como crear cuentas de usuario o grupo, cambiar la contraseña y ver la documentación de Django:

Exploración del comportamiento de cierre de sesión

Hay dos maneras en que el superusuario puede cerrar sesión y finalizar la sesión autenticada. La aplicación web de Django incluye la opción Cerrar sesión en la barra de navegación y el sitio administrativo de Django proporciona la opción Cerrar sesión.

Cierre sesión desde el sitio administrativo de Django

Si el superusuario está viendo páginas en el sitio administrativo de Django, puede seleccionar Cerrar sesión en la barra de navegación del sitio. El explorador se actualiza para mostrar la página "Cerrar sesión" del sitio:

En esta página, el usuario tiene dos opciones, Inicio y Iniciar sesión de nuevo. Ambas opciones devuelven al usuario a la página "Inicio" del sitio administrativo de Django (/admin), donde se solicita al usuario que vuelva a escribir sus credenciales.

Cerrar sesión desde la aplicación web de Django

Si el superusuario está viendo páginas en la aplicación web de Django, como "Acerca de" o "Contacto", puede seleccionar Cerrar sesión en la barra de navegación de la aplicación web de Django. El comportamiento de cierre de sesión es mínimo. Simplemente finaliza la sesión autenticada y redirecciona al usuario de vuelta a la página de "Inicio" de la aplicación.

Puede volver a trabajar el comportamiento de cierre de sesión para que sea más informativo para el usuario:

En Explorador de Soluciones, expanda la carpeta app/templates/app del proyecto y abra el archivo loginpartial.html.
En el archivo de la plantilla, observe que el enlace Cerrar sesión simplemente realiza una operación HTTP POST (action="/logout" method="post") a la ruta URL relativa del sitio "/login" (href="{% url 'login' %}").
```
{% if user.is_authenticated %}
<form id="logoutForm" action="/logout" method="post" class="navbar-right">
   {% csrf_token %}
   <ul class="nav navbar-nav navbar-right">
      <li><span class="navbar-brand">Hello {{ user.username }}!</span></li>
      <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
   </ul>
</form>

{% else %}

<ul class="nav navbar-nav navbar-right">
   <li><a href="{% url 'login' %}">Log in</a></li>
</ul>

{% endif %}
```
La función de vista integrada django.contrib.auth.views.logout controla este proceso de cierre de sesión.

El comportamiento actual no muestra ninguna interfaz de usuario que permita al usuario saber que ha cerrado sesión. El proceso simplemente redirige al usuario de nuevo a la página "Inicio" de la aplicación web de Django según el patrón de ruta 'logout/' definido en el archivo de URL del proyecto de Django (DjangoWeb/DjangoWeb/urls.py).
```
 path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
```
Para mostrar una confirmación de cierre de sesión más informativa, puede crear una página de "Cerrar sesión" para la aplicación.
En la carpeta app/templates/app, cree un nuevo archivo de plantilla HTML denominado loggedoff.html.

Agregue el siguiente contenido al nuevo archivo de plantilla:

{% extends "app/layout.html" %}
{% block content %}
<h3>You have been logged off</h3>
{% endblock %}

En el archivo url del proyecto de Django, DjangoWeb/DjangoWeb/urls.py, cambie el patrón de dirección URL de la ruta de acceso de 'logout/' de la siguiente manera:
```
path('logout/', LogoutView.as_view(template_name='app/loggedoff.html'), name='logout'),
```
El código actualizado agrega una propiedad template_name para trabajar con la nueva plantilla HTML para la página "Cerrar sesión".
Detenga y reinicie la aplicación web de Django. Vuelva a iniciar sesión y seleccione Cerrar sesión. Esta vez, la aplicación muestra un mensaje más informativo al usuario para confirmar que ha cerrado la sesión:
Detenga el servidor y cierre las ventanas del explorador de aplicaciones.

Guardar el proyecto en el control de código fuente

Si ha estado confirmando la solución de Visual Studio en el control de código fuente en el transcurso de esta serie tutoriales, ahora es un buen momento de hacer otra confirmación. Siga las instrucciones de paso 2 (confirmar cambios en el control de código fuente) en esta serie de tutoriales.

La solución debe coincidir con el código fuente del tutorial en GitHub: Microsoft/python-sample-vs-learning-django.

Usar {% csrf_token %} etiqueta en elementos de formulario

La etiqueta {% csrf_token %} incluye la protección de falsificación de solicitud entre sitios (csrf) integrada de Django (documentación de Django). Normalmente, se agrega esta etiqueta a cualquier elemento que implique métodos de solicitud POST, PUT o DELETE, como un formulario. A continuación, la función de representación de plantillas (render) inserta la protección necesaria.

Revisión del tutorial

Enhorabuena por completar este tutorial sobre Django en Visual Studio.

En este tutorial, ha aprendido a:

Crear diferentes tipos de proyectos de Django mediante varias plantillas en Visual Studio
Creación de una aplicación web de Django con varias páginas
Usar plantillas para crear diferentes rutas y vistas de página
Proporcionar archivos estáticos, agregar páginas y usar la herencia de plantillas
Proporcionar acceso autenticado a páginas y características restringidas de aplicaciones e interfaces administrativas de Django

autenticación de usuario en django (docs.djangoproject.com)
Código fuente del tutorial en GitHub (Microsoft/python-sample-vs-learning-django)

Compartir a través de