🆕 WA-Tech&DevNews N°12

🆕 WA-Tech&DevNews N°12

Intro

1. Action d’introduire, de faire entrer (qqn). 2. Action de faire adopter (une mode, un produit
)

Et c’est repartie pour une news tech ! J’espĂšre que vous avez passez un bon dĂ©but d’annĂ©e et je vous souhaite un bon nouveau confinement !


IDE

Toujours plus de code Ă  lire entre les lignes

Et si on profitait de ce dĂ©but d’annĂ©e pour mettre Ă  jour ces extensions VS Code ! Pour ceux qui utilisent ce formidable IDE gratuit de Microsoft, je vous propose 12 Plugins !

Visual Studio Code Extensions to Enhance Productivity in 2021 | by Vonage Dev | Jan, 2021 | codeburst


Javascript 

Jaba bien

Aujourd’hui c’est la folie, vous ne me verrez plus pareil aprĂšs ce que je vous prĂ©sente. Et si en 2021 ont se passait de React, Angular ou Vue 


Oui oui j’ai bien dit un site front-end complexe avec pleins d’interactions, des compilateurs, le support de Typescript et pleins d’autres features sans aucun des 3 Leaders du marchĂ© !

Je vous propose 12 alternatives Ă  travers cette article :

12 Alternatives To React, Angular, and Vue | by Ajay Kapoor | JavaScript In Plain English | Dec, 2020 | Medium

Soyons sĂ©rieux, il y a peu de chance que vous vous formiez dessus, mais ĂȘtre capable de prĂ©senter des alternatives Ă  un client vous permet de montrer que vous n’ĂȘtes pas enfermĂ© dans un carcan technologique qui visent Ă  suivre ce que demande le marchĂ©.

Simplifier la déclaration de Class avec Typescript ?

Un petit tour sur Typescript? Je vous propose ma technique pour simplifier la dĂ©claration des classes et des interfaces, le tout dans le mĂȘme fichier avec un constructor simplifiĂ©.

Ce code est tellement simple qui peut ĂȘtre gĂ©nĂ©rĂ© en ligne de commande avec un batch par exemple en lisant les entitĂ©es Java ou PHP

Exemple : avec un fichier user.model.ts

export interface UserI {

 uid: string;

 email: string;

 displayName: string;

 photoUrl: string;

 emailVerified: string;

}

export class User implements UserI{

 uid = ‘’;

 email = ‘’;

 public displayName = ‘’;

 public photoUrl = ’’ ;

 public emailVerified = ‘’;

 // Constructeur simplifiĂ©

 constructor(data: UserI | {} = {}) {

   Object.assign(this, data);

 }

}

Pour ceux qui ne le savait pas, le prototype Object a une mĂ©thode “assign” pour attribuer des datas dans un contexte donnĂ© en faisant le matching par propriĂ©tĂ©s.

Le passage de la valeur “{}” en valeur par dĂ©faut permet de crĂ©er un objet vide en utilisant les valeurs par dĂ©faut dĂ©clarĂ©es sur les propriĂ©tĂ©s de la Class User lorsque vous ne passez pas de paramĂštre.

Et dans le cas d’un passage de paramĂštre on valide l’interface UserI pour ĂȘtre sĂ»r que l’ensemble des champs nĂ©cessaire Ă  bien Ă©tĂ© passĂ© 🙂

Fini les constructor Ă  rallonges pour nos Class quand il n’est pas nĂ©cessaire de faire un traitement particulier. Et dans le cas contraire on peut directement le faire via un setter par exemple 🙂 Il suffit de retirer l’implĂ©mentation de l’interface dans la Class mais de garder la validation des donnĂ©es du constructor avec l’interface. ( Les donnĂ©es seront donc toujours compatibles entre notre interface et la Class. )

export class User {

  _uid: string;

  email: string;

  public displayName: string;

  public photoUrl: string;

  public emailVerified: string;

  constructor(data: UserI | {} = {}) {

    Object.assign(this, data);

  }

  get uid() {

    return this.uid;

  }

  set uid(data:string = ‘’){

   if (data && data !== this._uid) { // On check que la valeur est pas dĂ©jĂ  la mĂȘme

      this._uid = data;

    }

  }

}


PHP – Cas d’étude : Changer l’encryptage personnalisĂ© de mots de passe

Op 10, no. 12 – Le tuto de timothĂ©e

RĂ©cemment, j’ai eu affaire Ă  une problĂ©matique intĂ©ressante : la refonte d’un projet sur un framework dĂ©prĂ©ciĂ© (Kohana) vers quelque chose de moderne (Symfony 5.2). Le problĂšme principal Ă©tant qu’on allait rĂ©cupĂ©rer l’ancienne base de donnĂ©es, avec les utilisateurs et leurs mots de passe. Les mots de passe de l’ancien site Ă©taient encryptĂ©s en sha256, symfony recommande plutĂŽt d’utiliser bcrypt pour les mots de passe. Pas de problĂšme, me dis-je, symfony prĂ©voit dĂ©jĂ  ce genre de cas avec un systĂšme de migration d’encodage. Le principe est simple, vous indiquez Ă  symfony que les mots de passe de certains utilisateurs utilisent un vieil algorithme, et lors de leur prochaine connexion, le mot de passe est rĂ©-encryptĂ© avec le nouvel algorithme. Pour l’utilisateur tout est transparent et son mot de passe reste inchangĂ©.

ProblĂšme, notre algorithme en sha256 utilisait une passphrase personnelle pour encoder tous les mots de passe. La documentation Symfony Ă©tant assez peu claire sur ce sujet, voici donc comment je m’en suis sorti.


Reproduire dans un service le vieil encodage de mot de passe.On va déclarer un nouveau service : LegacyPasswordEncoder, dans notre services.yaml

Ici on a donc :DĂ©clarĂ© un nouveau service appelĂ© app.legacy_pass_encoder (qu’on pourra utiliser plus tard)Qui va aller dans un dossier Security/Encoders/*Qui va prendre en argument notre vieille passphrase, qu’on aura mis ici dans notre .env

*Techniquement c’est le namespace et non l’arborescence mais si vous utilisez des namespaces incohĂ©rents avec l’arborescence de vos dossiers, vous avez des problĂšmes plus importants devant vous.

Regardons maintenant notre fichier LegacyPasswordEncoder.php :

Comme vu précédemment on récupÚre bien notre passphrase présente ($hashKey ici).

La mĂ©thode isPasswordValid vĂ©rifie qu’un mot de passe est correct en encodant le mot de passe saisi et en le comparant Ă  la chaĂźne hashĂ©e stockĂ©e en BDD dans notre table d’utilisateurs (rien de bien surprenant).

Enfin, la mĂ©thode encodePassword encode un mot de passe comme sur l’ancienne version du site avec l’algorithme choisi (ici ‘sha256’, propriĂ©tĂ© de la classe indiquĂ©e plus haut) et notre passphrase secrĂšte :

On voit ici l’utilisation de la fonction hash_hmac avec les paramùtre $this->hashMethod (‘sha256’), $raw (le mot de passe saisi par l’utilisateur sur le formulaire de connection, en clair, et $this->hashKey, notre fameuse passphrase secrùte.

En soit, on pourrait s’arrĂȘter lĂ  et dĂ©finir cette classe comme Ă©tant notre mĂ©thode principale d’encodage des mots de passe et nos utilisateurs gardent leur mot de passe encryptĂ© “à l’ancienne” et tout irait bien, mais le reste est encore plus simple. On va maintenant indiquer Ă  symfony que cette classe est l’ancienne façon d’encoder et qu’il faudra encoder les mots de passe des utilisateurs avec une nouvelle mĂ©thode :

DĂ©taillons un peu plus ici ce qu’on a fait.

  • On a dĂ©fini un encodage baptisĂ© “legacy”, qui correspond au service app.legacy_pass_encoder qu’on a dĂ©fini plus tĂŽt dans notre service.yaml
  • On a indiquĂ© que pour l’entitĂ© App\Entity\User, on utiliserait celui par dĂ©faut de symfony (bcrypt), et qu’il faudrait migrer des vieux mots de passe Ă  partir de l’encodage “legacy”

Et Ă  partir de lĂ , Symfony fait le reste : tous les nouveaux mots de passe seront encodĂ©s en bcrypt, et lorsqu’un utilisateur se connecte :

  • Si son mot de passe est dĂ©jĂ  encodĂ© en bcrypt, rien de particulier ne se passe
  • Si son mot de passe est encodĂ© avec l’encoder “legacy”, il sera mis Ă  jour avec son mot de passe rĂ©-encodĂ© selon l’encoder dĂ©fini pour App\Entity\User, c’est-Ă -dire celui par dĂ©faut (auto) : bcrypt*.

*Il est tout Ă  fait possible de migrer Ă©galement vers un nouvel encodage personnalisĂ©, si vous en faites un vous-mĂȘme 😉

RĂ©daction : William Krieg – TimothĂ©e Garnaud

Relecture : Sonia Klein – TimothĂ©e Garnaud

William

Super HĂ©ro du web / CTO Si vous venez dans nos bureaux je vous fais un cafĂ© ☕ et on discute sur Rocket League

Related Posts

[WA Tools] JSON Visio, pour vous aider a visualiser votre json

[WA Tools] JSON Visio, pour vous aider a visualiser votre json

Le Web3 c’est quoi ?

Le Web3 c’est quoi ?

🆕 WA-Tech&DevNews N°21 0 commentaire

🆕 WA-Tech&DevNews N°21

🆕 WA-Tech&DevNews N°20 0 commentaire

🆕 WA-Tech&DevNews N°20

No Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.