token이 생성되는 순서
1. client가 server에게 ID 와 PW를 보낸다.(요청)
2. server가 ID,PW를 DB에서 조회 후 결과가 맞으면 token을 생성함. (암호화를 거쳐서 생성함)
3. server가 생성한 token을 client에게 보내줌(응답)
4. client가 token을 cookie에 저장한다.(대부분)
5. 4번까지 완료한 후 client는 매 요청마다 token을 보낸다.
토큰을 생성할땐 데이터 암호화를 거치는데 그때 crypto라는 라이브러리를 사용한다.
각각 객체에 담긴 값들이 있다고 가정하자
let header = {
'alg': 'HS2560',
'typ': 'JWT'
}
let payload = {
"sub": "1234567890",
"name": "HEINI",
"user": "USER",
"iat": 1516239022
}
이 객체를 16진수로 변환한뒤 그걸 64진수로 변환해줘야 한다.
1. 일단 객체가 string 값으로 변해야한다.
JSON.stringify(header)
JSON.stringify(payload)
2. 두객체를 string값으로 바꾼후 그걸 16진수로 나타내 준다.
Buffer.from(JSON.stringify(header))
Buffer.from(JSON.stringify(payload))
결과값:
3. 16진수를 64진수로 변환한다.
Buffer.from(JSON.stringify(header)).toString('base64')
Buffer.from(JSON.stringify(payload)).toString('base64')
결과값:
4. 3번에서 첫번째 결과값 맨 끝에 ==이 붙어있고 이걸 없애기 위해서 replace를 사용해준다.
Buffer.from(JSON.stringify(header)).toString('base64').replace('==', '');
Buffer.from(JSON.stringify(payload)).toString('base64').replace('==', '');
그리고 이 값을 변수에 담아준다.
이렇게 두개의 값을 64진수로 변환했다. 하지만 암호화는 signature이 가장 중요한 부분이다. header와 payload를 합쳐서 변환한 코드이다.
1. 라이브러리 crypto 를 다운 받아준다.
=> npm install crypto
2. 그 안에 method인 createHmac을 사용한다.
=> 첫번째 인자값으로 암호화 방식을 입력해준다
=> 두번째 인자값으로 암호화 규칙을 스트링으로 입력한다.
let signature = crypto.createHmac('sha256', Buffer.from('heini'))
.update(`${encodeheader}.${encodepayload}`)
.digest('base64')
.replace('=', '');
이렇게 나온 값들을 다 합치면 그게 token이다
`${encodeheader}.${encodepayload}.${signature}`
결과값:
eyJhbGciOiJIUzI1NjAiLCJ0eXAiOiJKV1QifQ
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkhFSU5JIiwidXNlciI6IlVTRVIiLCJpYXQiOjE1MTYyMzkwMjJ9
p3FtQkCmF4MZv37rIyPmKlsuV+DpdbHeEYw355S2k/0
eyJhbGciOiJIUzI1NjAiLCJ0eXAiOiJKV1QifQ.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkhFSU5JIiwidXNlciI6IlVTRVIiLCJpYXQiOjE1MTYyMzkwMjJ9.p3FtQkCmF4MZv37rIyPmKlsuV+DpdbHeEYw355S2k/0
값이 제대로 나왔는지 확인하려면 https://jwt.io/ 여기서 token을 인코드 해보면 된다.
'Lecture' 카테고리의 다른 글
Promise 객체 이해하기 (0) | 2021.06.01 |
---|---|
Cookie 이해하기 (0) | 2021.05.27 |
비동기 통신 로딩 처리 (0) | 2021.05.27 |
HTTP 비동기 통신 (0) | 2021.05.25 |
HTTP 동기 통신 (4) | 2021.05.25 |