كيف يمكن إنشاء زر إعادة تعيين كلمة المرور في تطبيق Flask باستخدام بايثون؟

عبد الرحمن بادنجكي · 2 مايو 2023

السلام عليكم
قمت بإنشاء واجهة تسجيل دخول وإنشاء حساب من خلال بايثون

والان اريد معرفة كيفية إنشاء زر لإعادة تعيين كلمة المرور
اذا امكن ان يكون الشرح عبر مكالمة لكي افهم الشرح وشكرا لكم

تم التعديل في 2 مايو 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 2 مايو 2023

إذا كان السؤال متعلق بدورة بايثون فأرجو منك طرحه أسفل فيديو الدورة، وإذا كان غير ذلك، فإليك الشرح:

سأفترض أنك تستخدم SQLite كقاعدة بيانات وتستخدم Flask-WTF لإنشاء النماذج.

خطوة 1: إنشاء نموذج HTML

ستحتاج إلى إنشاء نموذج HTML لإدخال البريد الإلكتروني وكلمة المرور الجديدة.

وهنا مثال بسيط لنموذج إعادة تعيين كلمة المرور:

<!-- reset_password.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reset Password</title>
</head>
<body>
    <h1>Reset Password</h1>
    <form method="POST">
        {{ form.hidden_tag() }}
        <p>
            {{ form.email.label }}<br>
            {{ form.email(size=30) }}
        </p>
        <p>
            {{ form.new_password.label }}<br>
            {{ form.new_password(size=30) }}
        </p>
        <p>
            {{ form.confirm_password.label }}<br>
            {{ form.confirm_password(size=30) }}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>

خطوة 2: إضافة مسار جديد إلى التطبيق Flask

يجب أن تقوم بإنشاء مسار جديد لإعادة تعيين كلمة المرور، وتستطيع ذلك باستخدام الديكوريتور @app.route كما يلي:

# app.py

from flask import Flask, render_template, request, flash, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email, EqualTo
from werkzeug.security import generate_password_hash, check_password_hash
import sqlite3

app = Flask(__name__)
app.secret_key = 'secret'

# Define a FlaskForm for password reset
class PasswordResetForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired(), Email()])
    new_password = PasswordField('New Password', validators=[DataRequired()])
    confirm_password = PasswordField('Confirm Password', validators=[DataRequired(), EqualTo('new_password')])
    submit = SubmitField('Reset Password')

@app.route('/reset_password', methods=['GET', 'POST'])
def reset_password():
    form = PasswordResetForm()
    if form.validate_on_submit():
        # Check if the email address exists in the database
        conn = sqlite3.connect('database.db')
        cursor = conn.cursor()
        cursor.execute('SELECT * FROM users WHERE email = ?', (form.email.data,))
        user = cursor.fetchone()
        conn.close()
        if user:
            # Update the user's password hash in the database
            conn = sqlite3.connect('database.db')
        cursor = conn.cursor()
        password_hash = generate_password_hash(form.new_password.data)
        cursor.execute('UPDATE users SET password_hash = ? WHERE email = ?', (password_hash, form.email.data))
        conn.commit()
        conn.close()
        flash('Password reset successful', 'success')
        return redirect(url_for('login'))
    else:
        flash('Email address not found', 'error')
return render_template('reset_password.html', form=form)

خطوة 3: إضافة رابط HTML الخاص بإعادة تعيين كلمة المرور

عليك أن تقوم بإنشاء رابط HTML الخاص بإعادة تعيين كلمة المرور وإضافته إلى واجهة المستخدم الخاصة بنا.

مثال بسيط لإضافة الرابط:

<!-- login.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <h1>Login</h1>
    {% with messages = get_flashed_messages() %}
    {% if messages %}
    <ul class="flashes">
        {% for message in messages %}
        <li>{{ message }}</li>
        {% endfor %}
    </ul>
    {% endif %}
    {% endwith %}
    <form method="POST">
        {{ form.hidden_tag() }}
        <p>
            {{ form.email.label }}<br>
            {{ form.email(size=30) }}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=30) }}
        </p>
        <p>{{ form.submit() }} <a href="{{ url_for('reset_password') }}">Forgot password?</a></p>
    </form>
</body>
</html>

هنا نضيف رابطًا جديدًا باستخدام url_for('reset_password')، وهذا سيقوم بتوليد رابط URL لمسار إعادة تعيين كلمة المرور الذي قمنا بإنشائه في الخطوة 2.

خطوة 4: إضافة قالب HTML لصفحة إعادة تعيين كلمة المرور

نحتاج أيضًا إلى إنشاء قالب HTML جديد لصفحة إعادة تعيين كلمة المرور، ويجب أن يحتوي هذا القالب على نموذج يسمح للمستخدم بإدخال بريده الإلكتروني وكلمة المرور الجديدة.

إليك مثال بسيط على كيفية إنشاء قالب HTML لصفحة إعادة تعيين كلمة المرور:

<!-- reset_password.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reset Password</title>
</head>
<body>
    <h1>Reset Password</h1>
    {% with messages = get_flashed_messages() %}
    {% if messages %}
    <ul class="flashes">
        {% for message in messages %}
        <li>{{ message }}</li>
        {% endfor %}
    </ul>
    {% endif %}
    {% endwith %}
    <form method="POST">
        {{ form.hidden_tag() }}
        <p>
            {{ form.email.label }}<br>
            {{ form.email(size=30) }}
        </p>
        <p>
            {{ form.new_password.label }}<br>
            {{ form.new_password(size=30) }}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>

في الكود السابق، يتم استخدام نموذج FlaskForm الذي تم إنشاؤه في الخطوة 3 لإنشاء حقول البريد الإلكتروني وكلمة المرور الجديدة، وعند الضغط على الزر "إرسال" ، سيتم إرسال النموذج إلى مسار Flask الذي قمنا بإنشائه في الخطوة 2.

عبدالباسط ابراهيم · 2 مايو 2023

يمكن استخدام مكتبة Flask-Login لإنشاء زر إعادة تعيين كلمة المرور بسهولة أكبر. يتيح لك Flask-Login إضافة وظائف تسجيل الدخول والخروج وإدارة جلسات المستخدمين بشكل سلس في تطبيق Flask الخاص بك.

لإضافة زر إعادة تعيين كلمة المرور باستخدام Flask-Login، يمكنك اتباع الخطوات التالية:

تثبيت Flask-Login باستخدام pip:

pip install flask-login

إضافة مكونات Flask-Login إلى تطبيق Flask الخاص بك:

from flask_login import LoginManager, current_user, login_user, logout_user, login_required
login_manager = LoginManager()
login_manager.init_app(app)

إضافة دالة العودة المفقودة لتطبيق Flask الخاص بك لتحديد المستخدم الحالي:

@login_manager.user_loader
def load_user(user_id):
    return User.query.get(int(user_id))

إضافة مسار جديد إلى تطبيق Flask الخاص بك لإعادة تعيين كلمة المرور. يمكنك استخدام الرمز التالي:

@app.route('/reset_password', methods=['GET', 'POST'])
def reset_password():
    if current_user.is_authenticated:
        return redirect(url_for('index'))
    form = ResetPasswordForm()
    if form.validate_on_submit():
        # تنفيذ إعادة تعيين كلمة المرور هنا
        flash('تم إعادة تعيين كلمة المرور الخاصة بك بنجاح.', 'success')
        return redirect(url_for('login'))
    return render_template('reset_password.html', title='إعادة تعيين كلمة المرور', form=form)

في قالب HTML لصفحة تسجيل الدخول، يمكنك إضافة زر إعادة تعيين كلمة المرور باستخدام الرمز التالي:

{% if not current_user.is_authenticated %} <a href="{{ url_for('reset_password') }}">إعادة تعيين كلمة المرور</a> {% endif %}

بعد إتمام هذه الخطوات، يمكن للمستخدمين الآن استخدام زر إعادة تعيين كلمة المرور داخل صفحة تسجيل الدخول للوصول إلى صفحة إعادة تعيين كلمة المرور وإعادة تعيين كلمة المرور الخاصة بهم.

كيف يمكن إنشاء زر إعادة تعيين كلمة المرور في تطبيق Flask باستخدام بايثون؟

السؤال

عبد الرحمن بادنجكي

2 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

عبدالباسط ابراهيم

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية