इस श्रृंखला के पिछले भाग में, हमने देखा कि पायथन फ्लास्क और माईएसक्यूएल के साथ शुरुआत कैसे करें और हमारे आवेदन के उपयोगकर्ता पंजीकरण भाग को लागू किया। इस ट्यूटोरियल में, हम अपने एप्लिकेशन के लिए साइन-इन और लॉगआउट कार्यक्षमता को लागू करके इसे अगले स्तर पर ले जाएंगे।
आरंभ करना
पहले GitHub से पिछले ट्यूटोरियल के सोर्स कोड को क्लोन करें।
git clone https://github.com/tutsplus/create-a-web-app-from-scratch-using-python-flask-and-mysql/.git
सोर्स कोड के क्लोन हो जाने के बाद, भाग-1 . पर नेविगेट करें निर्देशिका और सर्वर प्रारंभ करें।
python app.py
अपने ब्राउज़र को https://localhost:5000 पर इंगित करें और आपके पास एप्लिकेशन चलना चाहिए।
साइन-इन इंटरफ़ेस बनाना
FlaskApp/टेम्पलेट्स पर नेविगेट करें और signin.html . नामक एक नई फ़ाइल बनाएं . signin.htmlखोलें और निम्न HTML कोड जोड़ें:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Python Flask Bucket List App - Sign In</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link href="../static/signup.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="header">
<nav
class="border-bottom flex-wrap mb-4 py-3 d-flex justify-content-center"
>
<a
href="/"
class="text-dark text-decoration-none mb-3 mb-md-0 d-flex align-items-center me-md-auto"
>
<span class="fs-4">Python Flask App</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/signup" class="nav-link">Signup</a>
</li>
<li class="nav-item">
<a href="/signin" class="nav-link active" aria-current="page"
>Sign In</a
>
</li>
</ul>
</nav>
</div>
<div class="bg-light rounded-3 mb-4 p-5">
<div class="container-fluid py-5">
<h1 class="text-center fw-bold display-5">Bucket List App</h1>
<form class="form-signin" action="/api/validateLogin" method="post">
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" name="inputEmail" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="inputPassword" id="inputPassword" class="form-control" placeholder="Password" required>
<button id="btnSignIn" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
<footer class="footer">
<p>© Company 2022</p>
</footer>
</div>
</body>
</html>
app.pyखोलें और साइन-इन इंटरफ़ेस के लिए एक नया मार्ग जोड़ें।
@app.route('/signin')
def showSignin():
return render_template('signin.html')
इसके बाद, index.htmlखोलें और साइनअप.html , और href जोड़ें दोनों पेजों पर साइन-इन के लिए लिंक /signin . के रूप में . सभी परिवर्तन सहेजें और सर्वर को पुनरारंभ करें।
python app.py
अपने ब्राउज़र को http://localhost:5000 पर इंगित करें और साइन इन . पर क्लिक करें लिंक, और आपको साइन-इन पृष्ठ देखने में सक्षम होना चाहिए।
साइन-इन लागू करना
अब, हमें उपयोगकर्ता लॉगिन को मान्य करने के लिए एक फ़ंक्शन बनाने की आवश्यकता है। साइन इन . क्लिक करने पर , हम दर्ज किए गए ईमेल पते और पासवर्ड को मान्य उपयोगकर्ता फ़ंक्शन में पोस्ट करेंगे।
एक संग्रहित प्रक्रिया बनाना
किसी उपयोगकर्ता को सत्यापित करने के लिए, हमें एक MySQL संग्रहीत कार्यविधि की आवश्यकता होगी। तो दिखाए गए अनुसार एक MySQL संग्रहीत कार्यविधि बनाएं:
DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_validateLogin`(
IN p_username VARCHAR(20)
)
BEGIN
select * from tbl_user where user_username = p_username;
END$$
DELIMITER ;
हम username . के आधार पर उपयोगकर्ता विवरण प्राप्त करेंगे sp_validateLogin . का उपयोग करके MySQL डेटाबेस से . एक बार हमारे पास हैशेड पासवर्ड हो जाने के बाद, हम इसे उपयोगकर्ता द्वारा दर्ज किए गए पासवर्ड से मान्य करेंगे।
उपयोगकर्ता विधि सत्यापित करें
उपयोगकर्ता को सत्यापित करने के लिए एक विधि बनाएं जिसे हम उपयोगकर्ता द्वारा फ़ॉर्म सबमिट करने पर कॉल करेंगे:
@app.route('/api/validateLogin',methods=['POST'])
def validateLogin():
try:
_username = request.form['inputEmail']
_password = request.form['inputPassword']
except Exception as e:
return render_template('error.html',error = str(e))
जैसा कि ऊपर दिए गए कोड में देखा गया है, हमने पोस्ट किए गए ईमेल पते और पासवर्ड को _username . में पढ़ लिया है और _password . अब हम sp_validateLogin . को कॉल करेंगे पैरामीटर के साथ प्रक्रिया _username . तो validatelogin . के अंदर एक MySQL कनेक्शन बनाएं विधि:
con = mysql.connect()
एक बार कनेक्शन बन जाने के बाद, एक cursor बनाएं con . का उपयोग करके कनेक्शन।
cursor = con.cursor()
कर्सर का उपयोग करते हुए, MySQL संग्रहीत कार्यविधि को दिखाए गए अनुसार कॉल करें:
cursor.callproc('sp_validateLogin',(_username,)) दिखाए गए अनुसार कर्सर से प्राप्त रिकॉर्ड प्राप्त करें:
data = cursor.fetchall()
यदि डेटा में कुछ रिकॉर्ड हैं, तो हम पुनः प्राप्त पासवर्ड का मिलान उपयोगकर्ता द्वारा दर्ज किए गए पासवर्ड से करेंगे।
if len(data) > 0:
if check_password_hash(str(data[0][3]),_password):
return redirect('/userhome')
else:
return render_template('error.html',error = 'Wrong Email address or Password.')
else:
return render_template('error.html',error = 'Wrong Email address or Password.')
जैसा कि ऊपर दिए गए कोड में देखा गया है, हमने check_password_hash . नामक एक विधि का उपयोग किया है यह जांचने के लिए कि क्या लौटा हुआ हैश पासवर्ड उपयोगकर्ता द्वारा दर्ज किए गए पासवर्ड से मेल खाता है। यदि सब कुछ अच्छा रहा, तो हम उपयोगकर्ता को userHome.html . पर पुनर्निर्देशित करेंगे . और यदि कोई त्रुटि है, तो हम error.html प्रदर्शित करेंगे त्रुटि संदेश के साथ।
यहां पूरा validateLogin है कोड:
@app.route('/api/validateLogin',methods=['POST'])
def validateLogin():
try:
_username = request.form['inputEmail']
_password = request.form['inputPassword']
# connect to mysql
con = mysql.connect()
cursor = con.cursor()
cursor.callproc('sp_validateLogin',(_username,))
data = cursor.fetchall()
if len(data) > 0:
if check_password_hash(str(data[0][3]),_password):
session['user'] = data[0][0]
return redirect('/userHome')
else:
return render_template('error.html',error = 'Wrong Email address or Password')
else:
return render_template('error.html',error = 'Wrong Email address or Password')
except Exception as e:
return render_template('error.html',error = str(e))
finally:
cursor.close()
con.close()
userhome.html . नाम से एक पेज बनाएं टेम्प्लेट फ़ोल्डर के अंदर और निम्नलिखित HTML कोड जोड़ें:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Python Flask Bucket List App - Home</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<div class="header">
<nav
class="border-bottom flex-wrap mb-4 py-3 d-flex justify-content-center"
>
<a
href="/"
class="text-dark text-decoration-none mb-3 mb-md-0 d-flex align-items-center me-md-auto"
>
<span class="fs-4">Python Flask App</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a href="/userhome" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/logout" class="nav-link active">Logout</a>
</li>
</ul>
</nav>
</div>
<div class="bg-light rounded-3 mb-4 p-5">
<div class="container-fluid py-5">
<h1 class="text-center fw-bold display-5">Welcome Home!</h1>
</div>
</div>
<footer class="footer">
<p>© Company 2022</p>
</footer>
</div>
</body>
</html>
साथ ही, error.html . नामक एक त्रुटि पृष्ठ बनाएं templates . में फ़ोल्डर और निम्नलिखित HTML कोड जोड़ें:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Error - Python Flask App</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<div class="header">
<nav
class="border-bottom flex-wrap mb-4 py-3 d-flex justify-content-center"
>
<a
href="/"
class="text-dark text-decoration-none mb-3 mb-md-0 d-flex align-items-center me-md-auto"
>
<span class="fs-4">Python Flask App</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/signup" class="nav-link">Signup</a>
</li>
<li class="nav-item">
<a href="/signin" class="nav-link">Sign In</a>
</li>
</ul>
</nav>
</div>
<div class="bg-light rounded-3 mb-4 p-5">
<div class="container-fluid py-5">
<h1 class="text-center fw-bold display-5">{{error}}</h1>
</div>
</div>
<footer class="footer">
<p>© Company 2022</p>
</footer>
</div>
</body>
</html>
अंदर error.html , हमारे पास दिखाए गए अनुसार एक तत्व है:
<h1 class="text-center fw-bold display-5">{{error}}</h1>
वेरिएबल का मान render_template . से पास किया जा सकता है फ़ंक्शन और गतिशील रूप से सेट किया जा सकता है।
सफल साइन-इन पर, हम उपयोगकर्ता को उपयोगकर्ता होम पेज पर रीडायरेक्ट कर रहे हैं, इसलिए हमें /userHome नामक एक मार्ग बनाने की आवश्यकता है। जैसा दिखाया गया है:
@app.route('/userHome')
def userHome():
return render_template('userHome.html')
सभी परिवर्तन सहेजें और सर्वर को पुनरारंभ करें। साइन इन करें . पर क्लिक करें होम पेज पर लिंक करें और एक वैध ईमेल पते और पासवर्ड का उपयोग करके साइन इन करने का प्रयास करें। सफल उपयोगकर्ता सत्यापन पर, आपके पास एक पृष्ठ होना चाहिए जैसा कि नीचे दिखाया गया है:
असफल उपयोगकर्ता सत्यापन पर, उपयोगकर्ता को एक त्रुटि पृष्ठ पर पुनर्निर्देशित किया जाएगा जैसा कि नीचे दिखाया गया है:
यहां हमने त्रुटि प्रदर्शित करने के लिए एक अलग त्रुटि पृष्ठ का उपयोग किया है। यह भी ठीक है यदि आप त्रुटि संदेश प्रदर्शित करने के लिए उसी पृष्ठ का उपयोग करना चाहते हैं।
उपयोगकर्ता के होम पेज पर अनधिकृत पहुंच को प्रतिबंधित करना
सफल उपयोगकर्ता सत्यापन पर, उपयोगकर्ता को उपयोगकर्ता होम पेज पर पुनर्निर्देशित किया जाता है। लेकिन अभी एक अनधिकृत उपयोगकर्ता भी केवल http://localhost:5000/userhome यूआरएल ब्राउज़ करके होम पेज देख सकता है।
अनधिकृत उपयोगकर्ता पहुंच को प्रतिबंधित करने के लिए, हम एक सत्र चर की जांच करेंगे जिसे हम सफल उपयोगकर्ता लॉगिन पर सेट करेंगे। तो आयात करें session फ्लास्क से:
from flask import session
हमें सत्र के लिए एक गुप्त कुंजी भी सेट करनी होगी। तो app.py . में , ऐप को इनिशियलाइज़ करने के बाद, गुप्त कुंजी को दिखाए अनुसार सेट करें:
app.secret_key = 'why would I tell you my secret key?'
अब, validateLogin . के अंदर विधि, उपयोगकर्ता को /userhome . पर पुनर्निर्देशित करने से पहले सफल साइन-इन पर, session सेट करें दिखाए गए अनुसार परिवर्तनशील:
session['user'] = data[0][0]
इसके बाद, userhome . के अंदर विधि, userhome.html rendering को प्रस्तुत करने से पहले सत्र चर की जांच करें . यदि सत्र चर नहीं मिलता है, तो त्रुटि पृष्ठ पर पुनर्निर्देशित करें।
@app.route('/userhome')
def userHome():
if session.get('user'):
return render_template('userhome.html')
else:
return render_template('error.html',error = 'Unauthorized Access')
सभी परिवर्तन सहेजें और सर्वर को पुनरारंभ करें। साइन इन किए बिना, http://localhost:5000/userhome पर नेविगेट करने का प्रयास करें और चूंकि आपने अभी तक लॉग इन नहीं किया है, इसलिए आपको त्रुटि पृष्ठ पर पुनर्निर्देशित किया जाना चाहिए।
लॉगआउट लागू करना
लॉगआउट कार्यक्षमता को लागू करना सबसे सरल है। हमें बस इतना करना है कि सत्र चर user . बनाना है शून्य और उपयोगकर्ता को मुख्य पृष्ठ पर पुनर्निर्देशित करें।
app.py . के अंदर , logout . के लिए एक नया मार्ग और तरीका बनाएं जैसा दिखाया गया है:
@app.route('/logout')
def logout():
session.pop('user',None)
return redirect('/')
हमने पहले ही लॉग आउट बटन के लिए href को /logout . पर सेट कर दिया है . इसलिए सभी परिवर्तनों को सहेजें और सर्वर को पुनरारंभ करें। होम पेज से, साइन इन करें . पर क्लिक करें और एक वैध ईमेल पते और पासवर्ड का उपयोग करके लॉग इन करने का प्रयास करें। साइन इन करने के बाद, लॉगआउट . पर क्लिक करें उपयोगकर्ता होम में बटन और आपको एप्लिकेशन से सफलतापूर्वक लॉग आउट होना चाहिए।
