>웹 프론트엔드 >JS 튜토리얼 >웹 앱에서 JWT 인증 생성 및 보안

웹 앱에서 JWT 인증 생성 및 보안

Susan Sarandon
Susan Sarandon원래의
2024-11-11 11:09:03636검색

Creating and Securing JWT Authentication in a Web App

소개

JSON 웹 토큰(JWT)은 당사자 간에 정보를 JSON 개체로 안전하게 전송하는 컴팩트하고 독립적인 방법입니다. JWT는 웹 애플리케이션에서 사용자를 인증하는 데 널리 사용됩니다. 이 튜토리얼에서는 JWT 인증을 사용하여 Node.js 및 Express 백엔드를 구축합니다.

JWT란 무엇입니까?

JWT(JSON Web Token)는 당사자 간 정보를 JSON 객체로 안전하게 전송하기 위한 개방형 표준입니다. 각 토큰은 세 부분으로 구성됩니다.

  1. 헤더: 토큰 유형 및 해싱 알고리즘에 대한 정보가 포함됩니다.
  2. 페이로드: 사용자 정보와 클레임이 포함되어 있습니다.
  3. 서명: 토큰의 무결성을 확인합니다.

예제 JWT

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0IiwidXNlcm5hbWUiOiJqb2huZG9lIn0.H6BBiB1y5eXKXvW9bbjT2Rg8Jp4oE4Y5Kxf_sDF7Kzg

프로젝트 설정

  1. 새 프로젝트 디렉토리 만들기:

    mkdir jwt-auth-app
    cd jwt-auth-app
    
  2. 새 Node.js 프로젝트 초기화:

    npm init -y
    

종속성 설치

필요한 종속성을 설치합니다.

npm install express jsonwebtoken bcryptjs dotenv express-validator
  • express: Node.js용 웹 프레임워크
  • jsonwebtoken: JWT 생성 및 확인을 위한 라이브러리
  • bcryptjs: 비밀번호 해싱을 위한 라이브러리.
  • dotenv: 환경 변수용.
  • express-validator: 입력 데이터의 유효성을 검사합니다.

서버 구성

server.js에서 기본 서버 설정을 만듭니다.

// server.js
require('dotenv').config();
const express = require('express');
const app = express();
app.use(express.json());

// Import Routes
const authRoutes = require('./routes/auth');
app.use('/api/auth', authRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

환경 변수를 저장하기 위한 .env 파일을 만듭니다.

PORT=5000
JWT_SECRET=your_jwt_secret_key

사용자 인증 경로 생성

  1. 인증 경로에 대한 Routes/auth.js 파일을 만듭니다.
// routes/auth.js
const express = require('express');
const { body, validationResult } = require('express-validator');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const router = express.Router();

const users = []; // In-memory user storage

// Signup Route
router.post(
  '/signup',
  [
    body('username').isLength({ min: 3 }),
    body('password').isLength({ min: 5 })
  ],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });

    const { username, password } = req.body;
    const hashedPassword = await bcrypt.hash(password, 10);

    users.push({ username, password: hashedPassword });
    res.status(201).json({ message: 'User registered successfully' });
  }
);

// Login Route
router.post(
  '/login',
  [
    body('username').notEmpty(),
    body('password').notEmpty()
  ],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });

    const { username, password } = req.body;
    const user = users.find(u => u.username === username);

    if (!user) return res.status(400).json({ message: 'Invalid credentials' });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(400).json({ message: 'Invalid credentials' });

    const token = jwt.sign({ username }, process.env.JWT_SECRET, { expiresIn: '1h' });
    res.json({ token });
  }
);

module.exports = router;
  1. 노선설명
  • 가입 경로: 사용자를 저장하기 전에 비밀번호를 검증하고 해시합니다.
  • 로그인 경로: 자격 증명을 확인하고, 비밀번호를 확인하고, JWT 토큰을 발급합니다.

JWT 토큰 생성

  • jwt.sign 메소드는 사용자 정보가 포함된 토큰을 생성합니다.
  • JWT_SECRET은 토큰에 서명하는 데 사용되며 토큰은 안전하게 비공개로 유지되어야 합니다.
const token = jwt.sign({ username }, process.env.JWT_SECRET, { expiresIn: '1h' });

JWT로 경로 보호

경로를 보호하려면 미들웨어를 만들어 토큰을 확인하세요.

  1. 미들웨어/auth.js 만들기:
// middleware/auth.js
const jwt = require('jsonwebtoken');

module.exports = function (req, res, next) {
  const token = req.header('Authorization')?.split(' ')[1];
  if (!token) return res.status(401).json({ message: 'Access denied' });

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (ex) {
    res.status(400).json({ message: 'Invalid token' });
  }
};
  1. server.js에서 경로 보호:

유효한 토큰이 필요한 보호 경로 만들기:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0IiwidXNlcm5hbWUiOiJqb2huZG9lIn0.H6BBiB1y5eXKXvW9bbjT2Rg8Jp4oE4Y5Kxf_sDF7Kzg

미들웨어 설명

  • 미들웨어는 Authorization 헤더에 토큰이 있는지 확인합니다.
  • 토큰이 유효하면 사용자 정보가 req 객체에 추가되어 보호된 경로에 대한 액세스가 허용됩니다.

결론

이 튜토리얼에서는 Node.js 및 Express 백엔드에서 JWT 인증을 설정하는 기본 사항을 다루었습니다. 이 가이드에서는 다음을 시연했습니다.

  1. 회원가입 및 로그인을 위한 인증 경로를 설정합니다.
  2. JWT 토큰 생성 및 확인
  3. JWT 기반 미들웨어로 경로 확보

JWT는 인증을 처리하는 강력한 방법으로 웹 애플리케이션을 안전하고 확장 가능하게 만듭니다.

위 내용은 웹 앱에서 JWT 인증 생성 및 보안의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.