Cómo usar el sistema de autenticación de Django - Parte 2: Recuperar contraseña y actualizar contraseña.

in #utopian-io7 years ago (edited)

Intro: English
Title: How to use the Django authentication system - Part 2: Password recovery and password update.
Language: Spanish / Español

Django comes with an users authentication system that allows to implement in a simple way the basic functionalities of login, password recovery, password update and logout. Previously I published the first part of this tutorial, in which I explained how to install the Django authentication system and how to implement login and logout functionalities. In this post, the second and last part of the tutorial, I will explain how to implement the Password recovery and Password update functionalities. We are using the django_base repository, that has the basic code to start a new Django project using docker, and whose building process is explained in this link.



Django cuenta con un sistema de autenticación de usuarios predetermiando que permite implementar de forma sencilla las funcionalidades básicas de inicio de sesión, recuperación y actualización de contraseñas y cierre de sesión. Previamente he publicado la primera parte de este tutorial, en el cual expliqué como instalar el sistema de autenticación de Django y como implementar las funcionalidades de iniciar sesión y cerrar sesión. En este post, el segundo y último de este tutorial, explicaré como implementar las funcionalidades de Recuperar contraseña y Actualizar contraseña. Estamos usando el repositorio django_base, el cuál tiene el código básico necesario para iniciar un nuevo proyecto utilizando docker, y cuya construcción está explicada en este link.



En la Primera parte de este turorial empezamos a implementar las funcionalidades básicas del sistema de autenticación de Django. En esta segunda parte seguirémos utilizando el mismo código construido en la primera parte.

1. Recuperar contraseña

En nuestro formulario de iniciar sesión construido en la primera parte del tutorial, habíamos agregado el link "olvidé mi contraseña", en el que no habíamos definido valor para el atributo href. Cuando un usuario haga click en este link, debe ser redirigido a un formulario en el que se le pregunté su dirección de correo electrónico, y posteriormente se le envíen instrucciones para recueprar su contraseña.


Screen Shot 2017-12-08 at 3.18.12 PM.png

En el archivo app/urls.py definimos la siguiente url:


Screen Shot 2017-12-08 at 3.24.32 PM.png


Código fuente

Con este código estamos indicando que cuando un usuario visite la url localhost:8000/password/recovery/ tendrá acceso al formulario de recuperación de contrseña. Definimos la plantilla auth/password_reset_form.html para mostrar este contenido y la plantilla auth/password_reset_email.html como el archivo en el que definiremos el contenido que tendrá el correo electrónico que enviaremos al usuario con las instrucciones para recueprar su contraseña. Como podemos ver, estamos utilizando la vista auth_views.PasswordResetView del módulo de autenticación de Django.

En la plantilla password_reset_form.html agregamos el siguiente contenido:

app/templates/auth/password_reset_form.html


Screen Shot 2017-12-08 at 3.44.34 PM.png


Código fuente

Debido a que estamos usando la clase por defecto auth_views.PasswordResetView de Django para implementar la recuperación de contraseña, podemos obtener el formulario directamente en la plantilla definido en la variable {{ form }}.

En la plantilla password_reset_email.html agregamos el siguiente contenido:

app/templates/auth/password_reset_email.html


Screen Shot 2017-12-08 at 3.59.05 PM.png

Código fuente

Django nos permite obtener la instancia del usuario en la variable {{ user }}, y genera una url de recuepración de contraseña para nuestro usuario. Ahora, en la plantilla app/templates/auth/login.html, cambiamos el atributo href del link "Olvidé mi contraseña", y le asignamos el valor "{% url 'password_reset' %}". Así, cuando un usuario haga click en este link, será redirigido al siguiente formulario:


Screen Shot 2017-12-08 at 4.18.10 PM.png

Ahora definimos en el archivo app/urls.py la siguiente url:


Screen Shot 2017-12-08 at 4.35.48 PM.png


Código fuente

auth_views.PasswordResetDoneView es la clase que nos ofrece Django para redirigir al usuario tras diligenciar el formulario de recuperación de contraseña. Usamos esta clase para mostrar al usuario un mensaje de que recibirá instrucciones para recuperar su contraseña via correo electrónico. Debemos crear la plantilla password_reset_done.html para definir este mensaje:

app/templates/auth/password_reset_done.html


Screen Shot 2017-12-08 at 4.30.28 PM.png


Código fuente

En este punto, cuando un usuario hace uso del formulario de recuperación de contraseña, se muestra este mensaje y se le ha enviado el correo de instrucciones de recuperación de contraseña; pero para que el proceso esté completo, aún debemos definir la url password_reset_confirm en el archivo app/urls.py de la siguiente forma:


Screen Shot 2017-12-08 at 4.43.38 PM.png


Código fuente

Utilizamos la clase de Django auth_views.PasswordResetConfirmView, que nos brinda la vista predefinida a la que será redirigido el usuario tras hacer click en el link que se le envía por medio de correo electrónico y que le permitirá restablecer su contraseña. Este contenido debemos definirlo en la plantilla password_reset_confirm.html, que editamos de la siguiente forma:

app/templates/auth/password_reset_confirm.html


Screen Shot 2017-12-08 at 4.51.00 PM.png


Código fuente

Cómo podemos ver, en esta plantilla definimos un formulario en el que el usuario debe introducir dos veces su nueva contraseña. Tras hacer este procedimiento correctamente, la contraseña del usuario será restablecida.

El contenido del correo electrónico es el siguiente:


Screen Shot 2017-12-08 at 5.03.40 PM.png

Al abrir la url indicada en un navegador, se mostrará al usuario el siguiente formulario:


Screen Shot 2017-12-08 at 5.12.34 PM.png

En el que el usuario podrá restablecer su contraseña y será redirigido a la página de inicio de la aplicación. Ahora, puede ir a localhost:8000 y autenticarse con su nueva contraseña.

2. Actualizar contraseña

El sistema de autenticación de Django también nos ofrece la funcionalidad predeterminada actualización de contraseña. Así, un usuario de nuestra aplicación puede acceder a un formulario para editar su contraseña en el que deben confirmar su contraseña actual.

Lo primero que debemos hacer, es agregar la siguiente url al archivo app/urls.py:


Screen Shot 2017-12-08 at 5.24.36 PM.png


Código fuente

Aquí estamos indicando que usaremos la función predeterminada de Django auth_views.password_change, y que mostraremos el formulario de actualización de contraseña en la plantilla password_change_form.html. También, que una vez que el formulario sea diligenciado correctamente, vamos a redirigir al usuario a la url auth_password_change_done, que vamos a definir unos pasos más adelante.

Creamos la plantilla password_change_form.html con el siguiente contenido:

app/templates/auth/password_change_form.html


Screen Shot 2017-12-08 at 5.37.08 PM.png


Código fuente

El sistema de autenticación de Django nos permite obtener un formulario predetermiando con los campos old_password, password1 y password2.

A continuación definimos la url auth_password_change_done en el archivo app/urls.py:


Screen Shot 2017-12-08 at 5.40.23 PM.png


Código fuente

Utilizando la función predefinida auth_views.password_change_done, indicamos que al diligenciar el formulario de actualización de contraseña, los usuarios serán redirigidos a la url localhost:8000/password_update_done/ y que allí se les mostrará el código definido en la plantilla password_change_done.html. Creamos y editamos este archivo con el siguiente contenido:

app/templates/auth/password_change_done.html


Screen Shot 2017-12-08 at 6.08.19 PM.png


Código fuente

Finalmente, podemos agregar el link "Actualizar contraseña" a nuestra barra de navegación definida en el archivo app/templates/layout/base.html, para permitir poder navegar fácilmente esta funcionalidad.

app/templates/layout/base.html


Screen Shot 2017-12-08 at 5.53.59 PM.png


Código fuente

Así, nuestra barra de navegación ahora se verá de la siguiente forma:


Screen Shot 2017-12-08 at 5.57.31 PM.png

Al hacer click en el link "Actualizar contraseña", mostraremos al usuario el siguiente formulario:


Screen Shot 2017-12-08 at 5.59.16 PM.png

Y tras diligenciar correctamente el formulario, la contraseña del usuario estará actualizada y este será redirigido a la url de actualización de contraseña exitosa:


Screen Shot 2017-12-08 at 6.00.27 PM.png


Así terminamos esta serie de dos publicaciones en las que damos un vistazo a las funcionalidades básicas del sistema de autenticación de Django, bastante útil para cualquier aplicación en la que se deban manejar usuarios y sesiones. Seguiré compartiendo mis experiencias con este fantástico framework web escrito en Python.

Feliz fin de semana para todos.




Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Hey @kit.andres I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • You are generating more rewards than average for this category. Super!;)
  • Seems like you contribute quite often. AMAZING!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Thank you for this! We really need a login for our current project, now we can implement this quickly. This way, the web app can be private to only certain individuals.

Then this tutorial could help you a lot. Feel free to ask me anything if you need help. I think that could be amazing if you want to translate these tutorials from Spanish to English.

hey no se que tanto conocimientos tengas en Django pero te recomiendo que pruebes Django rest framework

Gracias paracelso... Seguramente más adelante vamos a hablar de como construir un rest tool con Django, y ahí revisarémos django-rest-framework. Echale un vistazo a utopian.io, veo que tienes conocimiento en algunos proyectos open source y puedes encontrar un buen lugar allí para compartir y contribuir.

Wow no sabia que tutoriales de programación se funciona publicar aqui, la verdad no hay limites

Claro, te invito a echarle un vistazo a utopian.io, hay una gran comunidad contribuyendo al crecimiento de proyectos open source.