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

Dernier chapitre de notre développement, où nous allons ajouter, modifier et supprimer des mots de passe.

Cet article est écrit en 3 parties :

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

Continuer la lecture

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

Suite de notre développement !

Dans le chapitre précédent on a pu mettre en place tout notre environnement ainsi que notre première page.

Cet article est écrit en 3 parties :

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

Continuer la lecture

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

Continuer la lecture

[Symfony 4] Création de fixtures aléatoires – Faker

Rien de plus ennuyant que de créer des jeux de données afin de tester votre application, d’autant qu’il existe des scripts pour ça, comme Faker qui fait très bien le boulot.
Ces données s’appellent plus communément des “fixtures”.

On va commencer par créer un nouveau projet Symfony 4 :

Et y ajouter quelques librairies qui nous serons utiles :

Puis tout de suite ajouter le composant qui nous intéressent : Faker (https://github.com/fzaninotto/Faker) :

Ensuite on va créer une nouvelle entité appelée “Personne” :

lors de l’installation du composant fixtures ce dernier a installé un nouveau répertoire : DataFixtures, c’est dans ce dernier que nous allons générer nos fixtures.

Vous trouverez ici tous les types de données que Faker peut générer : https://github.com/fzaninotto/Faker#formatters

Voilà notre fichier FakerFixtures :

Un petit :

Et voilà notre base remplie de 10 personnes :

Vous pouvez retrouver les sources ici :

https://github.com/gponty/sf4-faker

[Symfony 4] Utiliser vue.js

Dans cet article nous allons nous attaquer à la mise en place de vue.js avec Symfony 4.

Vue.js est un framework javascript que j’apprécie particulièrement pour sa simplicité.

Avant de commencer assurez-vous d’avoir bien nodeJS sur votre poste.

On va tout d’abord créer un nouveau projet symfony :

Puis ajouter quelques librairies :

Et enfin installer vue.js :

Afin d’initialiser le projet, il suffit de faire :

Ces commandes vont créer les répertoires assets, node_module ainsi que le fichier webpack.config.js

C’est ce dernier que nous allons tout de suite modifier :

Et il faut enfin donner le chemin à symfony du manifest.json afin qu’il trouve les différents assets (le manifet.json sera créé au moment du build)

Voilà pour l’installation, on va maintenant passer aux choses sérieuses en créant nos pages.

On va d’abord créer notre controller, rien de compliqué ici :

Puis le fichier twig templates/base.html.twig :

Le composant vue.js dans assets/js/App.vue :

Le fichier main de vue dans assets/js/main.js :

Et enfin le fichier assets/js/components/Hello.vue :

Si vous lancer votre serveur à ce moment :

vous allez avoir une erreur 404 vous disant qu’il ne trouve pas le fichier build/app.js, c’est tout à faire normal puisqu’il faut que l’on lance la génération de ce fichier en faisant :

Si tout se passe bien, en allant sur http://127.0.0.1:8000 vous devez avoir un “Welcome to Your Vue.js App” s’afficher, et un “Oups… Problème” si il y a un… problème.

Petite astuce si voulez voir vos modifs en direct sans à chaque fois refaire une génération, à la place de la commande ci-dessus il faut faire :

Vous pouvez retrouver les sources ici : https://github.com/gponty/symfony-vue

[Symfony 4] – Gestion d’événements

On continue notre série de gestion des utilisateurs sans FOSUserBundle, cette fois on va mettre en place un EventListener, c’est à dire un événement qui va se déclencher là où on le voudra.

On va simplement envoyer un mail à l’utilisateur qui vient de s’inscrire afin de lui souhaiter la bienvenue.

Pour cela on va déjà ajouter la librairie qui permet de gérer l’envoi des mails :

Suite à ça vous devez avoir une nouvelle ligne dans votre fichier .env, qu’il faut modifier selon votre serveur, pour moi c’est :

(vous avez aussi la même ligne dans le fichier phpunit.xml.dist si vous voulez envoyer des mails durant vos tests)

On va aussi ajouter quelques paramètres dans nos fichiers de config, comme l’adresse expéditeur :

Pour mettre en place de bonnes pratiques, on va créer un fichier qui regroupera tous nos events, ça permettra de les avoir tous au même endroit :

On créé maintenant notre Listener, il n’y a rien de compliqué :

Et enfin on modifie notre Controller pour juste y ajouter le déclenchement de notre event :

and voilà !

Vous pouvez retrouver toutes les sources ici :

https://github.com/gponty/userDemo

[Symfony 4] – Gestion des utilisateurs sans FosUserBundle Chapitre 3.5

Avant de passer au chapitre 4, on va faire une petite parenthèse en faisant quelques tests sur notre site, à l’aide de PHPUnit.

Rien à voir avecPhpUnit mais on va installer un serveur web pour exécuter notre site :

Puis pour lancer le serveur :

Vous pouvez comme ça accéder à votre application avec : http://127.0.0.1:8000

Ensuite pour les tests, il faut le composant PHPUnit :

Et pour les tests fonctionnels on va avoir besoin de :

Il faut aussi créer le répertoire (si cela n’a pas était fait automatiquement) qui contiendra tout nos tests, on l’appellera pour être original : “tests”

Et comme on est feignant on va faire appelle au maker pour nous créer nos classes :

On va maintenant faire un peu de config, dans le fichier config/packages/test/framework.yaml, nous allons lui dire que nous allons utiliser les sessions (juste décommenter les 2 dernières lignes) :

Et surtout ajouter cette ligne dans le fichier phpunit.xml.dist, c’est sur cette base de données que va se connecter phpunit pour effectuer qui ont besoin de votre base :

ATTENTION : il faut que la base de données soit la même que ce qu’il y a dans votre fichier env.
Ceci implique que vos tests seront réalisés sur la base réelle, l’idéal serait de remplacer userDemo par userDemoTest et utiliser une base dédiée aux tests.
Le problème c’est que je n’ai pas trouvé les commandes en symfony 4 pour créer la base test avec son schéma.

Vous pouvez déjà exécuter les tests par défaut en faisant simplement :

Voici le résultat attendu :

On va maintenant créer un 1er test qui consiste à vérifier qu’un message d’erreur s’affiche bien lorsque l’utilisateur s’inscrit en ne saisissant pas les 2 mêmes mot de passe :

Si tout va bien vous devriez obtenir :

 

[Symfony 4] – Gestion des utilisateurs sans FosUserBundle Chapitre 3

Nous allons voir comment un utilisateur peut s’inscrire sur notre site et ainsi accéder à certaines fonctions du site réservé aux inscrits.

On va tout d’abord ajouter le composant form à notre projet :

Ensuite nous allons modifier notre class User pour y ajouter 2 contraintes :

  • Un login unique
  • Un mail unique

Ceux qui veut dire que si un utilisateur essaie de s’inscrire avec un username ou login déjà existant, il ne pourra pas le faire mais en plus on lui affichera un message d’erreur.

Et on va ajouter d’autres contrôles :

  • Username
  • Email renseigné
  • Mot de passe renseigné

On verra plus tard comment contrôler le mot de passe, voici ce que nous donne notre classe User mis à jour :

Nous allons aussi avoir besoin du formulaire qui va permettre à l’utilisateur de s’inscrire. Pour cela on va utilise un type form qui reprendra pratiquement toutes les zones de notre class User, vous noterez que le mot de passe sera à saisir 2 fois afin de contrôler qu’il soit bien identique :

Bien évidemment on va avoir besoin d’un controller et d’un template :

Voilà pour l’inscription d’un utilisateur, vous pourrez par vous-même envoyer un mail de confirmation si l’inscription est valide.

Les sources se trouvent ici : https://github.com/gponty/userDemo

Dans le prochain chapitre nous verrons comment l’utilisateur peur modifier son mot de passe et le modifier si il l’a oublié.

 

[Symfony 4] – Gestion des utilisateurs sans FosUserBundle Chapitre 2

Un court chapitre où nous allons juste implémenter la fonction de connexion d’un utilisateur.

Pour cela nous allons avoir besoin de faire encore un peu de configuration, nous allons tout d’abord mettre à jour le firewall principal du fichier secrity.yaml :

On va aussi modifier le fichier framework.yaml pour y ajouter la gestion des sessions et la protection xcrf

On va créer notre controller de login et logout, rien de compliqué, dans App/Controller/SecurityController.php :

Si ce n’est pas déjà fait, on va créer 1 controller qui contiendra 2 routes : index et admin

La page index sera la landing page de notre site, la page admin sera la partie sécurisée où seul les admins seront autorisés à y accéder :

Et les templates qui vont bien :

index.html.twig

Admin/index.html.twig

On va aussi créer un template pour notre formulaire de connexion, Security/login.html.twig

A ce point et si on a rien oublié on doit pouvoir se connecter en accédant à la page /login et en saisissant les identifiants qui sont dans votre fichier fixtures.

Dans le prochain chapitre nous verrons comment un utilisateur peut s’inscrire sur le site.
Vous pouvez retrouver les sources complètes ici : https://github.com/gponty/userDemo

[Symfony 4] Gestion utilisateurs sans FosUserBundle

Après “Comment utiliser FosUserbundle“, comment se passer de FosUserBundle !

Mais à l’heure où j’écris ces lignes il n’y a de toute façon pas le choix puisque FosUserBundle n’est pas encore compatible avec Symfony 4.

Plutôt que d’attendre qu’il le soit, j’aurai pu y contribuer, mais j’ai préféré me retrousser les manches et mettre les mains dans le cambouis pour développer ma propre solution de gestion des utilisateurs.

Ceci afin de ne pas être dépendant de FOSUserBundle et devoir attendre qu’il soit compatible avec les dernières version de Symfony, mais surtout de bien comprendre les mécanismes de sécurité de Symfony (et aussi parce que ça faisait longtemps que j’avais écrit sur ce blog).

D’abord on prend un papier et un stylo et on répond à la question : Que doit faire un système de gestion des utilisateurs ?

On va commencer par des réponses simples :

  • Inscription d’un utilisateur
  • Connexion de l’utilisateur
  • Affecter des droits (rôles)
  • Récupérer son mot de passe
  • Remplacer son mot de passe

Dans cette 1ere partie nous allons juste voir la création de notre entité User.

Afin de mettre en place tout ça on va commencer par créer un projet Symfony 4 (pour ça il faut absolument php 7.1, sinon ce sera du symfony 3.4)  :

Puis ajouter tous les composants que l’on aura besoin :

Doctrine et maker pour générer des controllers, entity :

Gestion de la sécurité :

Moteur de template Twig :

Toolbar debug :

Annotations :

Validation :

Gestion de fixtures :

Pour créer la base de donnée, on met à jour notre config dans le fichier .env :

puis pour la créer dans mysql :

On va aussi creer notre 1er controller :

On va maintenant créer notre Entité User, c’est celle ci qui contiendra toutes les données de l’utilisateur (username, email, mot de passe, …) :

On a donc un nouveau fichier dans src/Enity/User.php :

On met la base à jour :

Nous allons tout de suite créer un utilisateur en utilisant les fixtures (c’est-à-dire des exemples de données), il faut d’abord ajouter un encoder dans le fichier security.yaml :

Créer le fichier src/DataFixtures/AppFixtures.php

Il n’y a plus qu’à charger les fixtures :

Et si tout va bien vous devez avoir dans votre base 3 utilisateurs :

Dans le prochain chapitre nous verrons comment se connecter.

En attendant vous pouvez retrouver l’ensemble des sources ici : https://github.com/gponty/userDemo