install psycopg2 https://pypi.org/project/psycopg2/
Psycopg is the most popular PostgreSQL database adapter for the Python programming language.
(venv) PS C:\flaskmyproject> pip install psycopg2
CREATE TABLE admin_login (
id serial PRIMARY KEY,
admin_name VARCHAR ( 150 ) NOT NULL,
admin_password VARCHAR ( 150 ) NOT NULL
);
INSERT INTO
admin_login(admin_name,admin_password)
VALUES
('admin', 'pbkdf2:sha256:150000$FXLDgm3a$bd46f6b7b44124a523f9566d03bf110ba2ebf28bfd3522faeddd56eabebcb7f5');
#app.py
from flask import Flask, render_template, request, jsonify, flash, redirect, session
from werkzeug.security import generate_password_hash, check_password_hash
import psycopg2 #pip install psycopg2
import psycopg2.extras
app = Flask(__name__)
app.secret_key = "caircocoders-ednalan"
DB_HOST = "localhost"
DB_NAME = "sampledb"
DB_USER = "postgres"
DB_PASS = "admin"
conn = psycopg2.connect(dbname=DB_NAME, user=DB_USER, password=DB_PASS, host=DB_HOST)
@app.route('/')
def index():
hash = generate_password_hash('cairocoders')
check_hash = check_password_hash(hash, 'cairocoders')
return render_template('index.html', hash=hash, check_hash=check_hash)
@app.route("/action",methods=["POST","GET"])
def action():
cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
print(username)
print(password)
cur.execute("SELECT * FROM admin_login WHERE admin_name = %s", [username,])
total_row = cur.rowcount
print(total_row)
if total_row > 0:
data = cur.fetchone()
rs_password = data['admin_password']
print(rs_password)
if check_password_hash(rs_password, password):
session['logged_in'] = True
session['username'] = username
msg = 'success'
else:
msg = 'No-data'
else:
msg = 'No-data'
return jsonify(msg)
@app.route('/logout')
def logout():
session.clear()
return redirect('/')
if __name__ == "__main__":
app.run(debug=True)
templates/index.html
//templates/index.html
<!DOCTYPE html>
<html>
<head>
<title>Login Form Using Bootstrap Modal using Python Flask jquery Ajax password hash and session</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="width:700px;">
<h3 align="center">Login Form Using Bootstrap Modal using Python Flask jquery Ajax password hash and session</h3><br />
<br />
<br />
<!--<p>hash : {{ hash }}</p>
<p>hash : {{ check_hash }}</p> -->
<br />
<br />
<br />
{% if session.logged_in %}
<div align="center">
<h1>Welcome - {{session.username}}</h1><br />
<a href="/logout">Logout</a>
</div>
{% else %}
<div align="center">
<a data-target="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span>Login</a>
</div>
{% endif %}
</div>
<br />
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login Form Using Bootstrap Modal using Python Flask jquery Ajax password hash and session</h4>
</div>
<div class="modal-body">
<label>Username</label>
<input type="text" name="username" id="username" class="form-control" />
<br />
<label>Password</label>
<input type="password" name="password" id="password" class="form-control" />
<br />
<button type="button" name="login_button" id="login_button" class="btn btn-warning">Login</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#login_button').click(function(){
var username = $('#username').val();
var password = $('#password').val();
if(username != '' && password != '')
{
$.ajax({
url:"/action",
method:"POST",
data: {username:username, password:password},
success:function(data)
{
alert(data);
if(data == 'No-data')
{
alert("Invalid Email Or Password!");
}
else
{
$('#loginModal').hide();
location.reload();
}
}
});
}
else
{
alert("Both Fields are required");
}
});
});
</script>
</body>
</html>
