로그인 구현 jwt

로그인을 한번 해보자.

로그인 버튼을 누르면 api/login으로 data를가지고 POST요청을 보낸다.

ID와 PW를 가져온 뒤 pw는 다시 해쉬화를 시킨 후 db속에 일치하는 데이터가 존재하면 result로 담아온다.

만약 존재하지 않는다면 else문으로 빠져 '아이디/비밀번호가 일치하지 않습니다.'라는 메시지를 보낸다.

 

이제 JWT토큰을 만들어 웹 페이지에게 보내는 작업을 시작한다. payload 부분에는 토큰에 담을 정보가 들어있다. 여기에 담는 정보의 한 ‘조각’ 을 클레임(claim) 이라고 부르고, 이는 name / value 의 한 쌍으로 이뤄져있다. 토큰에는 여러개의 클레임 들을 넣을 수 있다.  그 중에 exp(만료시간)와 같은 특정기능을 수행하는 클레임 같은경우는 꼭 이름을 지켜주어야 한다. id에는 로그인 한 id의 값을, exp는 5초뒤의 시간을 넣어주었다. 

 

원래라면 header.payload.signiture이 세부분을 또 base64로 인코딩하고 해쉬까지 해줘야 하는 복잡한 절차를 거쳐야 하지만  파이썬에서는, Pyjwt로 쉽고 간편하게 jwt를 만들고 검증할 수 있다.

 

첫 번째 인자로는 payload를 넣어 원하는 데이터를 넣고, 두번째는 secret_key를, 3번째에는 어떤 해쉬알고리즘을 쓰는 건지 정해준다.  jwt.encode 함수는 결과값으로 jwt 토큰, 즉 암호화된 Header.Payload.Signature 형태의 string을 반환해준다!!!!

 

이렇게 만든 토큰을 json으로 보내면 웹에서는 이를 받고 처리를 한다.

jquery를 사용하면 $.cookie를 통해서 쿠키를 만들어 저장할 수 있다. 여기선 mytoken이라는 이름으로 받아온 jwt토큰을 저장하고 '로그인 완료!'라는 alert를 띄우고 /로 redirect해줬다. 만약 토큰이 제대로 발급이 안되었다면 다른 alert를 띄울 것이다.

 

이러한 토큰이 생성이 되었다. 다시 이걸 디코드 해주어야 우리가 활용할 수 있을 것이다.

decode도 encode와 마찬가지 패턴을 사용한다. payload자리에 token을 넣어주기만 하면 된다.

decode한 내용은 아래와 같다.

이걸 토대로 다시 db에서 관련 정보를 찾을 수 있을 것이다. 근데 여기서 만약 id값을 안줬다고 가정해보자 그럼 우리가 토큰을 가지고 있더라도 db에 접근할 수 가 없을 것이다. (정보가 있어야 db에서 뭘 찾든가 하지)

payload에 있는 id와 db에 일치하는 id를 찾아 가져온 뒤 index.html을 렌더링 해주고 nickname도 같이 전달해주었다.

 

index.html

nickname이 잘 출력이 되는 걸 확인할 수 있다.

 

이렇게 5초가 지나면 우리가 jwt토큰에 설정한 만료기간이 지나서 새로고침을 해보면 

이러한 메시지가 출력이 된다.

그렇다고 해서 쿠키에 jwt가 사라진 것은 아니다. 남아 있지만 토큰 권한을 상실한 것 같다.

만료된 토큰을 넣어서 decode를 진행하면 아래와 같은 에러가 나타난다. 

jwt.exceptions.ExpiredSignatureError: Signature has expired

따라서 아래의 분기문에 걸려서

시간이 만료되었다고 뜨는 것이다.

따라서 자동으로 사라지도록 만들고 싶은데 http 헤더에 쿠키를 삭제하는 걸 넣을 수가 없다나..??

 

로그아웃 버튼을 누르면 웹페이지상에서 mytoken이라는 쿠키를 삭제하도록 해주었다!!