Article original, rédigé sans IA

Problématique

On ne se rend pas vraiment compte du nombre de mots de passe que l’on utilise. Certains très rarement, d’ailleurs…

Quand j’ai commencé à mettre mon nez dans mes mots de passe, je me suis rendu compte que j’avais plus d’un millier de comptes à droite à gauche, sur des sites x ou y, avec les mots de passe correspondants. 1485 mots de passe, exactement. Et bien sûr, comme beaucoup de gens, j’utilisais toujours le même mot de passe, pour simplifier. Ce qui est une catastrophe, en termes de sécurité.

J’utilisais une fonctionnalité de navigateur pour les garder au chaud. J’utilise essentiellement Firefox et ce dernier propose de stocker tes mots de passe pour ne pas avoir à t’en souvenir. C’est très bien. C’est pratique et de ce fait, on accumule des mots de passe sans s’en soucier.

La question que je me suis alors posé, c’est : Quid de la sécurité de ce système ?

Alors, j’ai creusé un peu la question.

Et je me suis rendu compte que les gestionnaires de mot de passe des navigateurs ne sont pas l’endroit le plus adapté pour stocker des données sensibles. On les appelle des gestionnaires, pas des coffre fort.
Et d’ailleurs, des failles de sécurité dans ces outils ont déjà été reportées, preuve de leur faillibilité.

Personnellement, ça ne me plaît pas trop que les codes d’accès à mon compte bancaire soient stockés dans un endroit non fiable.

Je me suis donc penché sérieusement sur ce problème et j’ai cherché une solution qui me convienne.

Ma solution

Les solutions les plus évidentes passent par un coffre fort numérique.

Étant donné ma grande réticence envers les acteurs majeurs du web, je me suis naturellement tourné vers les solutions OpenSource.

Dans ce domaine là, il n’y en a pas des centaines qui vaillent le détour et le seul qui tient le haut du pavé, c’est KeePass. Malgré son interface austère mais efficace, ce coffre fort est la Rolls des coffres-forts numérique.
Il permet de stocker ses mots de passe dans une base de données locale (donc déconnectée d’internet, donc peu de risque de fuite de données).
Bon, très bien.

Mais d’un point de vue pratique, me diras tu, le gestionnaire de mot de passe du navigateur, c’est quand même vachement bien : on n’a pas des tas de clics à faire pour remplir un formulaire d’authentification.
Et c’est bien vrai : c’est pratique.
Alors, KeePass propose des extensions (plugins) qui permettent de pallier ces petits soucis pratiques : remplir un formulaire, gérer l’authentification multi facteurs et bien d’autres, mais c’est vrai : c’est pas hyper pratique.

Et puis ma base est en local sur mon ordi ou mon téléphone, me rediras tu, alors comment je fais si j’ai besoin d’un mot de passe et que je suis sur un autre ordinateur ?
Hé oui, là encore, c’est un problème. Il existe des solutions pour synchroniser la base de données entre différentes machines, mais là encore, c’est compliqué à mettre en œuvre et c’est pas très pratique. En gros, on stocke la base de mot de passe sur un serveur cloud et les différents appareils vont lire ce fichier.

Oui, mais alors il faut le stocker sur un cloud sécurisé, me rerediras tu…
Et tu as tout à fait raison… A quoi bon éviter le gestionnaire de mot de passe des navigateurs du marché à cause de leur faillibilité si c’est pour introduire un nouvelle (et énorme) faille de sécurité en stockant ma base de mots de passe chez Google Drive, One Drive (Microsoft), DropBox ou tout autre passoire de données personnelles à l’éthique douteuse…
Personnellement, j’ai opté pour un vrai cloud sécurisé et respectueux des données personnelles et j’ai stocké ma base de mots de passe dessus. Ça fonctionne, c’est fiable et sécurisé, mais c’est pas très sexy ni très pratique. J’ai donc continuer à creuser la question…

Ma vrai solution

Il faut bien comprendre que ces recherches, analyses et tests s’étalent sur plusieurs années. Et pendant ce temps, les technologies évoluent, les marchés et les mentalités aussi.

A l’heure ou je suis arrivé à la solution de KeePass, la notion de coffre fort numérique était encore à ses balbutiements et aucun acteur sérieux en proposait sur le marché un coffre fort utilisable accessible en ligne.

Jusqu’à l’année dernière.

Pour confier mes mots de passe à une entité tierce, sur le cloud, il faut une confiance totale. Cela exclus naturellement les acteurs du GAFAM (Google Apple Facebook Amazon Microsoft) qui ont fait de nos données personnelles leur principale source de revenue, tout en nous incitant à penser qu’elles étaient en sécurité sur leurs serveurs. Et cela exclu également toutes les filiales ou les partenaires avec qui ils participent au marché de la data. Et ils ne reste plus grand monde à qui faire confiance…

Il en existe néanmoins.

Les critères de choix sont compliqués, parce qu’ils sont parfois contradictoires.
Par exemple, on veut éviter les entreprises très grosses et très connues, qui ont des millions de clients de par le monde, car ce sont elles qui sont privilégiés par le hackeurs…
Mais en même temps, on ne va peut-être pas confier des données sensibles à une toute nouvelle petite boîte, dans un pays inconnu…
Dilemme…

Ajoutez à cela la problématique de la législation qui peut varier selon le pays du fournisseur ou de la localisation de ses data center…
Pour envisager un peu la complexité des récentes lois sur la protection des données, vous pouvez lire cet article. Vous y verrez que ces lois sont aussi d’excellents chevaux de Troie pour permettre aux états d’accéder à vos données personnelles. Ça leur reste compliqué, mais c’est plus facile qu’avant…

J’ai quand même fini par trouver la perle rare qui coche toutes les cases de mes critères compliqués.
J’ai choisi un hébergeur pour mes mots de passe, qui combine un stockage en cloud sécurisé et crypté (eux même ne peuvent pas lire les données), qui propose des fonctionnalités rendant le quotidien de la gestion des mots de passe souple et fluide, qui stocke les données dans un pays souverain en matière de données personnelles, qui est accessible depuis un navigateur, une appli mobile, un plugin de navigateur… Et accessoirement, qui propose d’autres services.
Je n’écris pas cet article pour leur faire de la pub, alors je vous dévoilerai le nom de cet hébergeur seulement en fin d’article. Et sachez qu’il en existe d’autres (pas beaucoup, à vous de les trouver 😉 ).

On passe à la pratique

La première étape consiste à importer l’ensemble des mots de passe depuis l’ancienne application (KeePass dans mon cas), vers la nouvelle application. Celle ci permet d’importer depuis plusieurs formats, donc cette étape est facile et rapide.

Et ensuite, il faut faire un peu le tri. C’est facultatif, mais puisqu’on part sur une nouvelle gestion des mots de passe autant en profiter pour faire le ménage et partir sur de bonnes bases.

Le plus long aura été de changer les mots de passe… Hé oui : comme j’utilisais toujours le même, il me fallait pallier à cette énorme faille de sécurité. Donc après avoir fait le tri et être descendu à un peu plus de 200 mots de passe à gérer, je me suis mis au travail pour modifier les comptes concernés et changer le mot de passe.

A partir du moment où les mots de passe sont stockés dans un coffre fort numérique et où l’on n’a plus besoin de les retenir, on peut se lâcher sur la force du mot de passe. D’autant que la nouvelle application permet de générer des mots de passe tout seul, selon des caractéristiques prédéfinies.
Moi, j’ai choisi 20 caractères, majuscule, minuscule, chiffres et caractères spéciaux. Ça donne ça, par exemple : D&R0zVSypz6xR7Ph3@1R
Un mot de passe de cette force demande, d’après les récentes études, 42 quintillion d’années pour être craqué par un ordinateur.

Une fois ce travail fastidieux réalisé, le plus dur est fait.

« Un anneau pour les gouverner tous » (JRR Tolkien)

Il ne reste plus qu’à sécuriser TRES SERIEUSEMENT l’accès au nouveau coffre fort numérique.

Hé oui, les mots de passe sont dans le coffre fort, mais il faut fermer le coffre fort et bien verrouiller son accès, puisqu’il contient tout ce qui est essentiel.
Cette fois, j’ai choisi un mot de passe de 30 caractères, majuscule, minuscule, chiffres et caractères spéciaux. Ça demanderait trois cent décillions d’années à craquer…
L’important, pour ce mot de passe est de pouvoir le retenir facilement. On peut aussi choisir une pass phrase pour simplifier la mémorisation. J’en parle ici.
Mais cet accès doit absolument être à toute épreuve : c’est votre précieux, votre anneau unique qui va permettre d’accéder à tous vos mots de passe.
J’ai donc ajouté l’authentification à 2 facteurs à cet accès. J’en parle ici.

Et voilà, toutes ces expériences s’étendent sur plusieurs années, mais ce fut très instructif et ça n’est pas fini. La technologie continue d’évoluer. Donc il faut continuer à contrôler que les solutions que l’on a mis en place ne sont pas obsolètes. Surtout quand il s’agit de sécurité.

Ha oui, j’ai failli oublier. Vous voulez savoir qui j’ai choisi pour stocker mes mots de passe ?
C’est Proton, que j’utilise aussi pour le mail.

crédit photo : Anaïs Bajeux

axialdata, c’est un cabinet de conseils en systèmes d’information qui vise à remettre l’humain au centre du processus de décision et du process informatique.

En facilitant les tâches automatisables et en simplifiant au maximum l’accès aux données de l’entreprise. Objectifs : rationaliser l’informatique, simplifier le quotidien, gagner de temps, rester serein…

axialdata apporte des solutions sur différents type de projets : gestion de site internet, SEO, référencement, développement, déploiement, gestion de projets, analyse de données, interconnexion de bases des données, automatisation, rationalisation, audit, conseil, sécurité, formation, accompagnement…

 #axialdata #consultant #informatique #entreprise

On a tous pesté, un jour ou l’autre, sur un fichu logiciel qui ne faisait pas exactement ce qu’on attendait de lui ! Obligé de se contorsionner le cerveau pour imaginer une solution de contournement. Exploiter une autre partie de l’application pour enregistrer les informations que l’on veut.

Ou bien ces heures passées à faire des copié/collé d’une application dans une autre application qui ne communiquent pas entre elles. Ou pire qui communiquent, mais pas toutes les infos !!

Ou encore ce temps perdu, par exemple, à créer des devis alors que le client aurait pu faire ça tout seul sur votre site internet.

En tant que professionnel, il est essentiel de rester compétitif dans un monde en constante évolution d’aujourd’hui.

L’une des clés pour y parvenir est d’optimiser vos processus internes et de réduire votre dette technique. Éliminer au maximum toutes les tâches à faible valeur ajoutée.

Dans cet article, nous allons voir, à travers un auto-diagnostic simple, comment identifier les domaines où vous pouvez automatiser et simplifier vos processus, tout en améliorant votre efficacité opérationnelle.

Étape 1 : identifiez vos processus clés

La première étape consiste à évaluer tous les processus au sein de votre entreprise.

Prenez le temps de documenter chaque processus, de la gestion des stocks à la gestion des ressources humaines, en passant par la comptabilité. Identifiez les tâches spécifiques, les ressources nécessaires et les parties prenantes impliquées dans chaque processus.

Étape 2 : évaluez vos processus/tâches actuels

Une fois que vous avez identifié vos processus, évaluez-les pour déterminer ceux qui sont les plus chronophages, sujets à des erreurs fréquentes, ou qui nécessitent beaucoup de ressources humaines. Cela peut se faire en découpant les processus par tâches.

Vous pouvez ainsi identifier rapidement la ou les tâches »parasites ». Ce sont les tâches qui peuvent être chronophages sans pour autant apporter la moindre valeur ajoutée au produit ou à l’entreprise.

Par exemple taper des documents reçus en papier, faire des copié/collé d’une appli dans une autre, saisir des devis dans un tableur à partir des demandes des clients, etc. Ces processus ou ses tâches sont généralement de bons candidats pour l’automatisation.

Étape 3 : examinez votre dette technique

Votre dette technique se compose des technologies obsolètes ou mal intégrées qui entravent l’efficacité de vos opérations (voir un article complet sur la dette technique).

Identifiez les systèmes ou les logiciels qui posent problème et qui pourraient être mis à jour ou remplacés par des solutions plus efficaces. En gros, c’est un peu la même analyse que pour l’étape 1.

Vous passez en revue les différents outils nécessaires à votre production (informatique, machines, bureautique…) et vous contrôlez qu’ils sont toujours conformes à ce qui se fait en ce moment, qu’ils sont bien paramétrés, qu’ils sont exploités au mieux.

Si l’on parle d’informatique, il faut s’assurer de la mise à jour des systèmes, des logiciels, contrôler le niveau de sécurité (firewall, antivirus).

Un point important également : assurez vous que vous connaissez les possibilités de vos outils. Parfois, on perd du temps simplement par-ce qu’on ne sait pas que la machine (ou l’ordinateur) peut faire une tâche à notre place !

Il peut être utile de se faire accompagner pour cette étape qui peut être parfois très technique.

Étape 4 : cherchez des solutions d’automatisation

Une fois que vous avez identifié vos processus clés et évalué votre dette technique, commencez à rechercher des solutions d’automatisation.

De nombreux logiciels et outils sont disponibles pour aider les professionnels à automatiser des tâches répétitives, à simplifier la gestion des données et à améliorer l’efficacité globale.

C’est le moment d’exploiter vos compétences systèmes (si vous en avez). Le temps que vous passerez à réfléchir et à mettre en œuvre un moyen d’automatiser une tâche sera très largement rentabilisé !! Croyez moi !

Étape 5 : implémentez les changements graduellement

L’automatisation et la simplification des processus peuvent sembler être une tâche écrasante, mais il est essentiel de les aborder graduellement. Surtout si vous travaillez avec des équipes et que l’automatisation implique un changement dans les habitudes de travail d’autres personnes.

Commencez par automatiser un ou deux processus clés à la fois ou encore quelques tâches individuelles, puis évaluez leur impact sur votre entreprise.

La communication avec les équipes est cruciale à ce moment là. Comme dans toute conduite de changement, l’adhésion des personnes impliquées doit être maximum.

Conclusion

En automatisant vos processus ou vos tâches, en simplifiant votre quotidien, vous pouvez gagner beaucoup de temps, améliorer l’efficacité opérationnelle de votre entreprise, réduire les coûts et vous concentrer sur votre cœur de métier.

Votre valeur ajoutée, celle de votre entreprise, s’en trouve proportionnellement augmentée.

L’auto-diagnostic proposé ici devrait vous aider à identifier les domaines où vous pouvez apporter des améliorations significatives.

N’oubliez pas que l’automatisation est un investissement à long terme qui peut avoir un impact durable sur votre entreprise.

Si vous avez besoin d’aide pour mettre en œuvre ces changements ou si vous avez des questions, n’hésitez pas à me contacter.

axialdata, c’est un cabinet de conseils en systèmes d’information qui vise à remettre l’humain au centre du processus de décision et du process informatique.

En facilitant les tâches automatisables et en simplifiant au maximum l’accès aux données de l’entreprise. Objectifs : rationaliser l’informatique, simplifier le quotidien, gagner de temps, rester serein…

axialdata apporte des solutions sur différents type de projets : gestion de site internet, SEO, référencement, développement, déploiement, gestion de projets, analyse de données, interconnexion de bases des données, automatisation, rationalisation, audit, conseil, sécurité, formation, accompagnement…

 #axialdata #consultant #informatique #entreprise

La dette technique, dans le domaine de l’informatique, est un concept qui fait référence aux conséquences négatives résultant de décisions de développement ou d’administration de systèmes informatiques qui privilégient une solution rapide plutôt qu’une approche à long terme. Elle peut entraîner des coûts élevés, des retards dans les projets et des problèmes de performance. Dans cet article, nous allons examiner la dette technique sous toutes ses facettes, des causes aux solutions, tout en mettant en lumière le rôle essentiel des consultants indépendants dans sa gestion.

Comprendre la Dette Technique

La dette technique se manifeste de plusieurs manières, mais elle a souvent les caractéristiques suivantes :

• Code de mauvaise qualité : Des raccourcis sont pris lors du développement, ce qui entraîne un code difficile à maintenir et à améliorer. A cela peut s’ajouter la succession de multiples développeurs sur un même projet, dû à un taux de turn over élevé.
• Sécurité négligée : Les problèmes de sécurité sont ignorés ou mal gérés, laissant les systèmes vulnérables aux attaques.
• Documentation insuffisante : Le manque de documentation appropriée rend difficile la compréhension et la maintenance des systèmes.
• Technologies obsolètes : Les systèmes utilisent des technologies dépassées, ce qui peut entraîner des problèmes de compatibilité et de performance.
• Processus inadéquats : Les processus de développement et d’administration ne sont pas conformes aux meilleures pratiques, ce qui entraîne des inefficacités.

Les coûts cachés de la Dette Technique

Négliger certains aspects paraissant non essentiels dans les projets informatiques peut sembler être une solution rapide à court terme, mais elle entraîne souvent des coûts cachés importants à long terme. Voici quelques-uns de ces coûts :

1. Coûts de Maintenance Élevés : Le code de mauvaise qualité nécessite plus de temps et d’efforts pour les mises à jour et les corrections de bogues. Les coûts de maintenance peuvent rapidement dépasser les coûts initiaux de développement¹.
2. Pertes de Productivité : Les développeurs passent plus de temps à lutter contre un code de mauvaise qualité au lieu de développer de nouvelles fonctionnalités. Cela ralentit les projets et diminue la productivité de l’équipe².
3. Pannes et Temps d’Arrêt : Les systèmes mal entretenus ont plus de chances de subir des pannes et des temps d’arrêt imprévus. Cela peut entraîner des perturbations coûteuses pour l’entreprise³.
4. Perte de Clients : Les problèmes de performance et de sécurité liés à la dette technique peuvent provoquer la perte de clients. Une expérience utilisateur médiocre peut être dissuasive, et les problèmes de sécurité peuvent compromettre la confiance des clients⁴.
5. Augmentation des Coûts de Support : Une dette technique non résolue peut entraîner une augmentation des coûts de support client. Les clients rencontrent plus de problèmes, ce qui nécessite une assistance accrue⁵.
6. Pénalités Légales : Les lacunes en matière de sécurité et de conformité peuvent entraîner des pénalités légales et des litiges coûteux⁶.

Exemples de Dette Technique

Pour mieux comprendre la dette technique, voici quelques exemples concrets :

1. Une start-up technologique a choisi de retarder la mise en œuvre de pratiques de sécurité robustes pour accélérer le lancement de son produit. Cela a conduit à une violation de données majeure, entraînant des pertes financières et des poursuites judiciaires⁶.
2. Une entreprise a accumulé une dette technique considérable en ne résolvant pas les bugs critiques de son application. Cela a entraîné une augmentation des coûts de support client, qui ont augmenté de 35 % en un an⁵.
3. Une organisation a retardé la mise à jour de son infrastructure serveur obsolète en raison de contraintes budgétaires. Cela a finalement conduit à une panne majeure qui a coûté 500 000 $ en réparations d’urgence et en pertes de revenus³.

Solutions pour Gérer la Dette Technique

Maintenant que nous comprenons les causes et les conséquences de la dette technique, examinons les solutions pour la gérer efficacement.

Audit de la Dette Technique

La première étape consiste à effectuer un audit approfondi de la dette technique existante. Cela peut inclure l’analyse du code source, de la sécurité et de la documentation. Un audit approfondi permet d’identifier les domaines à problèmes et de hiérarchiser les actions nécessaires⁸.

Planification Stratégique

Élaborez une stratégie à long terme pour réduire la dette technique. Identifiez les priorités, allouez les ressources nécessaires et définissez des objectifs clairs pour la gestion de la dette technique.

Priorisation des Problèmes

Tous les problèmes de dette technique ne sont pas égaux. Identifiez les problèmes qui ont le plus grand potentiel de perturbation ou de coût et traitez-les en premier.

Investissement dans les Technologies Modernes

La mise à niveau des systèmes et des technologies obsolètes est souvent nécessaire pour réduire la dette technique. Bien que cela puisse représenter un investissement initial, cela peut réduire les coûts à long terme et améliorer l’efficacité opérationnelle.

Gestion Agile

La gestion agile du développement de logiciels peut contribuer à éviter l’accumulation de dette technique. En adoptant des cycles de développement courts et en intégrant la maintenance continue, les équipes peuvent résoudre rapidement les problèmes au lieu de les repousser.

Formation Continue

Assurez-vous que votre équipe dispose des compétences nécessaires pour éviter l’accumulation de nouvelle dette technique. La formation continue peut aider les développeurs et les administrateurs à rester à jour avec les meilleures pratiques⁹.

Externalisation

Dans certains cas, faire appel à des consultants indépendants spécialisés dans la résolution de dette technique peut être une solution efficace. Ces experts peuvent apporter une perspective externe et des compétences spécialisées pour résoudre rapidement les problèmes.

L’Avantage de Faire Appel à un Consultant Indépendant

Faire appel à un consultant indépendant pour gérer votre dette technique présente plusieurs avantages :

• Expertise Spécialisée : Les consultants indépendants ont souvent une expertise spécialisée dans la résolution de dette technique. Leur connaissance approfondie des meilleures pratiques et des technologies actuelles peut accélérer la résolution des problèmes.
• Perspective Externe : Un consultant indépendant apporte une perspective externe impartiale, ce qui peut aider à identifier les problèmes que les équipes internes pourraient négliger.
• Flexibilité : Vous pouvez faire appel à un consultant indépendant uniquement lorsque vous en avez besoin, ce qui permet de maîtriser les coûts tout en obtenant des résultats rapides.
• Résolution Rapide : Les consultants indépendants sont généralement en mesure de résoudre les problèmes plus rapidement grâce à leur expérience et à leurs compétences spécialisées.
• Transfert de Connaissances : En travaillant avec un consultant indépendant, vos équipes internes peuvent également acquérir de nouvelles compétences et connaissances pour éviter l’accumulation future de dette technique.

Actions de Prévention de la Dette Technique

La meilleure approche pour gérer la dette technique est la prévention. Voici quelques actions de prévention standard que les entreprises peuvent mettre en œuvre :

1. Gestion de Projet Rigoureuse

Mettez en place une gestion de projet rigoureuse qui prend en compte les aspects techniques. Établissez des processus de développement clairs et assurez-vous que les équipes disposent du temps nécessaire pour résoudre correctement les problèmes techniques¹.

2. Formation et Sensibilisation

Fournissez une formation continue à vos équipes pour les maintenir à jour sur les meilleures pratiques en matière de développement et d’administration informatique. Sensibilisez également les parties prenantes aux implications de la dette technique¹.

3. Planification à Long Terme

Élaborez une planification à long terme pour la maintenance et la mise à niveau de vos systèmes. Allouez les ressources nécessaires pour éviter l’accumulation de dette technique et assurez-vous que la direction comprend les avantages à long terme de ces investissements¹.

4. Revues Techniques

Mettez en place des revues techniques régulières pour évaluer la qualité du code, de l’architecture et de la sécurité des systèmes. Identifiez et résolvez les problèmes dès qu’ils sont identifiés¹.

Le Rôle Clé des Consultants Indépendants

Les consultants indépendants jouent un rôle essentiel dans la gestion et la prévention de la dette technique. Voici comment ils peuvent contribuer :

1. Évaluation et Audit

Les consultants indépendants peuvent effectuer des évaluations et des audits approfondis de vos systèmes pour identifier les problèmes de dette technique existants. Cela peut inclure l’analyse du code source, de la sécurité et de la documentation. Un audit approfondi permet d’identifier les domaines à problèmes et de hiérarchiser les actions nécessaires.

2. Planification Stratégique

Élaborez une stratégie à long terme pour réduire la dette technique. Identifiez les priorités, allouez les ressources nécessaires et établissez un plan d’action. Les consultants peuvent fournir une expertise externe précieuse dans ce processus.

3. Mise en Œuvre des Solutions

Les consultants peuvent également participer à la mise en œuvre des solutions. Que ce soit la réécriture de code, la mise en place de pratiques de sécurité robustes ou la mise à niveau de l’infrastructure, leur expertise technique est essentielle pour garantir que les actions de prévention sont correctement mises en place.

4. Formation et Sensibilisation

Les consultants indépendants peuvent former vos équipes aux meilleures pratiques et sensibiliser les parties prenantes aux enjeux de la dette technique. Une meilleure compréhension des problèmes techniques peut contribuer à une prise de décision plus éclairée.

Conclusion

La dette technique est un défi redoutable pour les entreprises aux États-Unis et en Europe, mais elle peut être gérée avec une planification soignée et des investissements judicieux. En reconnaissant l’importance de la dette technique et en prenant des mesures pour la réduire, les entreprises peuvent assurer la stabilité et la pérennité de leur système d’information. Ne laissez pas la dette technique devenir un obstacle insurmontable. Investissez dans l’avenir de votre entreprise en gérant votre dette technique dès aujourd’hui⁷.

Pour en savoir plus sur la gestion de la dette technique et découvrir comment je peux vous aider en tant que consultant indépendant, n’hésitez pas à me contacter. Votre système d’information mérite une gestion proactive pour éviter les pièges de la dette technique.

Sources

1. « The High Cost of Technical Debt » – Harvard Business Review
2. « Technical Debt: What It Is and How to Avoid It » – Smartsheet
3. « The Business Impact of Technical Debt » – Deloitte
4. « The True Cost of Technical Debt » – CA Technologies
5. « Technical Debt and the Cost of Delay » – Cutter Consortium
6. « The Financial Impact of Technical Debt » – CAST
7. « Technical Debt: Chipping Away at the Iceberg » – IEEE Xplore
8. « The Technical Debt Trap: Why Companies Can’t Keep Up » – Harvard Business Review
9. « Managing Technical Debt: Reducing Friction in Software Development » – ACM Digital Library

Lire aussi (en français)

Document de l’ANSSI : Agilité et sécurité numériques

axialdata, c’est un cabinet de conseils en systèmes d’information qui vise à remettre l’humain au centre du processus de décision et du process informatique.

En facilitant les tâches automatisables et en simplifiant au maximum l’accès aux données de l’entreprise. Objectifs : rationaliser l’informatique, simplifier le quotidien, gagner de temps, rester serein…

axialdata apporte des solutions sur différents type de projets : gestion de site internet, SEO, référencement, développement, déploiement, gestion de projets, analyse de données, interconnexion de bases des données, automatisation, rationalisation, audit, conseil, sécurité, formation, accompagnement…

 #axialdata #consultant #informatique #entreprise

Internet ne sait pas tout !!

Chou blanc

Pour les besoins d’un projet spécifique, j’ai fait un choix technologique qui m’a semblé évident sur le moment : associer la librairie React (ou le framework, selon vos convictions) avec les outils Redux RTK Query et la librairie Axios. Et le tout permettant de gérer une authentification JWT sur en tête http…
Je me suis bêtement dit : c’est un choix audacieux mais qui devrait être hyper pertinent. Ne perdons pas de temps à réinventer la roue et voyons ce qu’internet nous propose sur le sujet…
Et là… C’est le drame…
Impossible de trouver sur le net un exemple de ce montage particulier pour en extraire la substantifique moelle… C’est ballot.

Les mains dans le cambouis

Qu’à cela ne tienne. Je veux quand même aller au bout de mon idée. Ça n’est pas parce que je ne trouve aucune référence à cette association technologique que ça n’est pas une bonne idée.
Donc, je me retrousse les manches et je replonge dans les arcanes des documentations Redux, RTK Query et Axios afin de faire cohabiter tout ce petit monde ! Ça ne devrait pas être bien méchant !

Je vous livre ici ma solution, sachant que chaque développeur devra l’adapter à sa propre codebase.

Je zappe l’étape d’installation et paramétrage de React, vous trouverez des tonnes de ressources pour ça.

Commençons par un fichier de base de paramétrage de Axios.
J’ai choisi de le poser dans un répertoire ./src/app/apiHandler

import axios from 'axios'
const BASE_URL = 'http://<URL de votre API>'

export default axios.create({
  baseURL: BASE_URL,
  headers: { 'Content-Type': 'application/json' },
})

Ensuite, dans le même répertoire, j’ai créé le fichier apiSlice.js, qui comme son nom l’indique va regrouper les slice Redux de la partie api.

import { createApi } from '@reduxjs/toolkit/query/react'
import axios from './axios'

const axiosBaseQuery =
  () =>
  async ({ url, method, data, params, headers }) => {
    try {
      const result = await axios({
        url: url,
        method,
        data,
        params,
        headers,
      })
      return { data: result.data }
    } catch (axiosError) {
      let err = axiosError
      return {
        error: {
          status: err.response?.status,
          data: err.response?.data || err,
        },
      }
    }
  }

export const apiSlice = createApi({
  baseQuery: axiosBaseQuery(),
  endpoints: (builder) => ({}),
})

Évidemment, puisque nous utilisons Redux, nous avons un store pour stocker les states.
Je l’ai mis dans ./src/app :

import { configureStore } from '@reduxjs/toolkit'
import { apiSlice } from './apiHandler/apiSlice'
import authSlice from '../features/auth/authSlice'
import userSlice from '../features/profile/userSlice'

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
    auth: authSlice,
    user: userSlice,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
  devTools: true,
})
export default store

Ok, on a une base de travail.
A présent, j’ai besoin d’actions et de reducer pour attaquer mon Api. C’est une API basique à lequelle on envoie l’email et le password dans le corps de la requête et qui retourne un token (le jeton Bearer). Évidemment, dans la vrai vie, on adaptera ce code pour sécuriser l’envoie du mot de passe et on stockera le token dans un cookie.

L’authentification

Pour faire simple et rapide, je ne vais m’attarder ici que sur la partie essentielle du code. Libre à vous de l’adapter à votre frontend. Ici, je fais du basique. On commence par les reducers dédiés à l’authentification :

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  isLoading: false,
  isAuth: false,
  isRemember: true,
  token: null,
  error: '',
}

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    logingPending: (state) => {
      state.isLoading = true
    },
    logingSuccess: (state, action) => {
      state.isLoading = false
      state.isAuth = true
      state.token = action.payload
      state.error = ''
    },
    logingError: (state, action) => {
      state.isLoading = false
      state.error = action.payload
    },
    logingRemember: (state, action) => {
      state.isRemember = action.payload
    },
    logingOut: (state) => {
      state.isLoading = false
      state.isAuth = false
      state.token = null
    },
  },
})

const { actions, reducer } = authSlice
export const {
  logingPending,
  logingSuccess,
  logingError,
  logingOut,
  logingRemember,
} = actions
export default reducer

export const selectCurrentIsAuth = (state) => state.auth.isAuth
export const selectCurrentToken = (state) => state.auth.token

Là, j’ai mes actions qui agiront sur les states et me permettront de stocker le token, notamment, lors de la phase d’authentification.

Ensuite, j’ai besoin d’un slice pour m’interfacer avec l’API et lui transmettre la requête :

import { apiSlice } from '../../app/apiHandler/apiSlice'

export const authApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    login: builder.mutation({
      query: (credentials) => ({
        url: '/user/login',
        method: 'post',
        data: { ...credentials },
      }),
    }),
  }),
})

export const { useLoginMutation } = authApiSlice

On y est presque. Pour simplifier, je ne vais pas détailler la page Login.jsx mais seulement les éléments qui nous intéressent : le formulaire de saisie des éléments d’authentification et le clic sur le bouton permettant de s’authentifier, après avoir renseigné l’email et le mot de passe. Et là, on voit que c’est super light ! Surtout le « handleClic ». C’était le but.

import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { useLoginMutation } from './authApiSlice'
import {
  logingPending,
  logingSuccess,
  logingError
} from './authSlice'

const Login = () => {
  const dispatch = useDispatch()
  let navigate = useNavigate()
  let content = ''
  const [login] = useLoginMutation()
  const { isAuth, isLoading, error, token } = useSelector(
    (state) => state.auth
  )

  const [credentials, setCredientials] = useState({
    email: '',
    password: '',
  })

  // Clear error message if new user input
  useEffect(() => {
    dispatch(logingError(''))
  }, [dispatch, credentials])

  // Handles user input
  const handleChange = ({ currentTarget }) => {
    const { value, name } = currentTarget
    if (name) {
      setCredientials({
        ...credentials,
        [name]: value,
      })
    }
  }

  const handleLogin = async (e) => {
    e.preventDefault()
    dispatch(logingPending())
    try {
      const userData = await login(credentials).unwrap()
      dispatch(logingSuccess(userData.body.token))
      navigate('/profile')
    } catch (error) {
      dispatch(logingError(error.data.message))
    }
  }

  // Handles the standard profile page
  content = isLoading ? (
    <div className="temp-div ">
      <h1>Loading...</h1>
    </div>
  ) : (
    <main className="main bg-dark">
      <section className="sign-in-content">
        <i className="fa fa-user-circle sign-in-icon"></i>
        <h1>Sign In</h1>

        {error && (
          <div className="form-group">
            <div className="alert alert-danger" role="alert">
              {error}
            </div>
          </div>
        )}
        <form onSubmit={handleLogin}>
          <div className="input-wrapper">
            <label htmlFor="email">Email</label>
            <input
              type="email"
              placeholder=""
              id="email"
              name="email"
              onChange={handleChange}
              autoComplete="false"
              required
            />
          </div>
          <div className="input-wrapper">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              placeholder="***********"
              id="password"
              name="password"
              onChange={handleChange}
              autoComplete="false"
              required
            />
          </div>
          <button className="sign-in-button" disabled={isLoading}>
            {isLoading && (
              <span className="spinner-border spinner-border-sm">Loading</span>
            )}
            <span>Sign In</span>
          </button>
        </form>
      </section>
    </main>
  )

  return content
}
export default Login

Encore une fois, tout ceci est à adapter à votre codebase. Il va vous manquer le SCSS, et quelques composants React, comme le loader, par exemple… Mais vous avez saisi l’idée générale.

Conclusion

Finalement, ça n’était pas si compliqué ! Redux va gérer le middleware et les reducers. Les requêtes vers Axios seront générées par RTK Query. L’authentification se fait avec un jeton JWT qui est renvoyé par l’API lors du login et qui sera réutilisé pour les requêtes d’affichage du profil utilisateur, par exemple, ou pour gérer des habilitations à d’autres fonctionnalités de l’application. Idéalement, on donnera une durée de vie à ce token et on le stockera dans un cookie.

L’intérêt de ce montage ? Exploiter la puissance et la performance de Redux et RTK Query et la combiner à la puissance et à la souplesse de Axios, qui lui, nous permettra, entre autres, de gérer des interceptions (pour annuler une requête en cours, par exemple) de façon native.

#dev #reactjs #redux #rtkquery #axios

axialdata, c’est un cabinet de conseils en systèmes d’information qui vise à remettre l’humain au centre du processus de décision et du process informatique.

En facilitant les tâches automatisables et en simplifiant au maximum l’accès aux données de l’entreprise. Objectifs : rationaliser l’informatique, simplifier le quotidien, gagner de temps, rester serein…

axialdata apporte des solutions sur différents type de projets : gestion de site internet, SEO, référencement, développement, déploiement, gestion de projets, analyse de données, interconnexion de bases des données, automatisation, rationalisation, audit, conseil, sécurité, formation, accompagnement…

 #axialdata #consultant #informatique #entreprise