Appli de gestion de mot de passe en Symfony et Vue.js (Partie 1)

Le tutorial du jour va être de développer une application qui servira à stocker vos nombreux mots de passe. (site internet, numéro CB, code PIN, etc…)
Elle portera le doux nom de Gespass.
Cette application servira uniquement d’exercice, je ne vous conseille pas de l’utiliser en production sans en améliorer la sécurité (par exemple au moins ajouter une authentification .htaccess)

Mon environnement de dev actuel :

  • Mint 19 xfce
  • php 7.2.5
  • mariadb 10.1.29
  • symfony 4.1.1
  • server web de symfony
  • vue.js 2.5.16

Cet article sera écrit en 3 parties :

Vous pouvez retrouver le projet complet ici : https://github.com/gponty/gespassvuejs

On va d’abord créer le projet symfony :

Et installer tous les bundles que nous allons avoir besoin :

On lance le serveur pour voir que tout fonctionne

En allant à http://127.0.0.1:8000 (le numéro de port peut être différent si il est déjà pris), vous devriez voir une velle page symfony :

On va tout de suite mettre à jour les identifiants de notre base dans le fichier.env : (vous remarquerez que sur ma machine locale je n’ai pas besoin de mot de passe pour me connecter à mariaDB)

Et on créé notre base dans la foulée :

On va ensuite créer nos tables, enfin plutôt notre table, puisque il y en aura q’une seule, celle qui contiendra l’ensemble des mots de passe, on l’appellera simplement : Password

On va utiliser pour cela le “maker-bundle” :

C’est relativement simple, il suffit simplement de répondre aux questions, ce qui va nous donner au final :

On va modifier légèrement cette entity en utilisant le principe des “traits” (je ferai sûrement un article plus tard pour détailler ce principe)

Même si pour ce projet ce n’est pas indispensable, car nous n’aurons qu’une entité.

On va créer un fichier TimestampableEntity.php qui contiendra ceci :

Et on va ajouter dans le fichier MotDePasse.php :

et dire que notre entité contient des “callbacks de cycle de vie” :

On peut maintenant créer la base (comme pour les “traits”, je ferai aussi un article sur le principe de migration) :

Le résultat :

On va aussi créer notre controller principal, on va aussi profiter du maker :

Dans le fichier généré (/src/Controller/DefaultController.php)

On va remplacer la route “/default” par “/”.

Et on peut voir la page d’accueil qui va changer :

Sur le même principe, on va en profiter pour créer le controller qui va gérer les mots de passe, il s’appellera simplement MotDePasseController.php et contiendra 5 fonctions :

  • /passwords : Retourne la liste complète des mots de passe
  • /motdepasse/new : Sauvegarde dans la base un nouveau mot de passe
  • /motdepasse/save/{id} : Sauvegarde après modif un mot de passe existant
  • /motdepasse/delete/{id} : Supprime un mot de passe de la base
  • /motdepasse/generate : Génère un mot de passe aléatoire

Ce qui nous donne :

Tout est maintenant prêt pour installer et configurer vue.js, il suffit d’exécuter ces commandes :

Dans le prochain chapitre, on configurera vue.js !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.