web-dev-qa-db-ja.com

ローカルストレージにjwtを保存する

私は現在node express postgresqlアプリケーションを開発しており、認証としてJsonwebtokensを実装しようとしています。私はそれを実装する方法について複数のチュートリアルを見てきましたが、バックエンド部分でそれを行う方法を手に入れましたが、フロントエンドは通常スキップされ、明らかに誰もがPostmanでコードをテストするだけです。

また、オンラインで、jwt認証を実装するための推奨される方法は、生成されたトークンをlocalstorageに格納し、必要に応じてヘッダーで送信することを読んでいます。しかし、私はこれがどのように行われるかを見つけることができませんでした...

したがって、私の質問は次のとおりです。

  1. バックエンドによって生成されたトークンをフロントエンドにどのように保存しますか？ （例は、フロントエンドのjavascriptプログラムでトークンを取得する方法を実際に取得していないため、非常に役立ちます）
  2. トークンを格納したら、それを必要とするhttpリクエストを行うときに、ヘッダーでトークンをどのように送信しますか？
node.jsauthenticationjwtfrontendpugjs
9
Juan Francisco Carías Álvarez

サーバー側では、トークンを作成してユーザーをログインさせたら、res.send（）を介してトークンを送信します。以下の例では、findByCredentials関数とgenereateAuthToken関数に別の方法がある場合があることに注意してください。これらはカスタムです。

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();
  }
});

フロントエンドでは、html5のfetch（）を使用して、ヘッダーでトークンを送信できます。たとえば、認証が必要な「/ users/me」にアクセスする場合は、以下の手順に従います（ただし、getItemを介してアクセスできるように、最初にトークンをlocalstorageに保存してください：

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

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

次に：

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

あなたが言ったように、通常トークンはlocalStorageに保存されます。

localStorageは、sessionStorageに似ていますが、localStorageに保存されているデータに有効期限はありませんが、sessionSessionに保存されているデータは、ページセッションが終了するとき、つまりページが閉じられるときにクリアされます。
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

フロントエンドでトークンを取得するには、トークンと交換するために、ユーザーの電子メールとパスワードをURLに送信します（httpsである必要があります）。その後、localStorage.setItem('key', value)で保存します

短い例：

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

トークンを取り戻すには、たとえば更新後に、次を使用する必要があります：localStorage.getItem('key')。

そして最後に、このトークンで認証を受けるために、Authorization headersプロパティのベアラーヘッダーで送信できます。
なぜ無記名なのか？ => https://security.stackexchange.com/questions/108662/why-is-bearer-required-before-the-token-in-authorization-header-in-a-http-re

例：

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

これが役立ちますように： https://github.com/auth0-blog/angularjs-jwt-authentication-tutorial/blob/master/frontend/login/login.js

0
Zagonine