username
and
typed_password:
encrypted_password =
pbkdf2_sha256.encrypt(typed_password,
rounds
=
200000
,
salt_size
=
16
)
get_db().create_user(name, username, encrypted_password)
return
redirect(
'/login'
)
return
render_template(
'create_user.html'
)
Gets the values
from the form
Encrypts the
password
If success, send them
to the login page
If failure, send them
back to the create page
Stores the user
in the DB
CS 530: Developing User Interfaces, Drexel University
15
(4) Logging In
§
Now that the user has an account, they can log in
–
Same type of <form> element as the account creation
page, using an HTTP "POST" request
CS 530: Developing User Interfaces, Drexel University
16
(4) Logging In
§
Flask server code
@app.route
(
'/login'
,
methods
=[
'GET'
,
'POST'
])
def
login
():
if
request.method
==
'POST'
:
username = request.form[
'username'
]
typed_password
= request.form[
'password'
]
if
username
and
typed_password:
user = get_db().get_user(username)
if
pbkdf2_sha256.verify(typed_password,
user[
'encrypted_password'
]):
session[
'user'
] = user
return
redirect(
'/'
)
return
render_template(
'login.html'
)
CS 530: Developing User Interfaces, Drexel University
17
(4) Logging In
§
Flask server code
@app.route
(
'/login'
,
methods
=[
'GET'
,
'POST'
])
def
login
():
print
(request.method)
if
request.method
==
'POST'
:
username = request.form[
'username'
]
typed_password
= request.form[
'password'
]
if
username
and
typed_password:
user = get_db().get_user(username)
if
pbkdf2_sha256.verify(typed_password,
user[
'encrypted_password'
]):
session[
'user'
] = user
return
redirect(
'/'
)
return
render_template(
'login.html'
)
Gets the values
from the form
Verifies that the
typed password
matches the
encrypted one
(Rely on a library
for this!!)
If success, store the
user in the
session
and redirect to the
home page
If failure, send them
back to the login page
CS 530: Developing User Interfaces, Drexel University
18
(4) Logging In
§
One cool thing: Now that the
session
variable has
user information, we can use this in templates!
§
This comes very handy when altering a page to fit
the logged-in user
–
Most commonly, we alter the nav menu…
•
Change "Log In" to the user's name
•
Make the user's name a submenu that includes "Log Out"
CS 530: Developing User Interfaces, Drexel University
19
(4) Logging In
<
ul
class
=
"navbar-nav"
>
{% if session['user'] %}
<
li
class
=
"nav-item dropdown"
>
<
a
class
=
"nav-link dropdown-toggle"
href
=
"#"
id
=
"navbarDropdown"
role
=
"button"
data-toggle
=
"dropdown"
aria-haspopup
=
"true"
aria-expanded
=
"false"
>
Hi
{{ session['user']['name'] }}
!
</
a
>
<
div
class
=
"dropdown-menu dropdown-menu-right"
aria-labelledby
=
"navbarDropdown"
>
<
a
class
=
"dropdown-item"
href
=
"/logout"
>
Log Out
</
a
>
</
div
>
</
li
>
{% else %}
<
li
class
=
"nav-item"
>
<
a
class
=
"nav-link"
href
=
"/login"
>
Log In
</
a
>
</
li
>
{% endif %}
</
ul
>
CS 530: Developing User Interfaces, Drexel University
20
(5) Error Checking & Messaging
§
We already have the functionality we need for basic
user authentication
§
There are some niceties that we could add, though
§
