Dans la partie précédente de cette série, nous avons vu comment démarrer avec Python Flask et MySQL et implémenté la partie d’enregistrement de notre application. Dans ce didacticiel, nous allons passer au niveau suivant en implémentant les fonctionnalités de connexion et de déconnexion de notre application..

Commencer

Commencez par cloner le code source du tutoriel précédent de GitHub.

git clone https://github.com/jay3dec/PythonFlaskMySQLApp---Part-1.git

Une fois le code source cloné, accédez au répertoire PythonFlaskMySQLApp --- Part-1 répertoire et démarrer le serveur.

python app.py

Pointez votre navigateur sur http: // localhost: 5002 et vous devriez avoir l'application en cours d'exécution.

Création de l'interface de connexion

Aller vers PythonFlaskMySQLApp --- Part-1 / templates et créez un nouveau fichier appelé signin.html. Ouvrir signin.html et ajoutez le code HTML suivant:

          
 
  
App Flacon Python
 
 
 
Bucket List App
 
 Adresse électronique  Mot de passe  se connecter 
 
  
   

Ouvrir app.py et ajouter un nouvel itinéraire pour l'interface de connexion.

@ app.route ('/ showSignin') def showSignin (): return render_template ('signin.html') 

Ensuite, ouvrez index.html et signup.html, et ajoutez le href lien pour vous connecter sur les deux pages / showSignin. Enregistrez toutes les modifications et redémarrez le serveur.. 

python app.py

Pointez votre navigateur sur http: // localhost: 5002 et cliquez sur le bouton Se connecter lien, et vous devriez pouvoir voir la page de connexion.

Implémentation de la connexion

Maintenant, nous devons créer une fonction pour valider la connexion de l'utilisateur. En cliquant Se connecter nous publierons l'adresse e-mail et le mot de passe entrés dans la fonction de validation de l'utilisateur.

Création d'une procédure stockée 

Pour valider un utilisateur, nous aurons besoin d’une procédure stockée MySQL. Créez donc une procédure stockée MySQL comme indiqué:

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_validateLogin' (IN p_username VARCHAR (20)) BEGIN sélectionner * à partir de tbl_user où user_username = p_username; FIN $$ DELIMITER; 

Nous allons obtenir les détails de l'utilisateur en fonction de la Nom d'utilisateur de la base de données MySQL en utilisant sp_validateLogin. Une fois que nous avons le mot de passe haché, nous le validerons par rapport au mot de passe saisi par l'utilisateur..

Valider la méthode utilisateur

Créez une méthode pour valider l'utilisateur que nous appellerons lorsque l'utilisateur soumettra le formulaire:

@ app.route ('/ validateLogin', method = ['POST']) def validateLogin (): try: _username = request.form ['inputEmail'] _password = request.form ['inputPassword'] sauf exception comme e: return render_template ('error.html', error = str (e)) 

Comme indiqué dans le code ci-dessus, nous avons lu l'adresse électronique et le mot de passe affichés dans _Nom d'utilisateur et _mot de passe. Maintenant, nous appellerons le sp_validateLogin procédure avec le paramètre _Nom d'utilisateur. Donc, créez une connexion MySQL dans le validateLogin méthode:

con = mysql.connect ()

Une fois la connexion créée, créez un le curseur en utilisant le con lien.

curseur = con.cursor ()

A l'aide du curseur, appelez la procédure stockée MySQL comme indiqué:

cursor.callproc ('sp_validateLogin', (_ nom d'utilisateur,))

Obtenez les enregistrements récupérés du curseur comme indiqué:

data = cursor.fetchall ()

Si les données contiennent des enregistrements, nous allons faire correspondre le mot de passe récupéré avec le mot de passe saisi par l'utilisateur..

si len (data)> 0: si check_password_hash (str (data [0] [3]), _ password): renvoyer la redirection ('/ userHome') sinon: return render_template ('error.html', error = 'Adresse e-mail incorrecte ou Mot de passe. ') else: retour render_template (' error.html ', error =' Adresse email ou mot de passe incorrect. ')

Comme indiqué dans le code ci-dessus, nous avons utilisé une méthode appelée check_password_hash pour vérifier si le mot de passe de hachage renvoyé correspond au mot de passe entré par l'utilisateur. Si tout va bien, nous redirigerons l'utilisateur vers userHome.html. Et s'il y a une erreur, nous afficherons error.html avec le message d'erreur.

Voici le complet validateLogin code:

@ app.route ('/ validateLogin', method = ['POST']) def validateLogin (): try: _username = request.form ['inputEmail'] _password = request.form ['inputPassword'] # se connecter à mysql con = mysql.connect () cursor = con.cursor () cursor.callproc ('sp_validateLogin', (_nom_utilisateur,)) data = cursor.fetchall () if len (data)> 0: si check_password_hash (str (data [0] [3]), _ mot de passe): session ['utilisateur'] = data [0] [0] renvoyer une redirection ('/ userHome') else: retourner render_template ('error.html', error = 'Adresse e-mail ou mot de passe incorrect. ') else: return render_template (' error.html ', error =' Adresse e-mail ou mot de passe incorrecte '') sauf Exception en tant que e: return render_template ('error.html', error = str (e)) enfin: cursor.close () con.close () 

Créez une page appelée userHome.html dans le dossier des modèles et ajoutez le code HTML suivant:

         
 
  
App Flacon Python
 
 
 
Bienvenue à la maison !!
 
  
  

Créez également une page d'erreur appelée error.html dans des modèles dossier et ajoutez le code HTML suivant:

        
 
  
App Flacon Python
 
 
 
Erreur
 
  
  

À l'intérieur error.html nous avons un élément comme indiqué:

Erreur

La valeur de la variable peut être passée de la render_template fonction et peut être réglé dynamiquement.

En cas de connexion réussie, nous redirigeons l'utilisateur vers la page d'accueil de l'utilisateur. Nous devons donc créer un itinéraire appelé / userHome comme montré:

@ app.route ('/ userHome') def userHome (): return render_template ('userHome.html') 

Enregistrez toutes les modifications et redémarrez le serveur. Clique sur le Se connecter lien dans la page d'accueil et essayez de vous connecter en utilisant une adresse e-mail et un mot de passe valides. Si la validation de l'utilisateur est réussie, vous devriez avoir une page comme indiqué ci-dessous:

Si la validation de l'utilisateur échoue, l'utilisateur sera redirigé vers une page d'erreur, comme indiqué ci-dessous:

Ici, nous avons utilisé une page d'erreur séparée pour afficher l'erreur. Cela convient également si vous souhaitez utiliser la même page pour afficher le message d'erreur.. 

Limitation de l'accès non autorisé à la page d'accueil de l'utilisateur

Lorsque la validation de l'utilisateur est réussie, un utilisateur est redirigé vers la page d'accueil de l'utilisateur. Mais à l'heure actuelle, même un utilisateur non autorisé peut afficher la page d'accueil en naviguant simplement sur l'URL http: // localhost: 5002 / userHome. 

Pour limiter l'accès des utilisateurs non autorisés, nous rechercherons une variable de session que nous définirons en cas de connexion réussie. Donc importer session du flacon: 

à partir d'une session d'importation de flacon

Nous devons également définir une clé secrète pour la session. Donc dans app.py, Une fois l'application initialisée, définissez la clé secrète comme indiqué:

app.secret_key = 'pourquoi devrais-je vous dire ma clé secrète?' 

Maintenant, à l'intérieur du validateLogin méthode, avant de rediriger l'utilisateur vers / userHome en cas de connexion réussie, définissez le session variable comme indiqué:

session ['utilisateur'] = données [0] [0]

Ensuite, à l'intérieur du userHome méthode, vérifiez la variable de session avant le rendu userHome.html. Si la variable de session n'est pas trouvée, redirigez vers la page d'erreur.

@ app.route ('/ userHome') def userHome (): if session.get ('user'): return render_template ('userHome.html') else: return render_template ('error.html', error = 'Accès non autorisé ') 

Enregistrez toutes les modifications et redémarrez le serveur. Sans vous connecter, essayez d'accéder à http: // localhost: 5002 / userHome et, puisque vous n'êtes pas encore connecté, vous devriez être redirigé vers la page d'erreur..

Mise en œuvre de la déconnexion

La mise en œuvre de la fonctionnalité de déconnexion est la plus simple. Tout ce que nous avons à faire est de créer la variable de session utilisateur null et redirige l'utilisateur vers la page principale. 

À l'intérieur app.py, créer une nouvelle route et méthode pour Connectez - Out comme montré: 

@ app.route ('/ logout') def logout (): session.pop ('utilisateur', Aucun) renvoie la redirection ('/') 

Nous avons déjà défini le href du bouton de déconnexion sur /Connectez - Out. Enregistrez donc toutes les modifications et redémarrez le serveur. Depuis la page d'accueil, cliquez sur Se connecter et essayez de vous connecter en utilisant une adresse email et un mot de passe valides. Une fois connecté, cliquez sur le bouton Connectez - Out bouton dans la maison de l'utilisateur et vous devriez être déconnecté de l'application avec succès.

Conclusion

Dans cette partie du didacticiel, nous avons vu comment implémenter les fonctionnalités de connexion et de déconnexion de l'utilisateur. Nous avons également vu comment restreindre l'accès non autorisé aux pages de l'application. Dans la suite de ce didacticiel, nous allons implémenter la fonctionnalité permettant à l'utilisateur connecté d'ajouter et de modifier un article de blog dans l'application..

Le code source de ce tutoriel est disponible sur GitHub.

Faites-nous savoir vos pensées dans les commentaires ci-dessous!