[노드 2팀] #11. 웹 API 서버 만들기

 

🌟키워드: API 서버, 크롤링, JWT 토큰 인증, 사용량 제한, CORS

 

---

1. API 서버 이해하기

 

1. API와 웹 API 서버의 개념

- API (Application Programming Interface): 다른 어플리케이션에서 현재 프로그램의 기능을 사용할 수 있게 허용하는 접점이다.

- 웹 API: 다른 웹 서비스의 기능을 사용하거나 자원을 가져올 수 있는 창구이다.

- 웹 API 서버: 서버에 API를 올려서 URL을 통해 접근할 수 있게 만든 것이다.

 

2. 크롤링(crawling)

- 크롤링: 웹 사이트가 자체적으로 제공하는 API가 없거나 API 이용에 제한이 있을 때 사용하는 방법이다.

- 웹 사이트의 정보를 일정 주기로 수집해 자체적으로 가공하는 기술이다.

- 웹 사이트에서 직접 제공하는 API가 아니다. → 원하는 정보를 얻지 못할 수도 있다.

- 도메인/robots.txt에 접속하여 웹 사이트가 어떤 페이지의 크롤링을 허용하는지 확인할 수 있다.

- 주기적인 크롤링=웹 서버의 트래픽이 증가해 서버에 무리가 간다. → 공개해도 되는 정보들은 API로 만들어 API를 통해 가져가게 하는 것이 좋다.

 

2. 프로젝트 구조 갖추기

- NodeBird 서비스와 데이터베이스를 공유한다.

- 다른 서비스에서 NodeBird 서비스의 게시글, 해시태그, 사용자 정보를 JSON 형식으로 제공한다.

- 단, 인증받은 사용자만 일정 할당량 안에서 API 호출을 허용한다.

 

1. nodebird-api 폴더를 만든 후 package.json 파일을 생성한다.

2. (1) npm init으로 생성한 후 dependencies들을 설치하거나 (2)) 아래 pakage.json을 복사한다.

package.json

{
	"name": "nodebird-api",
	"version": "0.0.1",
	"description": "NodeBird API 서버",
	"main": "app.js",
	"scripts": {
		"start": "nodemon app",
		"test": "echo \"Error: no test specified\" && exit 1"
    },
	"author": "Zero Cho",
	"license": "ISC",
	"dependencies": {
		"bcrypt": "^5.0.0",
		"cookie-parser": "^1.4.5",
		"dotenv": "^16.0.0",
		"express": "^4.17.1",
		"express-session": "A1.17.1",
		"morgan": "^1.10.0",
		"mysql2":, "^2.1.0",
		"nunjucks": "^3.2.1",
		"passport": "^0.5.2",
		"passport-kakao": "^1.0.1",
		"passport-local": "^1.0.0",
		"sequelize": "^6.0.0",
		"uuid":"^8.3.2"
	},
	"devDependencies": {
	"nodemon": "^2.0.3"
    }
   }

 

콘솔

$ npm i

- NodeBird에서 config, models, passport, middle wares 폴더-와 내용물을 복사해 nodebird-api 폴더에 붙여 넣는다.

- controllers와 routes 폴더는 auth.js만 그대로 사용한다.

- .env 파일을 복사하고, 다른 폴더와 파일은 새로 나올 때마다 직접 생성한다.

 

3. 에러 표시 파일을 만든다.

- views 폴더를 만들고 error.html 파일을 생성한다.

 

4. 도메인 모델을 추가한다.

- 도메인 모델에는 인터넷 주소, 도메인 종류, 클라이언트 비밀키가 들어간다.

- type 컬럼은 ENUM 속성으로 무료(free)나 프리미엄(premium) 둘 중 하나만 값으로 입력할 수 있게 한다.

- 클라이언트 비밀 키는 요청한 도메인까지 일치해야 요청을 보낼 수 있게 제한을 둔다.

- clientSecret 컬럼은 충돌 가능성이 매우 적은 랜덤한 문자열인 UUID라는 타입을 가진다.

- 도메인 모델은 사용자 모델과 일대다 관계를 갖는데, 사용자 한 명이 여러 도메인을 소유할 수 있기 때문이다.

 

5. 로그인하는 화면을 만든다.

- 도메인을 등록하는 화면도 포함된다.

- 로그인을 하지 않았다면 로그인 창이 먼저 뜨고, 로그인한 사용자에겐 도메인 등록 화면을 보여준다.

 

6. 서버 실행하기

- http://localhost:8002로 접속하면 API를 사용하기 위해 허가가 필요하다.

http://localhost:8002 접속 화면

- 사용자 정보는 NodeBird 앱과 공유하므로 NodeBird 앱의 아이디로 로그인하면 된다.

도메인 등록 화면

- 로그인 후에는 도메인 등록 화면이 나타난다.

- 웹 브라우저에서 요청을 보낼 때, 응답을 하는 곳과 도메인이 다르면 CORS 에러가 발생할 수 있다.

도메인 등록 후 화면

-localhost:4000 도메인을 등록하여 발급받은 비밀 키는 NodeBird API를 호출할 때 인증 용도로 사용한다.

(자세한 코드는 책 참조...)

3. JWT 토큰으로 인증하기

1. JWT(JSON Web Token)

- JWT: JSON 형식의 데이터를 저장하는 토큰이다.

- 내용을 볼 수 있기에 JWT에는 민감한 내용을 넣으면 안된다.

- JWT는 다음과 같은 세 부분으로 구성되어있다.

① 헤더

- 토큰 종류와 해시 알고리즘 정보가 들어있다.

② 페이로드

- 토큰의 내용물이 인코딩된 부분이다.

③ 시그니처

- 일련의 문자열, 시그니처를 통해 토큰의 변조 여부를 확인할 수 있다.

- JWT 비밀키로 만들어지며, 노출 시에 토큰이 위조될 수 있다.

- 시그니처 자체는 숨기지 않아도 된다.

 

2. 토큰을 사용하는 이유

① 토큰 내용 확인하기 (https://jwt.io)

- 우측 하단의 serect 부분이 JWT 비밀 키 이다. 

- 페이로드 부분이 노출되어 내용을 알 수 있다.

 

② 내용이 노출되는 JWT 토큰을 사용하는 이유

- 내용이 없는 랜덤한 토큰을 사용할 경우: 토큰의 주인, 권한을 요청마다 체크해야한다.

- JWT 토큰은 JWT 비밀 키를 알지 않는 이상 변조가 불가능하다.

- 변조한 토큰은 시그니처를 비밀 키를 통해 검사할 때 구별할 수 있다. 

→ 외부에 노출되어도 좋은 정보에 한 해 사용자 이름, 권한을 넣고 안심하며 내용물을 믿고 데이터베이스 조회 없이도 권한을 줄 수 있다. 

 

3. JWT 토큰의 단점

- 내용물이 들어있어 랜덤한 토큰을 사용할 때보다 용량이 크다.

- 요청 때마다 토큰이 오가서 데이터 양이 증가한다.

→ 랜덤한 문자열을 사용해서 매번 사용자 정보를 조회하는 작업의 비용과 JWT 토큰을 사용해서 발생하는 데이터 비용을 비교하여 적절한 때에 사용하면 좋다.

  

4. 웹 서버에서 JWT 토큰 인증 과정 구현하기

① JWT 모듈 설치하기

콘솔

$ npm i jsonwebtoken

 

② JWT를 사용해서 API 만들기

- 다른 사용자가 API를 쓰려면 JWT 토큰을 발급하고 인증을 받아야한다.

→ 라우터에 공통되므로 미들웨어로 만들어 두는 것이 좋다.

nodebird-api/.env

COOKIE_SECRET=cookiesecret
KAKAO_ID=5d4daf57becfd72fd9c919882552c4a6
JWT_SECRET=jwtSecret

 

nodebird-api/middlewares/index.js

const jwt = require('jsonwebtoken');
...
exports.verifyToken = (req, res, next) => {
	try {
    //인증 성공 시에는 토큰의 내용이 반환되어 res.locals.decoded에 저장
		res.locals.decoded = jwt.verify(req.headers.authorization, process.env.JWT_SECRET);
	// jwt.verify 메서드로 토큰을 검증할 수 있다.
	// 첫 번째 인수로 토큰, 두 번째 인수로 토큰의 비밀 키를 넣는다.
		return next();
	} catch (error) { //
		if (error.name === 'TokenExpiredError') { // 유효 기간 초과된 경우
			return res.status(419).json({
				code: 419, //코드는 400번 대 숫자 중에서 마음대로 선택 가능
				message: '토큰이 만료되었습니다',
			});
		}
		return res.status(401).json({ // 토큰의 비밀키가 일치하지 않는 경우
			code: 401,
			message: '유효하지 않은 토큰입니다',
		});
	}
};

- res.locals에 사용자 아이디, 닉네임, 발급자 유효기간 등을 저장했으므로 다음 미들웨어에서 토큰의 내용물을 사용할 수 있다.

nodebird-api/routes/v1.js

const express = require('express');

const { verifyToken } = require('../middlewares');
const { createToken, tokenTest } = require('../controllers/v1');

const router = express.Router();

// POST /v1/token: 토큰을 발급하는 라우터
router.post('/token', createToken);

// GET /v1/test: 사용자가 토큰을 테스트해볼 수 있는 라우터
router.get('/test', verifyToken, tokenTest);

module.exports = router;

- 라우터 이름/버전(v1): 한 번 버전이 정해진 후에는 라우터를 함부로 수정하면 안된다.

- 기존에 있던 라우터가 수정되면 API를 사용하는 프로그램들이 오작동할 수 있다.

→ 기존 사용자에게 영향이 미칠 정도로 수정해야 한다면, 버전을 올린 라우터를 새로 추가한 뒤 새로운 API가 나왔음을 알린다.

- 버전을 반드시 라우터에 표시할 필요는 없다. (헤더에 버전 표시, 쿼리스트링/본문에 버전 표시 가능)

 

nodebird-api/controllers/v1.js

const jwt = require('jsonwebtoken');
const { Domain, User } = require('../models');

exports.createToken = async (req, res) => {
	const { clientSecret } = req.body;
		try {
			const domain = await Domain.findOne({
				where: { clientSecret },
				include: {
					model: User,
					attribute: ['nick', 'id'],
				},
			});
		if (!domain) {
			return res.status(401).json({
				code: 401,
				message: '등록되지 않은 도메인입니다. 먼저 도메인을 등록하세요',
			});
		}
		const token = jwt.sign({ //sign의 첫번째 인수: 토큰의 내용 (사용자 아이디, 닉네임)
			id: domain.User.id,
			nick: domain.User.nick,
		}, process.env.JWT_SECRET, { //sign 두번째 인수: 토큰의 비밀키
			expiresIn: '1m', // 1분 //sign 세번째 인수: 토큰의 설정(유효기간, 발급자)
			issuer: 'nodebird',
		});
		return res.json({ //일정한 형식으로 갖춰야 응답받는 쪽에서 처리하기 좋음
			code: 200, //코드가 200번대가 아니면 에러
			message: '토큰이 발급되었습니다', //code를 이해하지 못할 경우를 대비
			token,
		});
	} catch (error) {
		console.error(error);
		return res.status(500).json({
			code: 500,
			message: '서버 에러',
		});
	}
};

exports.tokenTest = (req, res) => {
res.json(res.locals.decoded);
};

 

- 라우터를 서버에 연결한다.

nodebird-api/app.js

...
dotenv.config();
const v1=require('./routes/v1');
const authRouter=require('./routes/auth');
...
app.use(passport.sessing());

app.use('/v1', v1);
app.use('/auth', authRouter);
...

 

4. 다른 서비스에서 호출하기

- API 사용하는 서비스: 다른 서버에 요청을 보내므로 클라이언트 역할을 한다.

- NodeBird 앱의 데이터를 가져오고 싶어하는 사용자= 보통 그 데이터를 가공해 2차적인 서비스를 하려는 회사가 API를 이용한다.

(예시) 쇼핑몰들의 최저가를 알려주는 서비스가 2차 서비스가 된다.

- 2차 서비스 이름을 NodeCat으로 한다.

① nodebird-api의 API를 통해 데이터를 가져오는 것이 주목적인 서버

nodecat/package.json

{
	"name": "nodecat",
	"version": "0.0.1",
	"description": "NodeBird 2차 서비스",
	"main": "app.js",
	"scripts": {
		"start": "nodemon app"
	},
	"author": "Zero Cho",
	"license": "ISC",
	"dependencies": {
		"axios": "^0.27.2",
		"cookie-parser": "^1.4.6",
		"dotenv": "^16.0.1",
		"express": "^4.18.1",
		"express-session": "^1.17.3",
		"morgan": "^1.10.0",
		"nunjucks": "^3.2.3"
	},
	"devDependencies": {
		"nodemon": "^2.0.16"
	}
}

 

콘솔

$ npm i

 

 

 

② 서버파일과 에러를 표시할 파일 생성

nodecat/app.js

const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const nunjucks = require('nunjucks');
const dotenv = require('dotenv');

dotenv.config();
const indexRouter = require('./routes');

const app = express();
app.set('port', process.env.PORT || 4000);
app.set('view engine', 'html');
nunjucks.configure('views', {
	express: app,
	watch: true,
	});

app.use(morgan('dev'));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
	resave: false,
	saveUninitialized: false,
	secret: process.env.COOKIE_SECRET,
	cookie: {
		httpOnly: true,
		secure: false,
	},
}));

app.use('/', indexRouter);

app.use((req, res, next) => {
	const error = new Error(`${req.method} ${req.url} 라우터가 없습니다.`);
	error.status = 404;
	next(error);
});

app.use((err, req, res, next) => {
	res.locals.message = err.message;
	res.locals.error = process.env.NODE_ENV !== 'production' ? err : {};
	res.status(err.status || 500);
	res.render('error');
});

app.listen(app.get('port'), () => {
	console.log(app.get('port'), '번 포트에서 대기 중');
});

 

 

nodecat/error.html

<h1>{{message}}</h1>
<h2>{{error.status}}</h2>
<pre>{{error.stack}}</pre>

 

③ 사용자 인증 진행을 테스트하는 라우터 만들기

- clientSecret을 .env

nodecat/.env

COOKIE_SECRET=nodecat
CLIENT_SECRET=7d67444e-fd01-4f9b-8680-f72464d02a57

 

nodecat/routes/index.js

const express = require('express');
const { test } = require('../controllers');

const router = express.Router();

// POST /test
router.get('/test', test);

module.exports = router;

 

 

nodecat/controllers/index.js

const axios = require('axios');

exports.test = async (req, res, next) => { // 토큰 테스트 라우터
	try {
		if (!req.session.jwt) { // 세션에 토큰이 없으면 토큰 발급 시도
			const tokenResult = await axios.post('http://localhost:8002/v1/token', {
				clientSecret: process.env.CLIENT_SECRET,
			});
		if (tokenResult.data?.code === 200) { // 토큰 발급 성공
			req.session.jwt = tokenResult.data.token; // 세션에 토큰 저장
		} else { // 토큰 발급 실패
			return res.json(tokenResult.data); // 발급 실패 사유 응답
		}
	}
// 발급받은 토큰 테스트
	const result = await axios.get('http://localhost:8002/v1/test', {
		headers: { authorization: req.session.jwt },// 발급받은 토큰으로 토큰이 유효한지 테스트
	});
	return res.json(result.data);
} catch (error) {
	console.error(error);
	if (error.response?.status === 419) { // 토큰 만료 시
		return res.json(error.response.data);
	}
	return next(error);
	}
};

 

- GET/test 라우터 사용하기

- 콘솔을 하나 더 띄워 서버(localhost:4000)와 nodebird-api(localhost:8002)도 실행 중이어야한다.

 

NodeCat과 NodeBird API 서버에서 모두 실행

$ npm start
//각각 다른 포트에서 대기 중
4000 번 포트에서 대기 중
8002번 포트에서 대기 중

- localhost:8002는 API 서비스를 제공하는 nodebird-api 서버

- localhost:4000은 API 서비스를 사용하는 NodeCat 서버

 

- 접속하면 다음과 같이 발급받은 토큰의 내용이 표시된다.

- 1분을 기다린 후 다시 https://localhost:4000/test 라우터에 접속하면 토큰이 만료되었다는 메시지가 나타난다.

5. SNS API 서버 만들기

- 다시 API 제공자(nodebird-api)의 입장으로 돌아와서 나머지 API 라우터를 완성한다.

 

nodebird-api/routes/v1.js

const express = require('express');

const { verifyToken } = require('../middlewares');
const { createToken, tokenTest, getMyPosts, getPostsByHashtag } = require('../controllers/v1');

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

// GET /v1/posts/my
router.get('/posts/my', verifyToken, getMyPosts);

// GET /v1/posts/hashtag/:title
router.get('/posts/hashtag/:title', verifyToken, getPostsByHashtag);

module.exports = router;

- GET/v1/posts/my와 GET /v1/posts/hashtag/:title은 내가 올린 포스트와 해시태크 검색 결과를 가져오는 라우터

 

nodebird-api/controllers/v1.js 

const jwt = require('jsonwebtoken');
const { Domain, User, Post, Hashtag } = require('../models');
...
exports.tokenTest = (req, res) => {
	res.json(res.locals.decoded);
};

exports.getMyPosts = (req, res) => {
	Post.findAll({ where: { userId: res.locals.decoded.id } })
	.then((posts) => {
		console.log(posts);
		res.json({
			code: 200,
			payload: posts,
		});
	})
	.catch((error) => {
		console.error(error);
		return res.status(500).json({
			code: 500,
			message: '서버 에러',
		});
	});
};

exports.getPostsByHashtag = async (req, res) => {
	try {
		const hashtag = await Hashtag.findOne({ where: { title: req.params.title } });
		if (!hashtag) {
			return res.status(404).json({
				code: 404,
				message: '검색 결과가 없습니다',
			});
		}
		const posts = await hashtag.getPosts();
		return res.json({
			code:200,
			payload:posts,
		});
	} catch(error){
		console.error(error);
		return res.status(500).json({
			code:500,
			message:'서버 에러',
		});
	}
};

 

 

- 사용하는 측(NodeCat)에서는 위의 API를 이용하는 코드를 추가한다.

- 토큰을 발급받는 부분은 반복되므로 함수로 만들어 재사용하는 것이 좋다. 

nodecat/routes/index.js

const express = require('express');

const { searchByHashtag, getMyPosts } = require('../controllers');

const router = express.Router();

router.get('/myposts', getMyPosts);

router.get('/search/:hashtag', searchByHashtag);

module.exports = router;

nodecat/.env

API_URL=http://localhost:8002/v1
ORIGIN=http://localhost:4000

nodecat/controllers/index.js

const axios = require('axios');
const URL = process.env.API_URL;

axios.defaults.headers.origin = process.env.ORIGIN; // origin 헤더 추가
//(1)
const request = async (req, api) => {
  try {
    if (!req.session.jwt) { // 세션에 토큰이 없으면
      const tokenResult = await axios.post(`${URL}/token`, {
        clientSecret: process.env.CLIENT_SECRET,
      });
      req.session.jwt = tokenResult.data.token; // 세션에 토큰 저장
    }
    return await axios.get(`${URL}${api}`, {
      headers: { authorization: req.session.jwt },
    }); // API 요청
  } catch (error) {
    if (error.response?.status === 419) { // 토큰 만료 시 토큰 재발급 받기
      delete req.session.jwt;
      return request(req, api);
    } // 419 외의 다른 에러이면
    throw error;
  }
};

//(2)
exports.getMyPosts = async (req, res, next) => {
  try {
    const result = await request(req, '/posts/my');
    res.json(result.data);
  } catch (error) {
    console.error(error);
    next(error);
  }
};

//(3)
exports.searchByHashtag = async (req, res, next) => {
  try {
    const result = await request(
      req,
      `/posts/hashtag/${encodeURIComponent(req.params.hashtag)}`,
    );
    res.json(result.data);
  } catch (error) {
    if (error.code) {
      console.error(error);
      next(error);
    }
  }
};

 

(1) 

- request 함수: NodeBird API에 요청을 보내는 함수

- 헤더의 origin 값을 localhost:4000으로 설정: 어디서 요청을 보내는지 파악하기 위해 사용한다.

 

- 세션에 토큰이 없으면 clientSecret을 사용해 토큰을 발급받는 요청을 보낸다.

- 발급받은 후에는 토큰을 이용해 API 요청을 보낸다.

- 토큰은 재사용을 위해 세션에 저장한다.

- 토큰이 만료되어 419 에러가 발생할 때, 토큰을 지우고 request 함수를 재귀적으로 호출에 재요청한다.

 

- 결괏값의 코드에 따라 성공 여부를 알 수 있고, 실패 시에도 실패 종류를 알 수 있다.

(2)

- GET  /myposts 라우터: API를 사용해 자신이 작성한 포스트를 JSON 형식으로 가져오는 라우터

- 현재는 JSON으로 응답하지만 템플릿 엔진을 사용해 화면을 렌더링할 수 있다.

 

(3)

- GET/search/:hashtag 라우터: API를 사용해 해시태그를 검색하는 라우터

 

 

- localhost:4000에 접속하면 GET  / 라우터는 만들지 않았기에 GET  / 라우터가 없다는 에러가 발생한다.

- 노드 해시태그가 달린 게시글들을 검색한 결과이다.

- 데이터가 JSON 형식으로 오므로 원하는대로 사용할 수 있다.

 

- 1분 뒤 요청이 만료되고 나서 다시 요청을 보내면 알아서 토큰을 재발급한 후 다시 요청을 보낸다.

- nodebird-api의 콘솔에는 다음과 같은 세 개의 요청이 기록된다.

POST /v1/posts/hashtag/노드 419 0.962 ms - 56
POST /v1/token 200 23.383 ms - 252
POST /v1/posts/hashtag/노드 200 8.288 ms - 395

 

6. 사용량 제한 구현하기

- 인증된 사용자더라도 과도한 API 사용은 API 서버에 무리가 간다.

→ 일정 기간 내에 API를 사용할 수 있는 횟수를 제한해 서버의 트래픽을 줄이는 것이 좋다.

- 이러한 기능을 제공하는 express-rate-limit 패키지를 nodebird-api 서버에 다음 패키지를 설치한다.

 

콘솔 

npm i express-rate-limit

 

- verifyToken 미들웨어 아래에 apiLimiter 미들웨어와 deprecated 미들웨어를 추가한다.

 

nodebird-api/middlewares/index.js

const jwt = require('jsonwebtoken');
const rateLimit = require('express-rate-limit');
...
exports.apiLimiter = rateLimit({
    windowMs: 60 * 1000, // 1분
    max: 1,
    handler: function (req, res) {
        res.status(this.statusCode).json({
            code: this.statusCode, // 기본값 429
            message: '1분에 한 번만 요청할 수 있습니다.'
        });
    }
});

exports.deprecated = (req, res) => {
    res.status(410).json({
        code: 410,
        message: '새로운 버전이 나왔습니다. 새로운 버전을 사용하세요.'
    });
};

 

- apiLimiter 미들웨어를 라우터에 넣으면 라우터에 사용량 제한이 걸린다.

- 1분에 한 번 호출 가능하고, 사용량 제한을 초과하면 429 상태코드와 함께 허용량을 초과했다는 응답을 전송한다.

 

- deprecated 미들웨어는 사용하면 안되는 라우터에 붙인다.

- 410 코드와 함께 새로운 버전을 사용하라는 메시지를 응답한다.

 

API 응답 목록

 

- 사용량 제한이 추가되었으므로 기존 API 버전과 호환되지 않는다.

- 새로운 라우터 v2는 기존 v1과 기본적으로 동일하므로 일부만 수정된다.

 

nodebird-api/routes/v2.js

const express = require('express');
const { verifyToken, apiLimiter} = require('../middlewares');
const { createToken, tokenTest, getMyPosts, get PostsByHashtag}= require(' ../controllers/v2');

const router = express.Router;

// POST /v2/token
router.post('/token', apilimiter, createToken);

// POST /v2/test
router.get('/test', apilimiter, verifyToken, tokenTest);

// GET /v2/posts/my
router.get('/posts/my', apiLimiter, verifyToke n, getMyPosts);

// GET /v2/posts/hashtag/:title
router.get('/posts/hashtag/:title', apiLimiter, verifyToken, getPostsByHashtag);

module.exports=router;

 

nodebird-api/controllers/v2.js

...
exports.createToken = async (req, res) => {
    const { clientSecret } = req.body;
    try {
        const domain = await Domain.findOne({
            where: { clientSecret },
            include: {
                model: User,
                attributes: ['nick', 'id'], // 'attribute'를 'attributes'로 수정
            },
        });
        
        if (!domain) {
            return res.status(401).json({
                code: 401,
                message: '등록되지 않은 도메인입니다. 먼저 도메인을 등록하세요',
            });
        }

        const token = jwt.sign({
            id: domain.User.id,
            nick: domain.User.nick,
        }, process.env.JWT_SECRET, {
            expiresIn: '30m', // 30분
            issuer: 'nodebird',
        });

        return res.json({
            code: 200,
            message: '토큰이 발급되었습니다',
            token,
        });
    } catch (error) {
        console.error(error);
        return res.status(500).json({
            code: 500,
            message: '서버 에러',
        });
    }
};
...

 

- 토큰 유효기간을 30분으로 늘리고 라우터에 사용량 제한 미들웨어를 추가했다.

- 기존 v1 라우터를 사용할 때는 경고 메시지를 띄워준다.

 

nodebird-api/routes/v1.js

const express = require('express');

const { verifyToken, deprecated } = require('../middlewares');
const { createToken, tokenTest, getMyPosts, getPostsByHashtag } = require('../controllers/v1');

const router = express.Router();

router.use(deprecated);

//POST /v1/token
router.post('/token', createToken);
...

 

- 라우터 앞에 deprecated 미들웨어를 추가해 v1으로 접근한 모든 요청에 deprecated 응답을 보내도록 한다.

 

- 새로 만든 라우터를 서버와 연결한다.

nodebird-api/app.js

...
const v1 = require('./routes/v1');
const v2 = require('./routes/v2');
const authRouter = require('./routes/auth');
...
app.use('/v1', v1);
app.use('/v2', v2);
app.use('/auth', authRouter);
...

 

- 사용자 입장(NodeCat)으로 돌아와서 새로 생긴 버전을 호출한다.

nodecat/.env

...
API_URL=http://localhost:8002/v2
...

 

- v2로 바꾸지 않고 v1을 계속 사용한다면 410 에러가 발생한다.

- 1분에 한 번보다 더 많이 API를 호출하면 429 에러가 발생한다.

 

7. CORS 이해하기

- NodeCat이 nodebird-api를 호출하는 것은 서버에서 서버로 API를 호출한 것이다.

 

① NodeCat의 프런트에서 nodebird-api의 서버 API를 호출된다면?

 

nodecat/routes/index.js

const express = require('express');
const { searchByHashtag, getMyPosts, renderMain } = require('../controllers');

const router = express.Router();

router.get('/myposts', getMyPosts);
router.get('/search/:hashtag', searchByHashtag);
router.get('/', renderMain);

module.exports = router;

 

nodecat/controllers/index.js

..
exports.renderMain = (req, res) => {
	res.render('main', { key: process.env.CLIENT_SECRET });
};

 

② 프런트 화면도 추가한다.

nodecat/views/main.html

<!DOCTYPE html>
<html>
	<head>
		<title>프런트 API 요청</title>
	</head>
	<body>
	<div id="result"></div>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
		axios.post('http://localhost:8002/v2/token', {clientSecret: '{{key}}',})
        //{{key}}부분이 넌적스에 의해 실제 키로 치환되어 렌더링 된다.
	.then((res) => {
		document.querySelector('#result').textContent = JSON.stringify(res.data);
	})
	.catch((err) => {
		console.error(err);
	});
	</script>
	</body>
</html>

 - 실제 서비스에서는 서버에서 사용하는 비밀 키와 프런트에서 사용하는 비밀 키를 따로 두는 것이 좋다.

→ clientSecret 외에 frontSecret 같은 컬럼을 추가해 따로 관리하는 것을 권장한다.

 

③ CORS 에러

- https://localhost:4000에 접속하면 에러가 발생하며 제대로 동작하지 않는다.

Access-Control-Allow-Origin 에러

- Access-Control-Allow-Origin 에러: 헤더가 없다는 내용의 에러

- 브라우저와 서버의 도메인이 일치하지 않으면 기본적으로 요청이 차단된다.

CORS 에러

- CORS 문제: 현재 요청을 보내는 클라이언트(localhost:4000)와 요청을 받는 서버(localhost:8002)의 도메인이 달라 발생하는 문제

- Network 탭에는 보낸 적 없는 OPTIONS 메서드가 표시되고, POST 요청은 CORS error 실패했다고 뜬다.

- OPTIONS 메서드는 실제 요청을 보내기 전에 서버가 요청의 도메인, 헤더와 메서드 등을 허용하는지 체크하는 역할을 한

다.

 

NodeBird API 콘솔

OPTIONS /v2/token 200 0.302 ms - 4

- NodeBird API 서버 콘솔에도 OPTIONS 요청이 기록된다.

 

④ CORS 문제 해결하기

- 응답 헤더에 클라이언트 도메인의 요청을 허락한다는 뜻인 Access-Control-Allow-Origin 헤더를 넣어야한다.

- 응답 헤더를 조작하려면 응답은 API 서버가 보내는 것이기에 NodeBird API 서버에서 바꿔야한다.

→ NodeBird API에 cors 모듈을 설치하면 된다.

$ npm i cors

- cors 패키지 설치 후 v2.js에 적용한다.

 

nodebird-api/routes/v2.js

const express = require('express');
const cors = require('cors');

const { verifyToken, apiLimiter } = require('../middlewares');
const { createToken, tokenTest, getMyPosts, getPostsByHashtag } = require('../controllers/v2');

const router = express.Router();
router.use(cors({
	credentials: true, //다른 도메인 간에 쿠키가 공유된다. 
}));
...

- 이제 응답에 Access-Control-Allow-Origin 헤더가 추가되어 나간다.

- credentials: true를 활성화해야 다른 도메인 간에 쿠키가 공유된다. 

- credentials: true를 활성화하지 않으면 프런트와 서버의 도메인이 다른 경우 로그인이 되지 않을 수 있다.

CORS 요청 성공

- https://localhost:4000에 접속하면 토큰이 발급된 것을 확인할 수 있다.

- 이 토큰을 사용해 다른 API 요청을 보내면 된다.

Access-Control-Allow-Origin: *

- Access-Control-Allow-Origin:*은 모든 클라이언트의 요청을 허용한다는 뜻이다.

- credentials:true 옵션은 Access-Control-Allow-Credentials 헤더를 true로 만든다.

 

→ 요청을 보내는 주체가 클라이언트라서 비밀키가 모두에게 노출되는 새로운 문제가 발생한다.

CORS 요청도 허용했으므로 이 비밀 키를 가지고 다른 도메인들이 API 서버에 요청을 보낼 수 있다.

 

→ 비밀 키 발급 시 허용한 도메인을 적게 했으니 호스트와 비밀 키가 모두 일치할 때만 CORS를 허용하게 수정한다.

nodebird-api/routes/v2.js

const express = require('express');

const { verifyToken, apiLimiter, corsWhenDomainMatches } = require('../middlewares');
const { createToken, tokenTest, getMyPosts, getPostsByHashtag } = require('../controllers/v2');

const router = express.Router();

router.use(corsWhenDomainMatches);

// POST /v2/token
router.post('/token', apiLimiter, createToken);
...

nodebird-api/middlewares/index.js

const jwt = require('jsonwebtoken');
const rateLimit = require('express-rate-limit');
const cors = require('cors');
const { Domain } = require('../models');
...
exports.corsWhenDomainMatches = async (req, res, next) => {
	const domain = await Domain.findOne({
		where: { host: new URL(req.get('origin')).host },
	});
	if (domain) {
		cors({ 
			origin: req.get('origin'),
			credentials: true,
		})(req, res, next);
	} else {
		next();
	}
};

- 클라이언트의 도메인(req,get('origin'))과 호스트가 일치하는 것이 있는지 검사한다.

- 일치한다면 CORS 허용해 다음 미들웨어로 보내고, 일치하지 않는다면 CORS 없이 next를 호출한다.

- cors 미들웨어의 인수에 origin 속성을 추가해 허용할 도메인만 따로 적는다.

 

- 다시 http://localhost:4000에 접속하면 성공적으로 토큰을 가져온다.

특정 도메인만 CORS 허용

- Access-Control-Allow-Origin이 * 대신 http://localhost:4000으로 적용되어 있다.

- 특정 도메인만 허용하므로 허용되지 않은 다른 도메인에서 요청을 보내는 것을 차단할 수 있다.

 

 

---

quiz

1. 다른 어플리케이션에서 현재 프로그램의 기능을 사용할 수 있게 허용하는 접점을 (   )라고 한다.

2. JWT는 (     ) 형식의 데이터를 저장하는 토큰이다.

3. JWT 토큰은(    )를 알지 않는 이상 변조가 불가능하고, 변조한 토큰은 (     )를 통해 검사할 때 구별할 수 있다. 

4.  API 사용하는 서비스는 다른 서버에 요청을 보내므로 (      ) 역할을 한다.

5. (        )미들웨어를 라우터에 넣으면 라우터에 사용량 제한이 걸린다.

6. 현재 요청을 보내는 클라이언트와 요청을 받는 서버의 도메인이 달라 발생하는 문제를 (      )문제라고 한다.

7. (      ) 옵션은 Access-Control-Allow-Credentials 헤더를 true로 만든다.

 

programming quiz

8. 다음 주석을 참고하여 코드의 빈칸을 채우시오.

const express = require('express');

const { verifyToken } = require('../middlewares');
const { createToken, tokenTest } = require('../controllers/v1');

const router = express.Router();

// POST /v1/token: 토큰을 발급하는 라우터
router.______(________, _________);

// GET /v1/test: 사용자가 토큰을 테스트해볼 수 있는 라우터
router.______(________, _________);

module.exports = router;

 

9. 다음 주석을 참고하여 코드의 빈칸을 채우시오.

const jwt = require('jsonwebtoken');
const rateLimit = require('express-rate-limit');
...
exports.apiLimiter = rateLimit({
    windowMs: 60 * 1000, // 1분
    max: 1,
    handler: function (req, res) {
        res.status(_________).json({
            code: __________, // 기본값 429
            message: '1분에 한 번만 요청할 수 있습니다.'
        });
    }
});

exports.deprecated = (req, res) => {
    res.status(______).json({ //에러코드 401
        code: ______,
        message: '새로운 버전이 나왔습니다. 새로운 버전을 사용하세요.'
    });
};

 

 

---

Answer

1. API

2. JSON

3. JWT 비밀 키, 시그니처

4. 클라이언트

5. apiLimiter

6. CORS

7. credential:true

8.

const express = require('express');

const { verifyToken } = require('../middlewares');
const { createToken, tokenTest } = require('../controllers/v1');

const router = express.Router();

// POST /v1/token: 토큰을 발급하는 라우터
router.post('/token', createToken);

// GET /v1/test: 사용자가 토큰을 테스트해볼 수 있는 라우터
router.get('/test', verifyToken, tokenTest);

module.exports = router;

9.

const jwt = require('jsonwebtoken');
const rateLimit = require('express-rate-limit');
...
exports.apiLimiter = rateLimit({
    windowMs: 60 * 1000, // 1분
    max: 1,
    handler: function (req, res) {
        res.status(this.statusCode).json({
            code: this.statusCode, // 기본값 429
            message: '1분에 한 번만 요청할 수 있습니다.'
        });
    }
});

exports.deprecated = (req, res) => {
    res.status(410).json({
        code: 410,
        message: '새로운 버전이 나왔습니다. 새로운 버전을 사용하세요.'
    });
};

 

 

 

출처) 조현정, 「Node.js 교과서 개정 3판」, 길벗(2022), 10장

 

Corner node.js 2팀

Editor : Sullivan