プレーンイングリッシュ

TLR

Webトークンのインストールnpm i jsonwebtoken

必要

生成トークン

JSONウェブトークンに署名する

郵便番号、データベース、およびjwt.io

ロジックを保護して作成するルートを構築する

現在のユーザーのトークンを確認するミドルウェアを作成する

保護する目的のルートへのミドルウェアを置く

JSONウェブトークンとは

ユーザーを認証して、情報を共有することによって保護されたルートにアクセスする安全な方法.
発行者は秘密を使用してJWTに署名します.受信機は、発行者が署名した後にトークンが変更されていないことを確認するために署名を検証します.

文脈

私は、ユーザーが既に存在するならば、新しいユーザまたはログインとしてユーザー登録をするMern(MongoDB、Express、Response、Node)アプリを構築しています.ユーザーの情報は、バックエンド上のExpressとNodeを介してMongoDBデータベースに格納されます.私は、関心の分離のためのMVCモデルを利用していますMVC .
バージョン

ノードV 16.13.1

bcryptjs v ^ 2.4.3

エクスプレスv ^ 4.17.3

エクスプレスasyncハンドラv ^ 1.2.0

jsonwebtoken v ^ 8.5.1

マングースv 6.6.10

このデモでさらにドリルダウンするだけでフォーカスする必要がありますuserController.js , authMiddleware.js , and userRoutes.js 以下のファイル構造を参照ください.

ビューとしても知られるクライアント

client
backend
   |config
   |-controller        
         |-userController.js
   |-middleware
         |-authMiddleware.js
   |models
   |-routes
         |-userRoutes.js
   |server
.env
.gitignore
package-lock.json
package.json

データベースにユーザーを作成したら、パスワードとメールで一般的にログインする必要があります.私の使用bcryptjs 私のユーザのパスワードを平文パスワードからハッシュされたパスワードにし、Postman とデータベースMongoDB . これでJSON Webトークンを作成する準備ができました.

JSON Webトークンを設定する

ステップ1

インストール

あなたのCLIランでnpm i jsonwebtoken それがあなたのパッケージにあるかどうかチェックしてください.JSON"jsonwebtoken": "^8.5.1"

ステップ2

必要

コントローラのフォルダで、ユーザーのルートロジックを使用してファイルを開きます.私は鉱山を訪れたuserController.js もたらすconst jwt = require ('jsonwebtoken')マイコードを参照してください

「バックエンド」コントローラ。js

userContoller.js

// Simple middleware for handling exceptions inside of async express routes and passing them to your express error handlers. Need to wrap entire function
const asyncHandler = require('express-async-handler');

// Use bcrypt to hash the password
const bcrypt = require('bcryptjs');

// Bring in the user model
const User = require('../models/userModel');

// Bring in jsonwebtoken
const jwt = require ('jsonwebtoken')

ステップ3

トークンを生成する

トークンを生成し、ユーザーIDを渡します.標識法

userContoller.js

const generateToken = (id)=> {
return jwt.sign({})
}

ステップ4

トークンに署名する

を返します.singメソッドは3つの引数を取ります

ユーザID、オブジェクト

秘密にすることができます.

有効期限、オプションオブジェクト

userContoller.js

const generateToken = (id)=> {
return jwt.sign({id},process.env.JWT_SECRET,{expiresIn:'4d'})
}

ステップ5

一緒に置く
トークンはユーザIDで生成する必要がありますuser._id 署名しなければなりません.レジスターとログインルートで、Aがありますres.json({}) それが返され、オブジェクトにあるtoken:generateToken(user._id)

「バックエンド」コントローラ。js

userContoller.js

const registerUser=()=> {
code logic...
res.status(200).json({
  // user in mongodb stores id as _id
  _id: user._id,
  name: user.name,
  email: user.email,
  token:generateToken(user._id)
  });
}

const loginUser=()=> {
code logic...
res.status(200).json({
  // user in mongodb stores id as _id
  _id: user._id,
  name: user.name,
  email: user.email,
  token:generateToken(user._id)
  });
}

生成関数

バックエンド>コントローラ

userContoller.js

// GENERATE TOKEN
const generateToken = (id) => {
  return jwt.sign({ id }, process.env.JWT_SECRET, {
    expiresIn: '4d'
  });
};

ステップ6

確認確認
私はデータベースからテストユーザを削除し、新しいユーザを登録して、Postmanを使って手動で証明したhttp://localhost:5000/api/users

トークンの中にユーザーIDがあります.手動で確認し、コピーし、あなたのトークンを貼り付けるjwt.io 左上のフィールドと右側にペイロードが表示されます

赤で囲まれたペイロードは、PostmanのCIRIDとデータベースのCHERIDに一致します.

ハーフウェイホーム

今ではトークンを作成しました.保護されたルート機能は、いくつかの方法で達成できます.
ルートを構築して、ロジックをつくって、ミドルウェアをつくって、ミドルウェアを保護するルートに持ってきてください.

ビルドしたいルートをビルドrouter.get('/me', getUser); ルートフォルダでuserRoutes.js , 後でこのファイルに戻ってミドルウェアを追加します.

バックエンド>ルート>ユーザルート。js

userRoutes.js

const express = require('express');
const router = express.Router();

// bring logic from the controllers folder
const { registerUser, loginUser, getUser } = require('../controllers/userController');

// example: router.method(path, logic)
router.post('/', registerUser);
router.get('/login', loginUser);

// protected route, will add protect middleware last
router.get('/me', getUser);

module.exports = router;

このようなコントローラのgetUserロジックを作成します

「バックエンド」コントローラ。js

userController.js

const asyncHandler = require('express-async-handler');
const bcrypt = require('bcryptjs');
const User = require('../models/userModel');
const jwt = require('jsonwebtoken');

const registerUser=()=> {
code logic...
}

const loginUser=()=> {
code logic...
}

const getUser = asyncHandler(async (req, res) => {
  const user = {
    id: req.user._id,
    email: req.user.email,
    name: req.user.name
  };
  res.status(200).json(user);
});

const generateToken = (id) => {
  return jwt.sign({ id }, process.env.JWT_SECRET, {
    expiresIn: '4d'
  });
};

module.exports = {
  loginUser,
  registerUser,
  getUser
};

ミドルウェアを追加するauthMiddleware.js 関数と共にprotect トークンを確認するには、ヘッダに渡され、トークンの特定のユーザー情報だけを返します.

ミドルウェア>オーサミドルウェア.js

authMiddleware.js
// *MIDDLEWARE FOR PROTECTED ROUTES
const jwt = require('jsonwebtoken');
const asyncHandler= require('express-async-handler');
const User = require('../models/userModel');

const protect= asyncHandler(async(req, res, next)=> {
    let token;

// Bearer token
// Check for token in the headers for authorization and Bearer token
if(req.headers.authorization && req.headers.authorization.startsWith('Bearer')){
try {
    // Get the token from the header
    // it comes back as "Bearer token" must split at space
    // split will return[Bearer token] and need the second item
    token= req.headers.authorization.split(' ')[1]

    // Verify the token value has not changed and the secret is the same
    const decoded = jwt.verify(token, process.env.JWT_SECRET)

    // Return the user from the user id in the token minus the password
    req.user =await User.findById(decoded.id).select('-password');

next()

} catch (error) {
console.log(error);
res.status(401)
throw new Error('Not Authorized')
}
}

//  If there is no token in the first place
if(!token){
    res.status(401)
    throw new Error('Not Authorized')
}

})
module.exports = {protect}

最後にプロテクト機能ミドルウェアをuserRoutes.js .

バックエンド>ルート>ユーザルート。js

userRoutes.js

const express = require('express');
const router = express.Router();

// Bring logic from the controllers folder
const { registerUser, loginUser, getUser } = require('../controllers/userController');

// Bring in middleware to protect routes
const {protect}= require('../middleware/authMiddleware');

// example: router.method(path, logic)
router.post('/', registerUser);
router.get('/login', loginUser);

// protected route
router.get('/me',protect, getUser);

module.exports = router;

最後に保護されていることを確認する郵便局を介して保護されたルートをチェックします.Authタブを使用し、ログインルートからトークンをペーストします

ここで終わりです。

あなたの時間をありがとう.畝

ハッピーコーディング！

リンク🔗

json web token
jwt.io
MVC
Postman
Express-Async-Handler
bcryptjs
MongoDB
Node

社会❤️

Portfolio
Github