El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com implementar la funcionalitat de registre d'usuaris en una aplicació Flask. Aquesta funcionalitat és essencial per a qualsevol aplicació web que requereixi autenticació d'usuaris. Utilitzarem Flask-WTF per gestionar els formularis i Flask-SQLAlchemy per interactuar amb la base de dades.

Objectius

Crear un formulari de registre d'usuaris.
Validar les dades del formulari.
Emmagatzemar els usuaris registrats a la base de dades.
Proporcionar retroalimentació a l'usuari sobre l'estat del registre.

Passos a Seguir

Configuració del Formulari de Registre

Primer, crearem un formulari de registre utilitzant Flask-WTF. Aquest formulari inclourà camps per al nom d'usuari, correu electrònic i contrasenya.

# forms.py
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Length, Email, EqualTo

class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(min=2, max=20)])
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    confirm_password = PasswordField('Confirm Password', validators=[DataRequired(), EqualTo('password')])
    submit = SubmitField('Sign Up')

Creació del Model d'Usuari

A continuació, definirem el model d'usuari utilitzant Flask-SQLAlchemy. Aquest model representarà la taula d'usuaris a la base de dades.

# models.py
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

db = SQLAlchemy()

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(20), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)
    image_file = db.Column(db.String(20), nullable=False, default='default.jpg')
    password = db.Column(db.String(60), nullable=False)
    created_at = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)

    def __repr__(self):
        return f"User('{self.username}', '{self.email}', '{self.image_file}')"

Creació de la Ruta de Registre

Ara, crearem la ruta de registre que gestionarà les sol·licituds GET i POST per al formulari de registre.

# routes.py
from flask import render_template, url_for, flash, redirect
from app import app, db
from app.forms import RegistrationForm
from app.models import User

@app.route("/register", methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        user = User(username=form.username.data, email=form.email.data, password=form.password.data)
        db.session.add(user)
        db.session.commit()
        flash('Your account has been created! You are now able to log in', 'success')
        return redirect(url_for('login'))
    return render_template('register.html', title='Register', form=form)

Creació de la Plantilla de Registre

Finalment, crearem la plantilla HTML per al formulari de registre.

<!-- templates/register.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
</head>
<body>
    <h2>Register</h2>
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <div>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </div>
        <div>
            {{ form.email.label }}<br>
            {{ form.email(size=32) }}<br>
            {% for error in form.email.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </div>
        <div>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </div>
        <div>
            {{ form.confirm_password.label }}<br>
            {{ form.confirm_password(size=32) }}<br>
            {% for error in form.confirm_password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </div>
        <div>
            {{ form.submit() }}
        </div>
    </form>
</body>
</html>

Hashing de Contrasenyes

Per motius de seguretat, mai emmagatzemem contrasenyes en text pla. Utilitzarem la biblioteca werkzeug.security per hash de les contrasenyes abans de guardar-les a la base de dades.

# routes.py (modificat)
from werkzeug.security import generate_password_hash

@app.route("/register", methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        hashed_password = generate_password_hash(form.password.data)
        user = User(username=form.username.data, email=form.email.data, password=hashed_password)
        db.session.add(user)
        db.session.commit()
        flash('Your account has been created! You are now able to log in', 'success')
        return redirect(url_for('login'))
    return render_template('register.html', title='Register', form=form)

Exercici Pràctic

Exercici 1: Implementar la Funcionalitat de Registre

Crea un formulari de registre utilitzant Flask-WTF.
Defineix el model d'usuari amb Flask-SQLAlchemy.
Crea la ruta de registre per gestionar les sol·licituds GET i POST.
Crea la plantilla HTML per al formulari de registre.
Implementa el hashing de contrasenyes abans de guardar-les a la base de dades.

Solució

La solució completa es troba en els fragments de codi proporcionats anteriorment. Assegura't de seguir cada pas i verificar que la funcionalitat de registre funcioni correctament.

Resum

En aquest tema, hem après a implementar la funcionalitat de registre d'usuaris en una aplicació Flask. Hem creat un formulari de registre, validat les dades del formulari, emmagatzemat els usuaris registrats a la base de dades i proporcionat retroalimentació a l'usuari. També hem après a hash de les contrasenyes per motius de seguretat. En el següent tema, explorarem com implementar la funcionalitat d'inici i tancament de sessió d'usuaris.

Registre d'Usuaris

Objectius

Passos a Seguir

Configuració del Formulari de Registre

Creació del Model d'Usuari

Creació de la Ruta de Registre

Creació de la Plantilla de Registre

Hashing de Contrasenyes

Exercici Pràctic

Exercici 1: Implementar la Funcionalitat de Registre

Solució

Resum

Curs de Desenvolupament Web amb Flask

Mòdul 1: Introducció a Flask

Mòdul 2: Conceptes Bàsics de Flask

Mòdul 3: Formularis i Entrada d'Usuari

Mòdul 4: Integració de Bases de Dades

Mòdul 5: Autenticació d'Usuaris

Mòdul 6: Conceptes Avançats de Flask

Mòdul 7: APIs RESTful amb Flask

Mòdul 8: Desplegament i Producció

Mòdul 9: Proves i Millors Pràctiques

Mòdul 10: Extensions i Ecosistema de Flask