웹 어플리케이션에 로그인 기능을 구현해야 한다. 아무리 생각해도 대충 하면 안될것 같다. 보안적으로 너무 안일하게 만들 수는 없다는 생각에 열심히 검색한 결과, Json Web Token을 써야겠다는 판단이 들었다.
공부 차원에서 논리의 흐름을 정리하자면, 일단 비밀번호는 최초의 로그인 시에만 사용되어야 한다. 이를 계속 가지고 있다는 것은 그만큼 위험한 짓이다. 그렇다면, '사용자가 GUI상에서 입력 받은 직후 더이상 패스워드를 가지고 있으면 안된다.' 라는 기준을 부합해야 한다. 다양한 방법이 있지만, 웹 표준(RFC 7519)에 맞는 것을 적용하는 것이 낫겠다 생각하여 JWT를 쓰기로 판단했다.
그러니까 최초로 권한을 인증 받은 시한적인 토큰을 인증수단으로 삼으면, 서버는 부하를 줄일 수 있고, 그 토큰을 사용자는 request 할 때마다 같이 보내서 인증 받는다는 개념으로 이해했다.
이 기술은 홈페이지가 있다. https://jwt.io 영잘알은 비루한 내 글보다 이게 낫다.
곤충처럼 총 세 부위로 나뉜다. 인코딩 된 토큰에서는 부위 사이에 점이 있다.
#HEADER
{
"alg": "HS256",
"typ": "JWT"
}
#PAYLOAD
{
"sub": "1234567890",
"name": "John Doe",
"iat": 1516239022
}
#VERIFY SIGNATURE
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
your-256-bit-secret
)
머리(Header).내용(PAYLOAD).서명(VERIFY SIGNATURE)
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
예제에 사용할 id를 strapi user Collection Type에 만들어 주자.
일단 Strapi는 JWT 발급이 기본적으로 된다. 추후 CSRF를 막기 위해 Strapi 프로젝트 내에 JWT Validator를 넣어 줘야 하는 것을 기억하자. 참고
다른 API를 작성하였다면 따로 발급 시스템을 작성해야 한다.
일단 간단히 react-create-app 에다가 예제 작성
import React from 'react';
import axios from 'axios';
export Auth () => {
const login = async (id, password) => {
const { data } = await axios.post('http://서버아이피:포트/auth/local', {
identifier: id,
password: password,
})
console.log(data.jwt);
}
login('예제로만든 아이디','비밀번호');
}
export default Auth.jsx;
import logo from './logo.svg';
import './App.css';
import Auth from './api/auth/Auth';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Auth/>
</header>
</div>
);
}
export default App;
콘솔에 나오는 것을 확인했다. 다음 포스팅에서 쿠키에 저장하는 법을 다루도록 하겠다.
참고 사이트 : https://backend-intro.vlpt.us/4 (개념 설명이 잘 되어 있다.)