{
"data": [
{
"type": "blog",
"id": "fr/blog/2022/postman-automatic-jwt-authentication-with-expired-token-refresh",
"url": "https://ktherage.github.io/fr/blog/2022/postman-automatic-jwt-authentication-with-expired-token-refresh/",
"attributes": {
"alias": "/blog/postman-automatic-jwt-authentication-with-expired-token-refresh/",
"title": "Postman : Authentification JWT automatique avec renouvellement de token expiré",
"date": "2022-12-20T00:00:00+00:00",
"description": "Une façon rapide et simple de tester les performances de vos appels HTTP.",
"cover": {"image":"img/padlock-fence.jpg","alt":"Cadenas argentés sur une clôture en acier vert","caption":"Photo par Frank McIntyre sur Pexels"},
"published": true,
"tags": ["Postman","Authentication","API","JavaScript"],
"excerpt": "Vous vous êtes toujours demandé comment vous authentifier automatiquement auprès de votre API JWT. Je vais vous dire comment j'ai fait dans cet article.",
"body": "Vous vous êtes toujours demandé comment vous authentifier automatiquement auprès de votre API JWT. Je vais vous dire comment j'ai fait dans cet article.\n\n---\n\n## Petite introduction\n\nVous ne savez peut-être pas ce qu'est Postman, alors je vais vous le décrire.\nVous utilisez probablement un IDE (comme PHPStorm, VSCode,…) pour vous aider pendant la phase de développement de votre projet avec des choses comme l'autocomplétion, l'exécution de tests, le débogage, etc.\n\nPostman est assez similaire à un IDE mais spécialement conçu pour créer des appels API. C'est bien plus agréable à utiliser que la simple commande curl. Apprenez-en plus sur Postman en visitant leur site web https://www.postman.com/.\n\nQu'en est-il des JSON Web Tokens (abrégés en JWT dans le reste de cet article) ? JWT est une norme industrielle open source qui définit un moyen autonome (c'est-à-dire que les informations sont contenues dans le token) de transmettre des informations de manière sécurisée entre les parties sous forme d'objet JSON.\nDans notre cas, ils seront utilisés pour nous donner accès à une API. Apprenez-en plus sur les JSON Web Tokens en visitant leur site web https://jwt.io/.\n\n---\n\n## Le voyage vers ce monde magique\n\n### Au début, était la requête manuelle\nEn tant que développeur web, j'ai l'habitude d'appeler des API (les miennes ou celles de tiers) qui nécessitent un JWT, et je les teste généralement avec Postman.\nPendant de nombreux mois, ou peut-être des années, appeler un point de terminaison sur ces types d'API m'a amené à appliquer manuellement le workflow suivant :\n\n1. Obtenir un token via une requête enregistrée attachée à ma collection Postman (essentiellement m'authentifier auprès de mon API)\n2. Copier la chaîne du token\n3. Créer un en-tête « Authorization »\n4. Coller la chaîne du token comme token « Bearer » comme valeur de mon en-tête « Authorization » (exemple d'en-tête : « Authorization:Bearer tokenCopié »)\n5. Enfin, appeler mon point de terminaison\n\nCe workflow m'obligeait également à mettre à jour manuellement le token JWT lorsqu'il avait expiré. Avec le temps, je suis devenu un peu plus malin en utilisant les variables d'environnement de Postman pour stocker la bonne chaîne de token dans l'environnement approprié (comme avoir un JWT pour l'environnement de staging et un pour la production).\n\nMais il y a quelques mois, je me demandais si, aussi paresseux que je suis, il n'y avait pas une meilleure façon de faire ? J'ai aussi entendu des légendes sur certains développeurs qui appellent leurs API sans se soucier de l'authentification. Alors pourquoi pas moi ?\n\n### Puis est venue la requête automatique\n\nDonc, comme tout bon développeur (ou pas 😛), mon voyage a commencé sur… (vous l'avez deviné 😉 ?) Stack Overflow !\n\nJ'ai trouvé cet article là-bas, et même si ce n'était pas la bonne solution, il m'a donné une idée plus claire de l'endroit où chercher. En fait, pour être honnête, je cherchais un morceau de code que je pourrais rapidement copier-coller les yeux fermés 😅.\n\nJ'ai donc poursuivi ma quête, et j'ai trouvé l'article medium d'Utkarsha Baksh « Using Postman Pre-request Script to Automatically Set Token » qui propose un tutoriel parfait (et pas trop long) étape par étape. Il détaille comment faire une simple requête de connexion automatique avant d'appeler le point de terminaison API souhaité en utilisant un petit script de pré-requête Postman. Si vous êtes nouveau sur ce concept de « script de pré-requête », vous devriez vraiment lire cet article ou jeter un œil à la documentation de Postman.\n\nSuper plus, il y a un morceau de code ! Je l'ai donc copié/collé, suivi les étapes, adapté à mes cas d'utilisation, et ça a marché 🎊 🎉 🪩 !\n\nJe n'y suis jamais revenu jusqu'à… ce que je perde ce script de pré-requête à cause d'une réinstallation de Postman et de l'absence de version payante 🫣 😩.\n\nCela nous amène à ce jour (12/12/2022 😉) où je refaisais la même routine manuelle et me souvenais de ce bon vieux temps où c'était automatique.\n\n### Enfin, la consécration\n\nDonc, une fois de plus, j'ai fait mon sac et je suis reparti en voyage vers ce merveilleux pays. Le voyage a été beaucoup plus rapide cette fois 😅 et j'ai trouvé un nouveau morceau de code qui semblait plus détaillé et plus respectueux du mécanisme de rafraîchissement de JWT en ne s'authentifiant pas toujours auprès de l'API quand le token est encore valide (c'est-à-dire pas expiré).\n\nCe code peut être trouvé ici : https://gist.github.com/Glideh/0f24b8973bb7d79ae8124fa160966df1\n\nLe seul inconvénient que j'ai trouvé en l'utilisant directement est qu'il ne profitait pas du refresh token JWT. Je l'ai donc copié/collé et j'ai fait quelques modifications pour permettre un rafraîchissement automatique du token.\n\n---\n\n## Le code\nPour obtenir un tutoriel complet sur la façon de définir le code suivant comme script de pré-requête Postman, lisez l'article medium d'Utkarsha Baksh : « Using Postman Pre-request Script to Automatically Set Token »\n\n```javascript\n/**\n * fill in the blanks\n */\nconst TOKEN_ENV_VAR_NAME = 'token_client'\nconst LOGIN_URL = pm.environment.get("host") + "/api/v2/authenticate"\nconst LOGIN_BODY={\n "app_id": pm.environment.get("app_id"),\n "app_secret": pm.environment.get("app_secret")\n}\n\nconst REFRESH_TOKEN_ENV_VAR_NAME = 'refresh_token_client'\nconst REFRESH_URL = pm.environment.get("host") + "/api/v2/authenticate/refresh"\nconst REFRESH_BODY={\n "refreshToken": pm.environment.get(REFRESH_TOKEN_ENV_VAR_NAME)\n}\n\nfunction isExpiredToken() {\n const jwt = pm.environment.get(TOKEN_ENV_VAR_NAME)\n const payload = JSON.parse(atob(jwt.split('.')[1]));\n // Expiration timestamp (in seconds) is located in the `exp` key\n const millisecBeforeExpiration = (payload.exp * 1000) - (new Date()).getTime();\n if (millisecBeforeExpiration <= 0) {\n console.log("Token is expired");\n return true;\n }\n\n console.log(`Token is still valid ! Expiring in ${millisecBeforeExpiration / 1000} seconds`);\n return false;\n}\n\nfunction tokensExists() {\n const token = pm.environment.get(TOKEN_ENV_VAR_NAME)\n const refreshToken = pm.environment.get(REFRESH_TOKEN_ENV_VAR_NAME)\n if (!token) {\n console.log("Token not found");\n return false;\n }\n\n if (!refreshToken) {\n console.log("Refresh token not found");\n return false;\n }\n\n return true;\n}\n\nfunction login() {\n console.log("Authenticating")\n const body = JSON.stringify(LOGIN_BODY);\n const request = {\n url: LOGIN_URL,\n method: "POST",\n header: {\n "Content-Type": "application/json",\n "Accept": "application/json",\n },\n body,\n };\n\n pm.sendRequest(request, (err, res) => {\n if (err || res.code !== 200) {\n console.log("Login failed:");\n console.log(err);\n console.log(res);\n\n throw new Error('Login failed, check postman\\'s console for details')\n }\n pm.environment.set(TOKEN_ENV_VAR_NAME, res.json().token);\n console.log("Token saved");\n pm.environment.set(REFRESH_TOKEN_ENV_VAR_NAME, res.json().refreshToken);\n console.log("Refresh Token saved");\n });\n}\n\nfunction refresh() {\n console.log("Refreshing token")\n const body = JSON.stringify(REFRESH_BODY);\n const request = {\n url: REFRESH_URL,\n method: "POST",\n header: {\n "Content-Type": "application/json",\n "Accept": "application/json",\n },\n body,\n };\n\n pm.sendRequest(request, (err, res) => {\n if (res.code === 498) {\n console.log('Refresh token has expired or is invalid')\n login()\n return\n }\n if (err || res.code !== 200) {\n console.log("Refreshing token failed:");\n console.log(err);\n console.log(res);\n\n throw new Error('Refreshing token failed, check postman\\'s console for details')\n }\n console.log("Token refreshed");\n pm.environment.set(TOKEN_ENV_VAR_NAME, res.json().token);\n });\n}\n\nif (tokensExists()) {\n if (!isExpiredToken()) {\n return\n }\n\n refresh()\n} else {\n login()\n}\n```\n\n---\n\n## Remerciements\n\nPostman pour avoir produit des outils qui facilitent la vie des développeurs d'API\n\nStack overflow et sa communauté pour être la bouée de sauvetage des développeurs\n\nPierre de LESPINAY pour le Gist qui m'a inspiré ce morceau de code et l'article actuel\n\nL'équipe SensioLabs pour leur aide et leurs relectures sur cet article"
}
}
]
}