Skyduino:~#
Articles
projet

[CarnetDuMaker] Nouveau système de comptes utilisateurs

Bonjour tout le monde !

Edit: Je devais mettre cet article en ligne hier en même temps que mon précédent article, mais j’ai oublié de cliquer sur le bouton « Publier ». Oups.

La révision du code de la bêta du site Carnet Du Maker avance doucement, mais surement et pour éviter une nouvelle douche froide à cause d’un empilement incontrôlable de bugs et de choix techniques idiots, j’ai décidé de documenter chaque étape de mon travail de révision du code pour que vous puissiez me faire des remarques/retours avant que les modifications ne tournent à la catastrophe.

L’idée est simple : si vous voyez quelque chose qui vous semble peu pratique, erroné, mal conçu, ou tout simplement idiot, n’hésitez pas à laisser un commentaire en bas de l’article.
Je fais mon maximum pour éviter de faire des choix techniques idiots, mais l’erreur est humaine.

N.B. Les modifications décrites dans cet article ne sont pas déployées sur le serveur de test pour le moment.

Nouveau système de comptes utilisateurs

La première application du site CDM à subir une révision majeure est l’application en charge de la gestion des comptes utilisateurs.
Cette application est en charge de l’affichage de la liste des membres, des profils utilisateurs publics et de la modification/stockage des informations de chaque utilisateur du site.

members_list_menu

L’accès à la liste des membres du site se fait via le bouton « Liste des membres » du menu « Communauté ». Je ne suis pas encore totalement sûr que nommer ce menu « Communauté » est bien parlant, mais je n’avais pas franchement d’autre idée.

Anciennement, l’URL de la page contenant la liste de membres était : « /comptes/ ». Désormais, l’URL est « /membres/ » afin de garder une certaine logique dans les URL.

members_list

La page contenant la liste des membres n’a visuellement pas changé.

Les membres sont affichés sous forme de tableau avec quatre colonnes : « nom d’utilisateur », « date d’inscription », « date de dernière connexion » et une colonne vierge contenant les liens de contact.
Les membres du staff (les administrateurs, modérateurs, rédacteurs, etc.) sont listés en premier, l’affichage se fait ensuite par ordre alphabétique en fonction du nom d’utilisateur.

La page est paginée pour éviter d’avoir tous les membres sur une seule et même page. La pagination est manuelle (pas de défilement infini).

members_list_entry_details

Pour chaque membre dans la liste, est affiché :
– le nom d’utilisateur,
– le statut « membre du staff »,
– le statut « en ligne »,
– la date d’inscription,
– la date de dernière connexion (si elle est disponible)
– une série de liens (avec icônes) pointant vers les réseaux sociaux, boite mails, site web, etc. en fonction des informations fournies par l’utilisateur et de ses préférences de vie privée.

member_public_page

Anciennement, l’URL de la page du profil public d’un utilisateur était : « /comptes/NOM_UTILISATEUR/ ». Désormais, l’URL est « /membres/NOM_UTILISATEUR/ » afin de garder une certaine logique dans les URL.
D’un point de vue hiérarchique, la page de profil d’un utilisateur est une page fille de la liste des membres. De fait, le fil d’Ariane est « Accueil / Liste des membres / Profil de XXX ».

D’un point de vue design web, j’ai utilisé le même style encadré (bleu) que pour les formulaires (voir plus bas).

La page de profil affiche :
– l’avatar de l’utilisateur (si fourni),
– le statut « membre du staff » de l’utilisateur,
– le statut « en ligne » de l’utilisateur (si celui-ci a choisi de rendre ce statut public),
– le nom et prénom de l’utilisateur (si celui-ci a choisi de rendre cette information publique),
– le pays de l’utilisateur,
– la langue de l’utilisateur (qui est toujours affiché en anglais à cause d’une limitation technique du framework que j’utilise (Django 1.8)),
– le sexe de l’utilisateur,
– diverses informations textuelles (nom entreprise, biographie, signature, etc.),
– divers liens de contact (Twitter, Facebook, Google+, email, Skype, message privé, etc.).

Exception faite du nom d’utilisateur, du pays de l’utilisateur, de sa langue et des dates d’inscription et de dernière connexion, tous les champs affichés sur la page de profil public sont désactivables.
Plus de détails sur le sujet sont dans le chapitre suivant.

N.B. Le bouton « Modifier mon profil » n’est affiché que si l’utilisateur courant est le même que l’utilisateur du profil affiché.
N.B. Vous ne verrez jamais le panel d’options d’administration en bas de page, sauf si vous devenez un jour membre du staff 😉

my_account_menu

Pour modifier les informations affichées sur la page de profil, il faut se rendre sur la page « Mon compte ».
Cette page est accessible après s’être connecté, dans le menu utilisateur.

N.B. Le bouton « Site d’administration » n’est pas affiché pour les utilisateurs ne faisant pas partie du staff 😉

Anciennement, l’URL de la page « Mon compte » était : « /comptes/mon-compte/ ». Cela posait un problème évident de conflit avec les URL des pages de profils.
J’avais résolu le problème dans la bêta en blacklistant le nom d’utilisateur « mon-compte » au niveau du formulaire d’inscription.
Désormais, l’URL de la page « Mon compte » est « /mon-compte/ » afin d’éviter tout conflit.
D’un point de vue hiérarchique, la page « Mon compte » est donc désormais une page racine. De fait, le fil d’Ariane est « Accueil / Mon compte ».

my_account

La page « Mon compte » n’est rien de plus qu’un formulaire permettant de modifier les diverses informations du compte.
J’ai choisi de faire une page avec des onglets pour pouvoir intégrer facilement les extensions de profils utilisateurs des autres applications du site (messagerie privée, forum, notifications, etc.).

N.B. Les champs obligatoires sont marqués avec une étoile.
N.B. Les champs sont en anglais dans la capture d’écran, car je n’avais pas activé le fichier de traduction en français à ce moment-là (oups).
N.B. Les champs nom / prénom sont en fin de formulaire à cause d’une limitation technique du framework web que j’utilise. L’ordre des champs est modifiable manuellement, mais je préfère attendre que le site soit stable avant de passer l’agencement du formulaire d’auto générée à manuel.

En bas de la page « Mon compte », j’ai ajouté un encadré avec les divers liens utiles en lien avec la page « Mon compte ». On retrouve ainsi un lien pour voir son profil utilisateur public et un lien pour modifier son mot de passe (voir plus bas).
Je n’ai pas inclus de lien pour changer son adresse mail pour le moment. J’ai prévu de faire un formulaire dédié avec vérification de l’adresse mail (via un lien d’activation) une fois le reste du site en place.

J’ai aussi ajouté deux messages d’informations concernant la loi « informatique et libertés » et la clôture de compte. Je n’ai pas pour le moment fait de déclaration à la CNIL concernant le site, mais d’ici fin juillet (date prévue pour la mise en ligne de la version semi-finale du site) ça devrait être fait.

Concernant la clôture de compte, il s’agit d’une suppression logicielle, et non pas d’une suppression matérielle. Les informations du compte et les données liées (message du forum, etc.) sont conservées, mais non affichées ou anonymisées.
Je suis légalement obligé de les conserver pendant un an en cas de demande par les autorités. Le même principe s’applique pour tous les messages postés par un utilisateur, privé ou non.

Les informations stockées en base de données sont :
– le nom d’utilisateur (obligatoire)
– l’adresse email (obligatoire)
– le nom et prénom (optionnel)
– l’image d’avatar (optionnel, redimensionnée à une taille fixe si fournie)
– la zone de temps (obligatoire, mais avec une valeur par défaut valable pour toutes personnes habitant en France métropolitaine)
– la langue (obligatoire, français par défaut)
– le pays de résidence (obligatoire, pour des raisons légales)
– la dernière adresse IP de connexion connue (accessible uniquement par les administrateurs, obligatoires pour des raisons légales)
– un booléen oui/non pour choisir d’afficher ou non son nom et prénom (défaut oui)
– un booléen oui/non pour choisir d’afficher ou non son adresse email (défaut non)
– un booléen oui/non pour choisir s’il est possible de retrouver l’utilisateur en utilisant son adresse email (en prévision de l’intégration du moteur de recherche) (défaut non)
– un booléen oui/non pour choisir d’afficher ou non son statut « en ligne » (défaut oui)
– un booléen oui/non pour choisir de recevoir la newsletter du site (défaut non)
– le sexe de l’utilisateur (avec une option « Inconnu » et « Autre » pour satisfaire tous les cas)
– une localisation géographique (optionnel)
– un nom d’entreprise (optionnel)
– une biographie (optionnel, supporte la syntaxe HTML avec filtrage)
– une signature (optionnel, supporte la syntaxe HTML avec filtrage. J’ai prévu de rendre par la suite le filtrage dynamique au moyen de permissions personnalisées pour les utilisateurs « de confiance »)
– un nom de site web et une URL (optionnel)
– un nom de compte Jabber pour les adeptes de XMPP (optionnel)
– un nom de compte Skype (optionnel)
– un nom de compte Twitter (optionnel)
– une URL de profil Facebook (optionnel)
– une URL de profil Google+ (optionnel)
– une URL de chaine Youtube (optionnel)
PS J’ai fait un gist Github concernant les URL acceptées par ces trois champs.
– une date de dernière modification (pour les moteurs de recherche principalement)
– une date de dernière activité (pour l’affichage du statut « en ligne », cette date n’est pas rendue publique)

password_reset_form

Le formulaire de modification de mot de passe est tout ce qu’il y a de plus classique.
Le formulaire est accessible via l’URL « /mon-compte/modification-mot-de-passe/ », c’est hiérarchiquement une page fille de la page « Mon compte ».

N.B. Le « Mandatory fields » en bas de formulaire est désormais traduit en français.

password_reset_done

Une fois la modification du mot de passe réussie, j’avais le choix entre forcer une déconnexion de l’utilisateur ou simplement invalider les sessions autres que celles en cours.
J’ai choisi la seconde option qui me semble plus pratique pour l’utilisateur.

Le workflow de ce cas d’usage est le suivant :
1) l’utilisateur se rend sur /mon-compte/modification-mot-de-passe/
2) l’utilisateur saisit son mot de passe actuel et son nouveau mot de passe (à deux reprises)
3) le mot de passe de l’utilisateur est modifié en base de données (avec hashage PBKDF2SHA256 + grain de sel pour éviter tout problème en cas de vol de la base de données).
4) toutes les sessions de l’utilisateur sont invalidées, excepté celle en cours
5) le message de confirmation est affiché

Voilà qui conclut cette première documentation de code du site CDM. Je vais essayer de faire régulièrement un article sur chaque application au fil des modifications.
Le code source du site CDM sera disponible sur Github sous licence GPLv3 une fois le plus gros du travail de révision achevé.

Publicités

Discussion

Pas encore de commentaire.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Skyduino devient Carnet du Maker

Le site Carnet du Maker remplace désormais le blog Skyduino pour tout ce qui touche à l'Arduino, l'informatique et au DIY.