web-dev-qa-db-fra.com

Enregistrer jwt dans le stockage local

Je développe actuellement une application postgresql de nœud express et j'essaie d'implémenter Jsonwebtokens comme authentification. J'ai vu plusieurs tutoriels sur la façon de l'implémenter et j'obtiens comment le faire sur la partie backend, mais le frontend est généralement ignoré et apparemment tout le monde teste simplement son code avec Postman.

J'ai également lu en ligne que la méthode recommandée pour implémenter l'authentification jwt est de stocker le jeton généré dans localstorage et, si nécessaire, de l'envoyer sur l'en-tête. Mais je n'ai pas pu trouver comment cela se faisait ...

Ainsi, mes questions sont:

  1. Comment stockez-vous le jeton sur le front-end une fois qu'il est généré par le backend? (un exemple aiderait beaucoup, car je ne sais pas vraiment comment je suis censé obtenir le jeton sur un programme javascript frontal)
  2. Comment envoyez-vous le jeton sur les en-têtes lorsque vous effectuez une demande http qui en a besoin une fois qu'il est stocké?
node.jsauthenticationjwtfrontendpugjs
9
Juan Francisco Carías Álvarez

Côté serveur, une fois que vous avez créé le jeton et connecté l'utilisateur, vous envoyez le jeton via res.send (), exemple ci-dessous, notez que vous pouvez avoir une approche différente des fonctions findByCredentials ad genereateAuthToken, elles sont personnalisées:

app.post("/users/login", async (req, res) => {
  try {
    const user = await User.findByCredentials(
      req.body.email,
      req.body.password
    );
    const token = await user.generateAuthToken();

    res.send({ token: user.tasks });
  } catch (e) {
    res.status(400).send();
  }
});

Sur le frontend, vous pouvez utiliser fetch () de html5 pour envoyer le jeton dans l'en-tête. Par exemple, si vous souhaitez accéder à '/ users/me' qui nécessite une authentification, suivez les étapes ci-dessous (assurez-vous toutefois que vous enregistrez d'abord le jeton sur localstorage pour pouvoir y accéder via getItem:

localStorage.setItem('userInfo', JSON.stringify(userInfo));

document.getElementById("my-profile").addEventListener("click", getMe);

puis:

function getMe(e) {
    e.preventDefault();
    var token = JSON.parse(localStorage.getItem('token'));
    console.log(`Authorization=Bearer ${token}`)
    fetch('/users/me', {
        method: 'GET',
        headers: {
            'Authorization': 'Bearer ' + token
        }
    })
        .then(res => res.json())
        .then(data => {
            console.log(data)
            // window.location.href = 'http://localhost:3000/dashboard';
        })
        .catch(err => { console.log(err) })
}
1
ttfreeman

Comme vous l'avez dit, le token est généralement stocké dans localStorage.

localStorage est similaire à sessionStorage, sauf que si les données stockées dans localStorage n'ont pas de délai d'expiration, les données stockées dans sessionStorage sont effacées à la fin de la session de la page, c'est-à-dire lorsque la page est fermée.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Pour obtenir le token en front-end, vous envoyez à une URL l'e-mail et le mot de passe de l'utilisateur afin de l'échanger avec un token (vous devez être en https). Après cela, vous le stockez avec localStorage.setItem('key', value)

Petit exemple:

$.post("/authenticate", {email: userEmail, password: userPassword}, function(data) {
  localStorage.setItem('token', data.token)
});

Pour récupérer le token, après une actualisation par exemple, vous devez utiliser: localStorage.getItem('key').

Et enfin, pour être authentifié avec ce jeton, vous pouvez l'envoyer dans des en-têtes de support dans la propriété d'en-têtes Authorization.
Pourquoi porteur? => https://security.stackexchange.com/questions/108662/why-is-bearer-required-before-the-token-in-authorization-header-in-a-http-re

Exemple:

$.ajax({
    type: 'GET',
    url: '/account,
    headers: {
        "Authorization": "Bearer " + token
    }
}, function(data) { 
    // Authenticated data
});

Puisse cela peut aider: https://github.com/auth0-blog/angularjs-jwt-authentication-tutorial/blob/master/frontend/login/login.js

0
Zagonine