인증 & 인가는 웹개발자라면 반드시 이해하고 있어야 하는 기본 지식이다. 인증과 인가 절차 및 인증의 필수요소인 패스워드 암호화, 그리고 인가의 필수요소 JWT에 대해 알아보도록 하자.
일단 로그인 절차를 보고 가보도록 하자.
📌비빌번호 암호화
유저의 비밀번호는 당연하지만 그대로 DB에 저장하지 않는다. 해킹당할 수도 있고, 내부 인력이 비밀번호를 볼 수 없게 하기 위함이다.
비밀번호 암호에는 일반적으로 단방향 해쉬 함수가 쓰이고, 원본 메시지를 변환하여 암호화된 메시지인 다이제스트를 생성한다.
암호화된 메시지로는 원본 메시지를 구할 수 없어서 단방향성 이라고 한다.
예를 들어, "test password"를 hash256이라는 해쉬 함수를 사용하면 0b47c69b1033498d5f33f5f7d97bb6a3126134751629f4d0185c115db44c094e 값이 나온다.
이러한 효과를 avalance라고 하는데 비밀번호 해쉬 값을 해킹을 어렵게 만드는 하나의 요소이다.
📌단방향 해쉬 함수의 취약점
해시 함수는 원래 패스워드를 저장하기 위해서 설계된 것이 아니라 짧은 시간에 데이터를 검색하기 위해 설계된 것이다.
이러한 속성 때문에 공격자는 매우 빠른 속도로 임의의 문자열의 다이제스트와 해킹할 대상의 다이제스트를 비교할 수 있다.
대부분 사용자의 패스워드는 길거나 복잡하지 않을 뿐 아니라, 동일한 패스워드를 사용하는 경우도 많다.
그맇기 때문에 패스워드가 충분히 길거나 복잡하지 않은 경우에는 그리 긴 시간이 걸리지 않는다.
📌 단방향 해쉬 함수의 취약점에 대한 보완점
바로 솔팅(salting)과 키스트레칭(key streching)이다.
솔팅은 실제 비밀번호 이외에 추가적으로 랜덤 데이터를 더해서(소금을 치듯!) 해시값을 계산하는 방법이다.
키 스트레칭은 단방향 해쉬값을 계산 한 후 그 해쉬값을 또 해쉬 하고, 또 이를 반복하는 것을 말한다.
Salting과 Key Stretching을 구현한 해쉬 함수중 가장 널리 사용되는 것이 bcrypt이다.
bcrypt는 처음부터 비밀번호를 단방향 암호화 하기 위해 만들이전 해쉬함수 이다.
📌JWT(JSON Web Tokens)
유저가 로그인에 성공한 후에는 access token이라고 하는 암호화된 유저 정보를 첨부해서 request를 보내게 된다.
위같은 형식으로 토큰이 첨부된다. 그러면 서버에서는 access token을 복호화 해서 해당 유저 정보를 얻게 된다.
이런 절차의 목적은 해당 유저가 매번 로그인 하지 않도록 하는 것이다.
access token을 생성하는 방법은 여러가지가 있는데, 그 중 가장 널리 사용되는 기술중 하나가 바로 JWT(JSON Web Tokens)이다.
JWT는 말 그대로 유저 정보를 담음 JSON 데이터를 암호화 해서 클라이언트와 서버간에 주고 받는 것이다.
인가(Authorization) 절차는 한번 읽고 가도록 하자!
4월 21일 세션으로 진행한 백엔드 동기분들과의 로그인 회원가입을 절차를 실습으로 진행했다.
역시 백날 글을 읽는 것보다 한번 실습해보는 것이 더 많은 도움이 되었다.
간단하게 정리를 해보도록 하자.
const goToMain = () => {
fetch("http://API주소/users/signin", {
method: "POST",
body: JSON.stringify({
email: id, //미리 선언한 state값으로 들어오는 id값
password: pw, //미리 선언한 state값으로 들어오는 pw값
}),
})
.then((response) => response.json())
.then((result) => console.log("결과: ", result));
};위와 같은 코드로 실습을 진행했다.
일단 goToMain()의 기능을 로그인 button에 연결해주었다.
그리고 fetch함수로 server에 요청(Request)을 보내는데 일단은 회원가입 버튼은 없으니 로그인 버튼에 api주소값을 회원가입과 로그인시의 주소로 변경해주면서 진행했다.
백엔드 동기분이 보내주신 주소를 주소칸에 입력하고, id는 이메일형식으로, pw는 백엔드분이 정해진 형식으로 가입을 했다.
그리고 200 ok를 확인한다.
참고로
.then((response) => response.json())
이거 입력안했다가 다 완료됐는데 나중에 토큰값 못받았으니 꼭 확인하자.
토큰은 개발자도구의 network에서 확인 할 수도 있고, 제일 위의 코드예시와 같이 console.log를 통해 콘솔에서 result값을 확인 할 수도 있다.
res.json()의 의미는 이해가 안되서 좀 더 공부필요!!ㅎㅎ
그리고 다음은 로그인시의 api주소로 바꿔서 입력해주고, 회원 가입시의 아이디와 비밀번호로 로그인을 하고 200 ok를 확인한다.
로그인까지 완료되면 마지막으로 토큰이 잘 넘어오는 것까지 확인하고 실습을 종료했다.
실습 중간중간 기록을 남기지못해 아쉬운 리뷰가 되었다.
간단하게 해봤지만 실제로 백엔드분들과 같이 해보니, 개발자에게 왜 소통이 중요한지 알게 되었다는 점에서 만족하자.
