Thierry  Perret

Thierry Perret

1658990713

Comment S'authentifier Avec JWT Pour Votre Site Web

Depuis l'avènement du développement d'applications Web, de nombreuses informations sensibles sont envoyées via Internet, ce qui rend le concept d'authentification quelque chose que chaque développeur Web devrait comprendre et appliquer dans une application pour sécuriser les informations confiées à l'application par l'utilisateur. Dans cet article, nous examinerons un moyen d'authentification pour les applications Web appelé authentification JWT. Comparée à d'autres, l'authentification JWT est devenue un favori en raison de ses nombreux avantages pour les développeurs.

Avant de plonger dans le codage, nous définirons quelques termes et concepts clés pour nous aider à comprendre le fonctionnement de l'authentification JWT, après quoi nous intégrerons cette forme d'authentification dans un projet qui a un serveur créé avec Node.js, et un front-end a créé avec React.js un framework largement utilisé (en fait mon préféré) pour le développement front-end.

Pour pouvoir suivre le reste de l'article, vous avez besoin des éléments suivants :

  • Connaissance pratique de JavaScript
  • Une bonne compréhension de Node.js et de son utilisation dans la création d'un serveur.
  • Compréhension pratique de la création de bases de données.
  • Connaissance de base de React.js
  • Postman et connaissances sur l'utilisation de Postman.

Qu'est-ce que JWT et comment ça marche ?

JWT signifie JSON Web Token, une norme ouverte utilisée pour partager des informations de sécurité en tant qu'objet JSON entre un client et un serveur. La présence d'un JWT dans une requête au serveur du client signifie que l'information est vérifiée, et sa crédibilité est établie car elle est signée numériquement à l'aide d'un secret écrit avec un algorithme cryptographique pour s'assurer que les revendications ne sont pas altérées après la jeton est émis. Bien qu'aucun intermédiaire ne puisse modifier un JWT, il est recommandé de l'utiliser dans un environnement HTTPS car le JWT n'est pas chiffré.

L'authentification JWT est un mécanisme d'authentification sans état couramment utilisé comme session sans état côté client. Le serveur n'a pas besoin de s'appuyer entièrement sur une base de données pour enregistrer les informations de session. Les informations de session sont stockées côté client ; par conséquent, une recherche dans la base de données n'est pas nécessaire pour vérifier l'identité de l'utilisateur demandeur. Cela fonctionne comme ceci :

  • Un utilisateur se connecte à un site Web ou à une application avec un e-mail/nom d'utilisateur et un mot de passe pour prouver son identité.
  • Le serveur confirme l'identité de l'utilisateur et renvoie un jeton d'accès unique contenant une référence à son identité.
  • Le client inclut ensuite ce jeton d'accès unique avec chaque demande au serveur, donc si le jeton d'accès est erroné/modifié, l'accès est refusé au client.
  • Pour les routes protégées, un middleware d'authentification est créé dans le serveur pour affirmer la présence d'un jeton valide. Le serveur peut en outre utiliser l'identité pour implémenter des autorisations plus granulaires.

première

Avantages et inconvénients de l'authentification JWT

Il y a plusieurs avantages :

  • Plus compact : JSON est moins verbeux que XML, donc lorsqu'il est encodé, un JWT est plus petit qu'un jeton SAML. Cela fait de JWT un excellent choix à transmettre dans les environnements HTML et HTTP.
  • Plus sécurisé : les JWT peuvent utiliser une paire de clés publique/privée comme certificat X.509 pour la signature. Un JWT peut également être signé symétriquement par un secret partagé à l'aide de l'algorithme HMAC. Et tandis que les jetons SAML peuvent utiliser des paires de clés publiques/privées comme JWT, signer XML avec XML Digital Signature sans introduire de failles de sécurité obscures est très difficile par rapport à la simplicité de signature JSON. En savoir plus sur les algorithmes de signature JWT ici .
  • Plus courant : les analyseurs JSON sont courants dans la plupart des langages de programmation, car ils correspondent directement aux objets. Inversement, XML n'a pas de mappage naturel de document à objet, ce qui facilite le travail avec JWT par rapport aux assertions SAML.
  • Plus facile à traiter : JWT est utilisé à l'échelle d'Internet. Cela signifie qu'il est plus facile à traiter sur les appareils des utilisateurs, en particulier les mobiles.

Cependant, il y a aussi quelques inconvénients :

  • Si un client doit être bloqué ou désactivé, l'application devra attendre l'expiration du jeton pour que le verrouillage soit pleinement effectif.
  • Si un client a besoin de changer son mot de passe, et qu'une authentification a été effectuée au préalable, un jeton généré avec le mot de passe précédent sera toujours valide jusqu'à expiration.
  • L'implémentation standard ne spécifie aucun jeton « d'actualisation ». A l'expiration, le client devra donc se ré-authentifier.
  • Il est impossible de détruire un token sans violer l'aspect "stateless" des tokens JWT : Même si le token est supprimé du navigateur, il reste valide jusqu'à expiration, donc aucune véritable déconnexion n'est possible.

Pour faire face à ces défis, certaines bibliothèques JWT ajoutent une couche au-dessus de la spécification standard, permettant des mécanismes d'actualisation des jetons et certaines fonctionnalités comme forcer un utilisateur à se ré-authentifier. Voici quelques recommandations pour les développeurs JWT.

Qu'est-ce que la structure JWT ?

Un jeton Web JSON dans sa forme compacte se compose de trois parties séparées par des points, qui sont :

  • Entête
  • Charge utile
  • Signature

L'en-tête contient deux parties : le type de jeton et l'algorithme de signature. L'algorithme de signature peut être HMAC SHA256 ou RSA. Ce JSON est ensuite encodé en Base64Url pour former la première partie du JWT. Voici un exemple d'en-tête :

{
  "alg" : "HS256",
  "typ": "JWT"
}

La charge utile contient principalement des réclamations. Les revendications sont des déclarations concernant un élément, dans notre cas, l'utilisateur, et des données supplémentaires. Le serveur utilise généralement ces informations pour vérifier que l'utilisateur est autorisé à effectuer l'action qu'il demande. Par exemple:

{
  "iss":" Signin route",
  "name": "janet",
  "sub":"2"
  "admin": true
}

Enfin, la signature est utilisée pour vérifier que le message n'a pas été modifié, et elle est également utilisée pour vérifier que l'expéditeur du JWT est celui qu'il prétend être. La signature est créée en prenant l'en-tête encodé, la charge utile encodée, un secret et l'algorithme spécifié dans l'en-tête et en encodant cela. Par exemple, si vous souhaitez utiliser l'algorithme HMAC SHA256, la signature sera créée de cette manière :

HMAC256(
    base64UrlEncode(header) + "." + base64UrlEncode(payload), secret
)

Une fois tout cela fait, nous obtenons trois chaînes Base64Url représentant les trois parties différentes d'un jeton JWT séparées par des points qui peuvent être facilement transmises dans les environnements HTML et HTTP. Voici un exemple de https://token.dev/paseto/ montrant l'en-tête, la charge utile, la signature et nos trois chaînes Base64Url séparées par des points.

2

Intégration de l'authentification JWT dans le back-end

Node.js est un environnement d'exécution JavaScript open source, multiplateforme et back-end qui exécute du code JavaScript en dehors d'un navigateur Web. Il a été conçu pour créer des applications réseau évolutives. Pour moi, Node.js est le React du développement web back-end. À l'aide de Node.js, nous allons créer nos routes de connexion, d'enregistrement et d'authentification qui recevront les informations de l'utilisateur depuis le front-end, hacheront les mots de passe si nécessaire, créeront, vérifieront et authentifieront l'utilisateur chaque fois que l'utilisateur se connectera et demandera à accéder à notre route protégée.

Aux côtés de Node.js pour ce projet, nous avons utilisé PostgreSQL pour créer notre base de données ; vous pouvez apprendre à le faire ici , Knex.js pour la création de requêtes et bcrypt.js pour hacher nos mots de passe afin que si notre base de données est compromise, le mot de passe de l'utilisateur ne soit pas disponible pour le pirate.

Création de notre route d'inscription

Tout d'abord, nous devons installer la bibliothèque JWT et les autres dépendances dont nous aurons besoin pour ce projet. Pour ce faire, nous allons exécuter la commande suivante :

1npm i jsonwebtoken bcrypt knex postgres --save

Nous stockerons ensuite notre secret dans notre fichier .env ;

1REACT_APP_TOKEN= "jwtsecrettutorial"

Nous allons créer notre point de terminaison d'enregistrement qui recevra les informations de l'utilisateur à partir de la requête frontale, hachera le mot de passe, enverra les informations à notre base de données, créera notre jeton JWT et répondra au frontal avec notre jeton JWT ;

app.post("/register", (req, res, db, bcrypt, jwt) => {
  const { email, name, password } = req.body;

  if (!email || !name || !password) {
    return res
      .status(400)
      .json(`${console.log(req.body)}incorrect form submission`);
  }

  //Hashing our password with bcrypt
  const hash = bcrypt.hashSync(password);
  db.transaction((trx) => {
    trx
      .insert({
        hash: hash,
        email: email,
      })

      //Inserting our user's info into our login and user table
      .into("login")
      .returning("email")
      .then((loginEmail) => {
        return trx("users").returning("*").insert({
          email: loginEmail[0].email,
          name: name,
          joined: new Date(),
        });
      })
      //creating the JWT token and responding to the front end with our token
      .then((user) => {
        const accessToken = jwt.sign({ email }, process.env.REACT_APP_TOKEN, {
          expiresIn: "3000s",
        });
        res.json({ accessToken });
      });
  })
    .then(trx.commit)
    .catch(trx.rollback);
});

3

Les informations du client ont été envoyées au serveur à l'aide de Postman dans l'image ci-dessus. Après avoir enregistré les informations du client, le serveur répond avec le jeton JWT pour une demande ultérieure.

Création de notre route de connexion/connexion

Pour la route de connexion, nous allons créer notre point de terminaison pour recevoir les informations de l'utilisateur à partir de la demande frontale, vérifier si l'utilisateur existe dans notre base de données, et si l'utilisateur existe, un jeton JWT est créé et envoyé au côté client. ; ce jeton sera utilisé pour une requête API ultérieure.

app.post("/signin", (req, res, db, bcrypt, jwt) => {
  const { email, password } = req.body;
  if (!email || !password) {
    return res.status(400).json("incorrect form submission");
  }
  //Getting the user info from the database
  db.select("email", "hash")
    .from("login")
    .where("email", "=", email)
    .then((data) => {
      //comparing the password rech the one in the database using bcrypt
      const isValid = bcrypt.compareSync(password, data[0].hash);
      if (isValid) {
        return db
          .select("*")
          .from("users")
          .where("email", "=", email)
          .then((user) => {
            const accessToken = jwt.sign(
              { email },
              process.env.REACT_APP_TOKEN,
              { expiresIn: "3000s" }
            );
            res.json({ accessToken });
          })
          .catch((err) => res.status(400).json(`${err}wrong credentials`));
      } else {
        res.status(400).json(`${err}wrong credentials`);
      }
    })
    .catch((err) => res.status(400).json(`${err}wrong credentials`));
});

4

Dans l'image ci-dessus, les informations du client ont été envoyées au serveur à l'aide de Postman. Après vérification et confirmation des informations du client, le serveur a répondu avec le jeton JWT pour les demandes ultérieures.

Création de notre route d'authentification

Pour l'authentification, nous allons créer un middleware qui effectue l'authentification chaque fois qu'une demande est faite via notre route protégée. Cette route nécessitera le jeton d'utilisateur dans l'en-tête de la demande en tant que "x-auth-token" pour l'autorisation. Le jeton sera obtenu à partir de l'en-tête et vérifié par notre middleware. Vous pouvez en savoir plus sur l'autorisation HTTP via un en-tête de requête ici . Pour créer le middleware, utilisez le code ci-dessous ;

require("dotenv").config();
var jwt = require("jsonwebtoken");

module.exports = {
  jwtauth(req, res, next) {
    const token = req.header("x-auth-token");
    if (!token) {
      res.status(401).json("token not found");
    }
    try {
      const user = jwt.verify(token, process.env.REACT_APP_TOKEN);
      req.user = user.email;
      console.log("middleware is working");
      next();
    } catch (error) {
      res.status(401).json("invalid token");
    }
  },
};

Nous pouvons maintenant ajouter une route protégée à notre serveur ; une demande à cette route passera d'abord par notre middleware avant que l'accès ne soit accordé ou refusé.

const jwtauth = require("./middleware/jwtauth");

app.post("/protected", jwtauth, (req, res) => {
  res.status(200).send("Here's the info you requested ");
});

Si une demande est faite sans fournir de jeton en utilisant le 'x-access-token' dans l'en-tête, un message d'erreur sera renvoyé disant « jeton introuvable ».

5

Dans l'image ci-dessus, une requête est envoyée au serveur via Postman sans le jeton dans l'en-tête, et le serveur répond avec un message d'erreur indiquant que jeton introuvable. Si un jeton est fourni dans l'en-tête et que ce jeton est correct, il permet au client d'accéder à la route protégée, mais si le jeton est erroné, il répond par un message d'erreur disant « jeton invalide ».

6

Dans l'image ci-dessus, une requête est envoyée au serveur via Postman avec un jeton incorrect dans l'en-tête, et le serveur répond avec un message d'erreur indiquant un jeton invalide.

Intégration de l'authentification JWT dans le frontal

Pour ce faire, vous auriez besoin d'installer Axios dans notre front-end créé avec React.js en faisant;

1npm i axios

Dans notre page d'enregistrement/d'inscription dans notre React.js, nous voulons que notre côté client stocke le JWT qu'il reçoit du côté serveur après que leurs informations soient stockées dans la base de données. Ce jeton sera utilisé pour les requêtes API ultérieures, nous ajoutons donc cette fonction à notre code ;

onSubmitSignUp = () => {
  console.log(this.state);
  axios
    .post("http://localhost:3001/register", {
      email: this.state.email,
      password: this.state.password,
      name: this.state.name,
      enteries: this.state.enteries,
    })

    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      } else {
        console.log("no response");
      }
    });
};

Ceci fait, le jeton est stocké dans notre stockage local côté client. Nous ferons la même chose pour notre page de connexion afin qu'un jeton soit créé pour les appels d'API ultérieurs lorsqu'un utilisateur déjà existant se connecte.

onSubmitSignIn = () => {
  console.log(this.state);
  axios
    .post("http://localhost:3001/signin", {
      email: this.state.email,
      password: this.state.password,
    })

    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      } else {
        console.log("no response");
      }
    });
};

Pour notre route d'authentification, nous devons récupérer le jeton déjà stocké de notre stockage qui sera ensuite envoyé côté serveur pour authentification et action ultérieure.

export default function authHeader() {
  const user = JSON.parse(localStorage.getItem("user"));
  if (useraccessToken) {
    return { "x-auth-token": user.accessToken };
  }
}
axios.post("http://localhost:3001/protected", { header: authHeader() });

Avec tout cela fait, nous avons mis en place avec succès un système d'authentification fonctionnel qui fonctionne avec notre node.js (back-end), crée notre jeton et l'envoie à notre react.js (front-end), qui stocke ensuite notre jeton et l'utilise pour les requêtes ultérieures vers notre route protégée.

Conclusion

Jusqu'à présent, nous avons examiné l'authentification JWT, la structure JWT, ce qu'est l'authentification JWT, son fonctionnement et comment l'ajouter à nos routes node.js côté serveur et à notre application React.js. Vous pouvez en savoir plus sur JWT et les bibliothèques et outils qui facilitent et sécurisent votre utilisation de l'authentification JWT ici . J'espère que ce tutoriel vous a été utile, amusez-vous à authentifier les demandes avec les jetons Web JSON.

Lien : https://blog.openreplay.com/authentication-with-jwt-for-your-website

#jwt #authentication

What is GEEK

Buddha Community

Comment S'authentifier Avec JWT Pour Votre Site Web
Thierry  Perret

Thierry Perret

1658990713

Comment S'authentifier Avec JWT Pour Votre Site Web

Depuis l'avènement du développement d'applications Web, de nombreuses informations sensibles sont envoyées via Internet, ce qui rend le concept d'authentification quelque chose que chaque développeur Web devrait comprendre et appliquer dans une application pour sécuriser les informations confiées à l'application par l'utilisateur. Dans cet article, nous examinerons un moyen d'authentification pour les applications Web appelé authentification JWT. Comparée à d'autres, l'authentification JWT est devenue un favori en raison de ses nombreux avantages pour les développeurs.

Avant de plonger dans le codage, nous définirons quelques termes et concepts clés pour nous aider à comprendre le fonctionnement de l'authentification JWT, après quoi nous intégrerons cette forme d'authentification dans un projet qui a un serveur créé avec Node.js, et un front-end a créé avec React.js un framework largement utilisé (en fait mon préféré) pour le développement front-end.

Pour pouvoir suivre le reste de l'article, vous avez besoin des éléments suivants :

  • Connaissance pratique de JavaScript
  • Une bonne compréhension de Node.js et de son utilisation dans la création d'un serveur.
  • Compréhension pratique de la création de bases de données.
  • Connaissance de base de React.js
  • Postman et connaissances sur l'utilisation de Postman.

Qu'est-ce que JWT et comment ça marche ?

JWT signifie JSON Web Token, une norme ouverte utilisée pour partager des informations de sécurité en tant qu'objet JSON entre un client et un serveur. La présence d'un JWT dans une requête au serveur du client signifie que l'information est vérifiée, et sa crédibilité est établie car elle est signée numériquement à l'aide d'un secret écrit avec un algorithme cryptographique pour s'assurer que les revendications ne sont pas altérées après la jeton est émis. Bien qu'aucun intermédiaire ne puisse modifier un JWT, il est recommandé de l'utiliser dans un environnement HTTPS car le JWT n'est pas chiffré.

L'authentification JWT est un mécanisme d'authentification sans état couramment utilisé comme session sans état côté client. Le serveur n'a pas besoin de s'appuyer entièrement sur une base de données pour enregistrer les informations de session. Les informations de session sont stockées côté client ; par conséquent, une recherche dans la base de données n'est pas nécessaire pour vérifier l'identité de l'utilisateur demandeur. Cela fonctionne comme ceci :

  • Un utilisateur se connecte à un site Web ou à une application avec un e-mail/nom d'utilisateur et un mot de passe pour prouver son identité.
  • Le serveur confirme l'identité de l'utilisateur et renvoie un jeton d'accès unique contenant une référence à son identité.
  • Le client inclut ensuite ce jeton d'accès unique avec chaque demande au serveur, donc si le jeton d'accès est erroné/modifié, l'accès est refusé au client.
  • Pour les routes protégées, un middleware d'authentification est créé dans le serveur pour affirmer la présence d'un jeton valide. Le serveur peut en outre utiliser l'identité pour implémenter des autorisations plus granulaires.

première

Avantages et inconvénients de l'authentification JWT

Il y a plusieurs avantages :

  • Plus compact : JSON est moins verbeux que XML, donc lorsqu'il est encodé, un JWT est plus petit qu'un jeton SAML. Cela fait de JWT un excellent choix à transmettre dans les environnements HTML et HTTP.
  • Plus sécurisé : les JWT peuvent utiliser une paire de clés publique/privée comme certificat X.509 pour la signature. Un JWT peut également être signé symétriquement par un secret partagé à l'aide de l'algorithme HMAC. Et tandis que les jetons SAML peuvent utiliser des paires de clés publiques/privées comme JWT, signer XML avec XML Digital Signature sans introduire de failles de sécurité obscures est très difficile par rapport à la simplicité de signature JSON. En savoir plus sur les algorithmes de signature JWT ici .
  • Plus courant : les analyseurs JSON sont courants dans la plupart des langages de programmation, car ils correspondent directement aux objets. Inversement, XML n'a pas de mappage naturel de document à objet, ce qui facilite le travail avec JWT par rapport aux assertions SAML.
  • Plus facile à traiter : JWT est utilisé à l'échelle d'Internet. Cela signifie qu'il est plus facile à traiter sur les appareils des utilisateurs, en particulier les mobiles.

Cependant, il y a aussi quelques inconvénients :

  • Si un client doit être bloqué ou désactivé, l'application devra attendre l'expiration du jeton pour que le verrouillage soit pleinement effectif.
  • Si un client a besoin de changer son mot de passe, et qu'une authentification a été effectuée au préalable, un jeton généré avec le mot de passe précédent sera toujours valide jusqu'à expiration.
  • L'implémentation standard ne spécifie aucun jeton « d'actualisation ». A l'expiration, le client devra donc se ré-authentifier.
  • Il est impossible de détruire un token sans violer l'aspect "stateless" des tokens JWT : Même si le token est supprimé du navigateur, il reste valide jusqu'à expiration, donc aucune véritable déconnexion n'est possible.

Pour faire face à ces défis, certaines bibliothèques JWT ajoutent une couche au-dessus de la spécification standard, permettant des mécanismes d'actualisation des jetons et certaines fonctionnalités comme forcer un utilisateur à se ré-authentifier. Voici quelques recommandations pour les développeurs JWT.

Qu'est-ce que la structure JWT ?

Un jeton Web JSON dans sa forme compacte se compose de trois parties séparées par des points, qui sont :

  • Entête
  • Charge utile
  • Signature

L'en-tête contient deux parties : le type de jeton et l'algorithme de signature. L'algorithme de signature peut être HMAC SHA256 ou RSA. Ce JSON est ensuite encodé en Base64Url pour former la première partie du JWT. Voici un exemple d'en-tête :

{
  "alg" : "HS256",
  "typ": "JWT"
}

La charge utile contient principalement des réclamations. Les revendications sont des déclarations concernant un élément, dans notre cas, l'utilisateur, et des données supplémentaires. Le serveur utilise généralement ces informations pour vérifier que l'utilisateur est autorisé à effectuer l'action qu'il demande. Par exemple:

{
  "iss":" Signin route",
  "name": "janet",
  "sub":"2"
  "admin": true
}

Enfin, la signature est utilisée pour vérifier que le message n'a pas été modifié, et elle est également utilisée pour vérifier que l'expéditeur du JWT est celui qu'il prétend être. La signature est créée en prenant l'en-tête encodé, la charge utile encodée, un secret et l'algorithme spécifié dans l'en-tête et en encodant cela. Par exemple, si vous souhaitez utiliser l'algorithme HMAC SHA256, la signature sera créée de cette manière :

HMAC256(
    base64UrlEncode(header) + "." + base64UrlEncode(payload), secret
)

Une fois tout cela fait, nous obtenons trois chaînes Base64Url représentant les trois parties différentes d'un jeton JWT séparées par des points qui peuvent être facilement transmises dans les environnements HTML et HTTP. Voici un exemple de https://token.dev/paseto/ montrant l'en-tête, la charge utile, la signature et nos trois chaînes Base64Url séparées par des points.

2

Intégration de l'authentification JWT dans le back-end

Node.js est un environnement d'exécution JavaScript open source, multiplateforme et back-end qui exécute du code JavaScript en dehors d'un navigateur Web. Il a été conçu pour créer des applications réseau évolutives. Pour moi, Node.js est le React du développement web back-end. À l'aide de Node.js, nous allons créer nos routes de connexion, d'enregistrement et d'authentification qui recevront les informations de l'utilisateur depuis le front-end, hacheront les mots de passe si nécessaire, créeront, vérifieront et authentifieront l'utilisateur chaque fois que l'utilisateur se connectera et demandera à accéder à notre route protégée.

Aux côtés de Node.js pour ce projet, nous avons utilisé PostgreSQL pour créer notre base de données ; vous pouvez apprendre à le faire ici , Knex.js pour la création de requêtes et bcrypt.js pour hacher nos mots de passe afin que si notre base de données est compromise, le mot de passe de l'utilisateur ne soit pas disponible pour le pirate.

Création de notre route d'inscription

Tout d'abord, nous devons installer la bibliothèque JWT et les autres dépendances dont nous aurons besoin pour ce projet. Pour ce faire, nous allons exécuter la commande suivante :

1npm i jsonwebtoken bcrypt knex postgres --save

Nous stockerons ensuite notre secret dans notre fichier .env ;

1REACT_APP_TOKEN= "jwtsecrettutorial"

Nous allons créer notre point de terminaison d'enregistrement qui recevra les informations de l'utilisateur à partir de la requête frontale, hachera le mot de passe, enverra les informations à notre base de données, créera notre jeton JWT et répondra au frontal avec notre jeton JWT ;

app.post("/register", (req, res, db, bcrypt, jwt) => {
  const { email, name, password } = req.body;

  if (!email || !name || !password) {
    return res
      .status(400)
      .json(`${console.log(req.body)}incorrect form submission`);
  }

  //Hashing our password with bcrypt
  const hash = bcrypt.hashSync(password);
  db.transaction((trx) => {
    trx
      .insert({
        hash: hash,
        email: email,
      })

      //Inserting our user's info into our login and user table
      .into("login")
      .returning("email")
      .then((loginEmail) => {
        return trx("users").returning("*").insert({
          email: loginEmail[0].email,
          name: name,
          joined: new Date(),
        });
      })
      //creating the JWT token and responding to the front end with our token
      .then((user) => {
        const accessToken = jwt.sign({ email }, process.env.REACT_APP_TOKEN, {
          expiresIn: "3000s",
        });
        res.json({ accessToken });
      });
  })
    .then(trx.commit)
    .catch(trx.rollback);
});

3

Les informations du client ont été envoyées au serveur à l'aide de Postman dans l'image ci-dessus. Après avoir enregistré les informations du client, le serveur répond avec le jeton JWT pour une demande ultérieure.

Création de notre route de connexion/connexion

Pour la route de connexion, nous allons créer notre point de terminaison pour recevoir les informations de l'utilisateur à partir de la demande frontale, vérifier si l'utilisateur existe dans notre base de données, et si l'utilisateur existe, un jeton JWT est créé et envoyé au côté client. ; ce jeton sera utilisé pour une requête API ultérieure.

app.post("/signin", (req, res, db, bcrypt, jwt) => {
  const { email, password } = req.body;
  if (!email || !password) {
    return res.status(400).json("incorrect form submission");
  }
  //Getting the user info from the database
  db.select("email", "hash")
    .from("login")
    .where("email", "=", email)
    .then((data) => {
      //comparing the password rech the one in the database using bcrypt
      const isValid = bcrypt.compareSync(password, data[0].hash);
      if (isValid) {
        return db
          .select("*")
          .from("users")
          .where("email", "=", email)
          .then((user) => {
            const accessToken = jwt.sign(
              { email },
              process.env.REACT_APP_TOKEN,
              { expiresIn: "3000s" }
            );
            res.json({ accessToken });
          })
          .catch((err) => res.status(400).json(`${err}wrong credentials`));
      } else {
        res.status(400).json(`${err}wrong credentials`);
      }
    })
    .catch((err) => res.status(400).json(`${err}wrong credentials`));
});

4

Dans l'image ci-dessus, les informations du client ont été envoyées au serveur à l'aide de Postman. Après vérification et confirmation des informations du client, le serveur a répondu avec le jeton JWT pour les demandes ultérieures.

Création de notre route d'authentification

Pour l'authentification, nous allons créer un middleware qui effectue l'authentification chaque fois qu'une demande est faite via notre route protégée. Cette route nécessitera le jeton d'utilisateur dans l'en-tête de la demande en tant que "x-auth-token" pour l'autorisation. Le jeton sera obtenu à partir de l'en-tête et vérifié par notre middleware. Vous pouvez en savoir plus sur l'autorisation HTTP via un en-tête de requête ici . Pour créer le middleware, utilisez le code ci-dessous ;

require("dotenv").config();
var jwt = require("jsonwebtoken");

module.exports = {
  jwtauth(req, res, next) {
    const token = req.header("x-auth-token");
    if (!token) {
      res.status(401).json("token not found");
    }
    try {
      const user = jwt.verify(token, process.env.REACT_APP_TOKEN);
      req.user = user.email;
      console.log("middleware is working");
      next();
    } catch (error) {
      res.status(401).json("invalid token");
    }
  },
};

Nous pouvons maintenant ajouter une route protégée à notre serveur ; une demande à cette route passera d'abord par notre middleware avant que l'accès ne soit accordé ou refusé.

const jwtauth = require("./middleware/jwtauth");

app.post("/protected", jwtauth, (req, res) => {
  res.status(200).send("Here's the info you requested ");
});

Si une demande est faite sans fournir de jeton en utilisant le 'x-access-token' dans l'en-tête, un message d'erreur sera renvoyé disant « jeton introuvable ».

5

Dans l'image ci-dessus, une requête est envoyée au serveur via Postman sans le jeton dans l'en-tête, et le serveur répond avec un message d'erreur indiquant que jeton introuvable. Si un jeton est fourni dans l'en-tête et que ce jeton est correct, il permet au client d'accéder à la route protégée, mais si le jeton est erroné, il répond par un message d'erreur disant « jeton invalide ».

6

Dans l'image ci-dessus, une requête est envoyée au serveur via Postman avec un jeton incorrect dans l'en-tête, et le serveur répond avec un message d'erreur indiquant un jeton invalide.

Intégration de l'authentification JWT dans le frontal

Pour ce faire, vous auriez besoin d'installer Axios dans notre front-end créé avec React.js en faisant;

1npm i axios

Dans notre page d'enregistrement/d'inscription dans notre React.js, nous voulons que notre côté client stocke le JWT qu'il reçoit du côté serveur après que leurs informations soient stockées dans la base de données. Ce jeton sera utilisé pour les requêtes API ultérieures, nous ajoutons donc cette fonction à notre code ;

onSubmitSignUp = () => {
  console.log(this.state);
  axios
    .post("http://localhost:3001/register", {
      email: this.state.email,
      password: this.state.password,
      name: this.state.name,
      enteries: this.state.enteries,
    })

    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      } else {
        console.log("no response");
      }
    });
};

Ceci fait, le jeton est stocké dans notre stockage local côté client. Nous ferons la même chose pour notre page de connexion afin qu'un jeton soit créé pour les appels d'API ultérieurs lorsqu'un utilisateur déjà existant se connecte.

onSubmitSignIn = () => {
  console.log(this.state);
  axios
    .post("http://localhost:3001/signin", {
      email: this.state.email,
      password: this.state.password,
    })

    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      } else {
        console.log("no response");
      }
    });
};

Pour notre route d'authentification, nous devons récupérer le jeton déjà stocké de notre stockage qui sera ensuite envoyé côté serveur pour authentification et action ultérieure.

export default function authHeader() {
  const user = JSON.parse(localStorage.getItem("user"));
  if (useraccessToken) {
    return { "x-auth-token": user.accessToken };
  }
}
axios.post("http://localhost:3001/protected", { header: authHeader() });

Avec tout cela fait, nous avons mis en place avec succès un système d'authentification fonctionnel qui fonctionne avec notre node.js (back-end), crée notre jeton et l'envoie à notre react.js (front-end), qui stocke ensuite notre jeton et l'utilise pour les requêtes ultérieures vers notre route protégée.

Conclusion

Jusqu'à présent, nous avons examiné l'authentification JWT, la structure JWT, ce qu'est l'authentification JWT, son fonctionnement et comment l'ajouter à nos routes node.js côté serveur et à notre application React.js. Vous pouvez en savoir plus sur JWT et les bibliothèques et outils qui facilitent et sécurisent votre utilisation de l'authentification JWT ici . J'espère que ce tutoriel vous a été utile, amusez-vous à authentifier les demandes avec les jetons Web JSON.

Lien : https://blog.openreplay.com/authentication-with-jwt-for-your-website

#jwt #authentication

Evolution in Web Design: A Case Study of 25 Years - Prismetric

The term web design simply encompasses a design process related to the front-end design of website that includes writing mark-up. Creative web design has a considerable impact on your perceived business credibility and quality. It taps onto the broader scopes of web development services.

Web designing is identified as a critical factor for the success of websites and eCommerce. The internet has completely changed the way businesses and brands operate. Web design and web development go hand-in-hand and the need for a professional web design and development company, offering a blend of creative designs and user-centric elements at an affordable rate, is growing at a significant rate.

In this blog, we have focused on the different areas of designing a website that covers all the trends, tools, and techniques coming up with time.

Web design
In 2020 itself, the number of smartphone users across the globe stands at 6.95 billion, with experts suggesting a high rise of 17.75 billion by 2024. On the other hand, the percentage of Gen Z web and internet users worldwide is up to 98%. This is not just a huge market but a ginormous one to boost your business and grow your presence online.

Web Design History
At a huge particle physics laboratory, CERN in Switzerland, the son of computer scientist Barner Lee published the first-ever website on August 6, 1991. He is not only the first web designer but also the creator of HTML (HyperText Markup Language). The worldwide web persisted and after two years, the world’s first search engine was born. This was just the beginning.

Evolution of Web Design over the years
With the release of the Internet web browser and Windows 95 in 1995, most trading companies at that time saw innumerable possibilities of instant worldwide information and public sharing of websites to increase their sales. This led to the prospect of eCommerce and worldwide group communications.

The next few years saw a soaring launch of the now-so-famous websites such as Yahoo, Amazon, eBay, Google, and substantially more. In 2004, by the time Facebook was launched, there were more than 50 million websites online.

Then came the era of Google, the ruler of all search engines introducing us to search engine optimization (SEO) and businesses sought their ways to improve their ranks. The world turned more towards mobile web experiences and responsive mobile-friendly web designs became requisite.

Let’s take a deep look at the evolution of illustrious brands to have a profound understanding of web design.

Here is a retrospection of a few widely acclaimed brands over the years.

Netflix
From a simple idea of renting DVDs online to a multi-billion-dollar business, saying that Netflix has come a long way is an understatement. A company that has sent shockwaves across Hollywood in the form of content delivery. Abundantly, Netflix (NFLX) is responsible for the rise in streaming services across 190 countries and meaningful changes in the entertainment industry.

1997-2000

The idea of Netflix was born when Reed Hastings and Marc Randolph decided to rent DVDs by mail. With 925 titles and a pay-per-rental model, Netflix.com debuts the first DVD rental and sales site with all novel features. It offered unlimited rentals without due dates or monthly rental limitations with a personalized movie recommendation system.

Netflix 1997-2000

2001-2005

Announcing its initial public offering (IPO) under the NASDAQ ticker NFLX, Netflix reached over 1 million subscribers in the United States by introducing a profile feature in their influential website design along with a free trial allowing members to create lists and rate their favorite movies. The user experience was quite engaging with the categorization of content, recommendations based on history, search engine, and a queue of movies to watch.

Netflix 2001-2005 -2003

2006-2010

They then unleashed streaming and partnering with electronic brands such as blu-ray, Xbox, and set-top boxes so that users can watch series and films straight away. Later in 2010, they also launched their sophisticated website on mobile devices with its iconic red and black themed background.

Netflix 2006-2010 -2007

2011-2015

In 2013, an eye-tracking test revealed that the users didn’t focus on the details of the movie or show in the existing interface and were perplexed with the flow of information. Hence, the professional web designers simply shifted the text from the right side to the top of the screen. With Daredevil, an audio description feature was also launched for the visually impaired ones.

Netflix 2011-2015

2016-2020

These years, Netflix came with a plethora of new features for their modern website design such as AutoPay, snippets of trailers, recommendations categorized by genre, percentage based on user experience, upcoming shows, top 10 lists, etc. These web application features yielded better results in visual hierarchy and flow of information across the website.

Netflix 2016-2020

2021

With a sleek logo in their iconic red N, timeless black background with a ‘Watch anywhere, Cancel anytime’ the color, the combination, the statement, and the leading ott platform for top video streaming service Netflix has overgrown into a revolutionary lifestyle of Netflix and Chill.

Netflix 2021

Contunue to read: Evolution in Web Design: A Case Study of 25 Years

#web #web-design #web-design-development #web-design-case-study #web-design-history #web-development

prashant patil

1598286700

whatsapp web-w app web-webs whatsapp »

Through whatsapp web you can easily run whatsapp on your android pc on your android mobile. Just like whatsapp mobile is for android device, whatsapp web is for windows device. Whatsapp web is quite popular which has quite cool features.

whatsapp web

how to use whatsapp web desktop
Whatsapp web is very easy to use. Simply you have to search web.whatsapp.com in your google chrome and click on first result which is the official website of whatsapp web.

As soon as you click, an interface will open in front of you, on which you will see a barcode. Follow the steps given below to use whatsapp web on your desktop

web.whatsapp.com

open your whatsapp on your mobile
You will see 3dots on the right side top inside whatsapp, you have to click
The 3rd option is whatsapp web, you have to click it
Now you have to capture the barcode you see on your desktop through your phone.
Now you can use whatsapp of your android mobile in your desktop
webs whatsapp

note: You can see whatsapp of anyone’s mobile by pointing to the barcode of your desktop. You can also call it whatsapp hack.

Remember that after using whatsapp web, logout it from your desktop. To logout follow the steps given below.

w app web

open your whatsapp on your mobile
You will see 3dots on the right side top inside whatsapp, you have to click
The 3rd option is whatsapp web, you have to click it
You will see the symbol for logout, you have to logout by clicking it.

read more

#whatsapp #whatappweb #https://web.whatsapp.com/ #wsp web #web.whatsapp web #web whatsapp

Ananya Gupta

Ananya Gupta

1613386017

Key Points For Joining The Best Web Designing For Better Career Option

The scope of the web designer is increasing day by day, because of high demanding job forms an important part of our society. Web Designing is that the creation and planning of internet sites. it’s a process of developing different sites.

To be an honest web designer you ought to have an entire knowledge of CSS and HTML. These are the important prerequisite for designing an internet site. In today’s world of competition to be amongst at the highest one needs media. Websites are playing a key role in today’s life. Whether in online web desiging course mention shopping or engineering everything is formed online.

These are some of the main benefits which a standard person has made with the utilization of internet sites. many roles are available for web designers than before. Many big companies demand experienced and quality web designers.

Web designing is the creative and innovative part of web development during which the designer is especially concerned with how our website looks. CSS is the heart of the web designing part.

The scope of web designing is increasing day by day. In today’s web and internet world, people want a creative website once they want to access it. Top company web development of India hands over 8-10 lac per annum for an experienced web designer. So it’s a really good field for creating websites.

Web designers have the work of designing whole websites which forms the primary step of web development. After web designing remaining work will start. In today’s growing scenario there are many job opportunities for fresher and experienced candidates.

Web designing is a crucial course that features a lot of scope within the present and also in the future scenario. There are two ways to travel through this course. If you’re curious about taking over a full-time web designer course then we will make a career in media or as advertising agents.

If one is curious about Engineering or in Commerce course but getting to develop the skill in web designing, then you’ll prefer the part-time short course in web designing.

When it comes to selecting a training institute, you will find them in every corner. CETPA Infotech is a reputed training institution and provides training that is industry oriented, updated, innovative and summer training has become a pioneer during this online designing field.

#web designing training in noida #web designing training in delhi #web designing online training #web designing online course #web designing course #web designing training

Sunny Joshi

1626433760

Best Web Development Institute in Delhi - Online Course

If you want to pursue a career in Web Development, then you must opt for a Web Development course in Delhi. The Best Web Development Institute in Delhi is offered by Web Development colleges or institutions. They are designed to give you the necessary training to start a Web Development company or a web design business. These courses are generally provided by Techstack and other institutes in Delhi like APTRON, ADMEC, Next G Education etc. contact them and get the best online training in India. These institutes offer the basic courses with advanced level of courses.

Their courses help you learn Web Development and web marketing. The Best Web Development Institute in Delhi will enable you to understand the basic requirements of web design and Web Development. You can also enhance your web design skills through these Web Development courses in Delhi. The Web Development training in Delhi from an experienced Web Development institute in India will teach you Web Development principles and methods through their live projects. This course in Delhi from an institute of good repute has a host of practical, theoretical and educational lessons which can be followed closely. These Web Development training institutes in Delhi can be followed up with classroom learning.

Best Web Development Institute in Delhi:

The institute, which you select for training in Delhi can decide the schedule of classes. Some Web Designing institutes provide you with the opportunity of choosing a particular institute for online training also. In this case, you would be able to find Web Development courses in Delhi conducted by that institute. The course work of these institutes is generally taught in a classroom setting. Most of these institutes conduct both classroom sessions and web-based courses.

You can take Web Development training in Delhi from an institute which offers you real world-class online training. The Techstack Academy conducts its Web Development training in a traditional manner. Students can create their own applications using the modern lab environment provided at the best institute. Many institutes conduct their web-based online course in a modern lab setup. They have a number of modern labs where students can interact with their teachers and fellow students of the same institute. This interaction helps the students identify and grasp concepts in an easy manner.

In the Web Development training in Delhi from an institute of good repute, students can choose between Web Development with live projects, web design and Web Development with prototypes with manual coding. The students can choose the best course for them depending on their goals and preferences.

Also Read: Web Development Course in Delhi (#1 Best Training Institute)

With regard to Web Development training in Delhi, the first step that the students have to take is to register themselves at the Best Web Development Institute in Delhi of their choice. Once they are registered, they can choose the course of their choice. Some of these training centers offer intensive training while some do not offer any specialised training and hence students can easily find an online training institute in Delhi NCR also that suits their needs.

In order to get a web designing course in Delhi, one has to follow certain rules. First of all, the students need to contact the Web Development training centre in Delhi and register themselves for the course. The Best Web Development Institute in Delhi may conduct an interview process or conduct a web-course interview. The institute needs to understand the skills that the student possesses. Students can look forward to a bright career in web designing courses in Delhi as they can secure a number of jobs after completing their courses.

#web designing course in delhi #web development institute in delhi #web development training in delhi #web development course #web development institute #best web development institute in delhi