리액트를 다루는 기술 - JWT를 통한 회원 인증 시스템 구현하기

JWT(JSON Web Token)

: 데이터가 JSON으로 이루어져 있는 토큰을 의미합니다.

두 개체가 서로 안전하게 정보를 주고 받을 수 있도록 웹 표준으로 정의되었다.

 

사용자의 로그인 상태를 서버에서 처리하는 대표적인 두 가지 인증방식

1. 세션 기반 인증 시스템 

2. 토큰 기반 인증 시스템

 

1. 세션 기반 인증 시스템

: 서버가 사용자가 로그인 중임을 기억하고 있다.

세션 기반 인증 시스템에서 사용자가 로그인시, 

서버는 세션 저장소에서 사용자의 정보를 조회하고 세션 id를 발급한다.

발급된 id는 주로 브라우저의 쿠키에 저장한다.

그 다음에 사용자가 다른 요청을 보낼 때마다 서버는 세션 정장소에서 세션을 조회한 후

로그인 여부를 결정하여 작업을 처리하고 응답한다.

세션 저장소는 주로 메모리, 디스크, 데이터베이스 등을 사용한다.

 

단점 : 서버 확장이 어렵다.

만약 서버의 인스턴스가 여러개가 된다면, 모든 서버끼리 같은 세션을 공유해야하므로, 세션 전용 데이터베이스를 만들어야 할 뿐 아니라 신경 써야 할 것도 많다.

 

 

2. 토큰 기반 인증 시스템

토큰 : 로그인 이후 서버가 만들어 주는 문자열로,

해당 문자열 안에는 사용자의 로그인 정보와 해당 정보가 서버에서 발급되었음을 증명하는 서명이 들어 있습니다. 

서명 데이터는 해싱 알고리즘을 통해 만들어집니다, (주로 HMAC SHA256, RSA SHA256 알고리즘이 사용된다.)

토큰은 서명이 있기 때문에 무결성이 보장된다.

무결성 : 정보가 변경되거나 위조되지 않았음을 의마하는 성질

사용자가 로그인을 하면,

서버에서 사용자에게 해당 사용자의 정보를 지니고 있는 토큰을 발급해주고,

추후 사용자가 다른 API를 요청할때, 발급받은 토큰과 함께 요청한다.

그러면 서버는 해당 토큰이 유효한지 검사하고, 결과에 따라 작업을 처리하고 응답한다.

 

장점 

- 서버에서 사용자 로그인 정보를 기억하기 위해 사용되는 리소스가 적다.

- 사용자 쪽에서 로그인 상태를 지닌 토큰을 가지고 있으므로, 서버끼리 사용자의 로그인 상태를 공유할 필요가 없어, 서버의 확장성이 매우 높다.

- 인증 시스템을 구현하기 간편하고 사용자들의 인증 상태를 관리하기도 훨씬 쉽다.

 

---

User 스키마/모델 만들기

비밀번호를 DB에 저장할때, 단방향 해싱 함수를 지원해 주는 'bcrypt' 라이브러리를 사용해 비밀번호를 안전하게 저장하기

yarn add bcrypt

 

모델 메서드 만들기

모델 메서드 : 모델에서 사용할 수 있는 함수로 두 가지 종류가 있다.

1. instance method : 모델을 통해 만든 문서 인스턴스에서 사용 / 2. static method : 모델에서 바로 사용 

import mongoose, { Schema } from 'mongoose';
import bcrypt from 'bcrypt';

const UserSchema = new Schema({
  username: String,
  hashedPassword: String,
});

// 비밀번호를 파라미터로 받아 계정의 hashedPassword 값을 설정
UserSchema.methods.setPassword = async function (password) {
  const hash = await bcrypt.hash(password, 10);
  this.hashedPassword = hash;
};

// 파라미터로 받은 비밀번호가 해당 계정의 비밀번호와 일치하는지 검증
UserSchema.methods.checkPassword = async function (password) {
  const result = await bcrypt.compare(password, this.hashedPassword);
  return result;
};

// username으로 데이터 찾기, static 함수에서의 this는 모델(User)를 가리킴.
UserSchema.statics.findByUsername = function (username) {
  return this.findOne({ username });
};

const User = mongoose.model('User', UserSchema);
export default User;

setPassword(password), checkPassword(password)는 instance method

★ 이때 화살표 함수가 아닌, function 키워드를 꼭 사용

→ 함수 내부에서 this에 접근해야 하기 때문, 여기서 this는 문서 인스턴스를 가리킨다.

findByUsername(username) 는 static method

여기서 this는 모델을 가리킵니다. (User를 가리킴)

 

2. 회원 인증 API 만들기

2-1. 먼저, 새로운 라우트를 정의하고,

// api/auth/auth.ctrl.js
export const register = async (ctx) => {};

export const login = async (ctx) => {};

export const check = async (ctx) => {};

export const logout = async (ctx) => {};

2-2. auth 라우터를 생성하기

// api/auth/index.js
import Router from 'koa-router';
import * as authCtrl from './auth.ctrl';

const auth = new Router();

auth.post('/register', authCtrl.register);
auth.post('/login', authCtrl.login);
auth.post('/check', authCtrl.check);
auth.post('/logout', authCtrl.logout);

export default auth;

2-3. 그 다음 auth 라우터를 api 라우터에 적용하기

// api/index.js
import Router from 'koa-router';
import auth from './auth';
import posts from './posts';

const api = new Router();

api.use('/posts', posts.routes()); // posts 라우트 적용
api.use('/auth', auth.routes());

export default api;

---

3. 회원 가입 구현하기

// api/auth/auth.ctrl.js
import Joi from '../../../node_modules/joi/lib/index';
import User from '../../models/user';
/*
    POST /api/auth/register
    {
        username:'velopert',
        password : 'mypass123'
    }
*/

export const register = async (ctx) => {
  // Request Body 검증하기
  const schema = Joi.object().keys({
    username: Joi.string().alphanum().min(3).max(20).required(),
    password: Joi.string().required(),
  });

  const result = schema.validate(ctx.request.body);

  if (result.error) {
    ctx.status = 400;
    ctx.body = result.error;
    return;
  }

  const { username, password } = ctx.request.body;

  try {
    // username이 중복인지 확인
    const exists = await User.findByUsername(username);

    if (exists) {
      ctx.status = 409; // Conflict
      return;
    }
    const user = new User({
      username,
    });
    await user.setPassword(password); // 비밀번호 설정
    await user.save(); // DB에 저장

    // 응답할 데이터에서 hashedPassword 필드 제거
    ctx.body = user.serialize();
  } catch (error) {
    ctx.throw(500, error);
  }
};

export const login = async (ctx) => {};

export const check = async (ctx) => {};

export const logout = async (ctx) => {};

// models/user.js
// + 추가
UserSchema.methods.serialize = function () {
  const data = this.toJSON();
  delete data.hashedPassword;
  return data;
};

 

4. 로그인 구현하기

// api/auth/auth.ctrl.js
import Joi from '../../../node_modules/joi/lib/index';
import User from '../../models/user';
/*
    POST /api/auth/register
    {
        username:'velopert',
        password : 'mypass123'
    }
*/

export const register = async (ctx) => { ... };

export const login = async (ctx) => {
  const { username, password } = ctx.request.body;

  if (!username || !password) {
    ctx.status = 401; // Unauthorized
    return;
  }
  try {
    // 사용자 데이터 찾기
    const user = await User.findByUsername(username);

    if (!user) {
      ctx.status = 400;
      return;
    }

    const valid = await user.checkPassword(password);

    if (!valid) {
      ctx.status = 400;
      return;
    }

    ctx.body = user.serialize();
  } catch (error) {
    ctx.throw(500, error);
  }
};

export const check = async (ctx) => {};

export const logout = async (ctx) => {};

 

5. 토큰 발급 및 검증하기

클라이언트에서 사용자 로그인 정보를 지니고 있을 수 있도록 서버에서 토큰을 발급하기

jsonwebtoken : JWT 토큰을 만들기 위해선 해당 모듈을 설치해야한다.

yarn add jsonwebtoken

5-1. 비밀키 설정하기

.env 파일에 JWT토큰을 만들때 사용할 비밀키를 만든다. (문자열 아무거나 가능)

이 비밀키는 나중에 JWT 토큰의 서명을 만드는 과정에서 사용된다.

비밀키가 공개되는 순간, 누구든지 마음대로 JWT 토큰을 발급할 수 있으므로 절대 외부에 공개되선 안됩니다.

// .env
JWT_SECRET=//////////////////////////////////////

 

5-2. 토큰 발급하기

// models/user.js
// + 추가

import jwt from 'jsonwebtoken';

// 토큰 발급하기
UserSchema.methods.generateToken = function () {
  // jwt.sing(토큰 안에 집어 넣고 싶은 데이터, JWT 암호)
  const token = jwt.sign(
    {
      _id: this.id,
      username: this.username,
    },
    process.env.JWT_SECRET,
    {
      expiresIn: '7d', // 7일동안 유효
    },
  );
  return token;
};

---

이제 회원가입과 로그인에 성공했을 때 토큰을 사용자에게 전달해주겠다.

사용자가 브라우저에서 토큰을 사용할때는 주로 두 가지 방법을 사용한다.

1. 브라우저의 localStorage 혹은 sessionStorage에 담아서 사용하기

- 매우 편리하고 구현하기도 쉽다.

하지만 *XSS(Cross Site Scripting)공격을 받을 수 있다.

* XSS : 누군가가 페이지에 악성 스크립트를 삽입한다면 쉽게 토큰을 탈취할 수 있음.

 

2. 브라우저의 cookie에 담아서 사용하기

쿠키도 XSS 공격을 받을 수 있지만, httpOnly라는 속성을 활성화하면 자바스크립트를 통해 쿠키를 조회할 수 없어

악성 스크립트로부터 안전합니다.

그 대신 CSRF(Cross Stie Request Forgery) 공격에 취약해질 수 있습니다.

하지만, CSRF 토큰 사용 및 Referer 검증 등의 방식으로 이 공격을 막을 수 있습니다.

* CSRF : 토큰을 쿠키에 담으면 사용자가 서버로 요청을  할 때마다 무조건 토큰이 함께 전달되는 점을 이용해 사용자가 모르게 원하지 않은 API 요청을 하게 만든다. (사용자도 모르는 상황에서 글을 작성, 삭제, 탈퇴하게 만듬)

// api/auth/auth.ctrl.js

export const register = async (ctx) => {
  ...
    // 회원가입에 성공했을때 토큰을 사용자에게 전달하기
    const token = user.generateToken();

    ctx.cookies.set('access_token', token, {
      maxAge: 1000 * 60 * 60 * 24 * 7, // 7d
      httpOnly: true,
    });
  } catch (error) {
    ctx.throw(500, error);
  }
};

export const login = async (ctx) => {
	...
    // 로그인에 성공했을때 토큰을 사용자에게 전달하기
    const token = user.generateToken();

    ctx.cookies.set('access_token', token, {
      maxAge: 1000 * 60 * 60 * 24 * 7, // 7d
      httpOnly: true,
    });
  } catch (error) {
    ctx.throw(500, error);
  }
};

---

5-3. 토큰 검증하기

사용자의 토큰을 확인한 후 검증하는 작업을 미들웨어를 통해 처리한다.

// lib/jwtMiddleware.js

// 사용자의 토큰을 확인하 후 검증하는 작업
import jwt from 'jsonwebtoken';
import User from '../models/user';

const jwtMiddleware = async (ctx, next) => {
  const token = ctx.cookies.get('access_token');

  if (!token) return next();

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    ctx.state.user = {
      _id: decoded._id,
      username: decoded.username,
    };

    // 토큰 남은 유효기간이 3.5일 미만이면 재발급
    const now = Math.floor(Date.now() / 1000);
    if (decoded.exp - now < 60 * 60 ** 24 * 3.5) {
      const user = await User.findById(decoded._id);
      const token = user.generateToken();
      ctx.cookies.set('access_token', token, {
        maxAge: 1000 * 60 * 60 * 24 * 7,
        httpOnly: true,
      });
    }

    //console.log(decoded);
    return next();
  } catch (error) {
    // 토큰 검증 실패
    return next();
  }
};

export default jwtMiddleware;

미들웨어 적용하기

 // main.js
 ...
 
const app = new Koa();
const router = new Router();
import api from './api';
import jwtMiddleware from './lib/jwtMiddleware';

// api 라우트 적용
router.use('/api', api.routes()); // => /api/test

// 라우터 적용 전에 bodyparser 사용하기
app.use(bodyParser());

// 라우터 적용 전에 jwMiddleware를 적용하기
app.use(jwtMiddleware);

// app 인스턴스에 라우터 적용
app.use(router.routes()).use(router.allowedMethods());

check 함수(로그인 상태 확인기능) 구현

// api/auth/auth.ctrl.js

// 로그인 상태 확인
export const check = async (ctx) => {
  const { user } = ctx.state;
  if (!user) {
    // 로그인 중 아님
    ctx.state = 401; // Unauthorized
    return;
  }
  ctx.body = user;
};

 

5-4. 로그아웃 기능 구현하기

쿠키를 지워 주기만 하면 끝!

// api/auth/auth.ctrl.js

export const logout = async (ctx) => {
  ctx.cookies.set('access_token');
  ctx.status = 204; //No Content
};