web-dev-qa-db-ja.com

JWTを保存し、reactを使用してすべてのリクエストで送信する方法

私の基本的な登録/認証システムが動作しているので、とても嬉しいです。

だから基本的に私はこれを手に入れました：

app.post('/login', function(req,res) {
 Users.findOne({
email: req.body.email
}, function(err, user) {
if(err) throw err;

if(!user) {
  res.send({success: false, message: 'Authentication Failed, User not found.'});
} else {
  //Check passwords
  checkingPassword(req.body.password, user.password, function(err, isMatch) {
    if(isMatch && !err) {
      //Create token
      var token = jwt.sign(user,db.secret, {
        expiresIn: 1008000
      });
      res.json({success: true, jwtToken: "JWT "+token});
    } else {
      res.json({success: false, message: 'Authentication failed, wrong password buddy'});

       }
     });
    }
 });
});

次に、ヘッダーにjwtを指定してgetリクエストを送信するたびに、/ adminルートとPOSTMANでセキュリティを確保し、すべてが完全に機能するようにします。

これがトリッキーな部分です、基本的にこれが成功した場合にログインし、次に管理ページにリダイレクトします。そして、admin/*ルートにアクセスしようとするたびに、サーバーに送信したいのですが、jwTokenですが問題は、どうすればそれを達成できますか？ redux/fluxは使用せず、react/react-routerを使用するだけです。

メカニックの仕組みがわかりません。

みんなありがとう

expressreactjspassport.jsreact-routerjwt
15
MaieonBrix

1-ログインコンポーネントがAPIサーバーエンドポイントにログインリクエストを送信する

2-サーバーAPIエンドポイントがトークンを返す

3-トークンをユーザーのlocalStorageに保存します

4-今後のすべてのAPI呼び出しはヘッダーに含まれます

例： https://github.com/joshgeller/react-redux-jwt-auth-example

8
Tien Nguyen

トークンをlocalStorageに保存しないでください。トークンはxss攻撃を使用して侵害される可能性があります。ログインアクション時にクライアントにアクセストークンと更新トークンの両方を提供するのが最善の解決策だと思います。アクセストークンをメモリに保存し（例：redux状態）、リフレッシュトークンはhttpOnlyフラグ（および可能であればセキュアフラグ）を使用してサーバー上に作成する必要があります。アクセストークンは、2〜3分ごとに期限切れになるように設定する必要があります。ユーザーが2〜3分ごとに資格情報を入力する必要がないことを確認するために、現在のトークンが期限切れになる前に/refreshTokenエンドポイントを呼び出す間隔があります（サイレント更新トークン）。

このように、xss/csrfを使用してアクセストークンを危険にさらすことはできません。しかし、xss攻撃を使用すると、攻撃者は/refreshTokenエンドポイントに代わって呼び出しを行うことができますが、返されたトークンが危険にさらされることがないため、これは害を及ぼすことはありません。

1
itay312