Day 17 개발일지 Web
월요일에 멘토님과 회의를 했을 때 TOTP 관련 미들웨어들은 많이 나와있기 때문에 직접 구현해보셨으면 좋겠다고 하셨다 ! 그래서 TOTP 6자리를 뽑아내서 입력받은 값을 비교하는 방식을 Truncation과정을 직접 구현보기로 했다. 후우 우선 구조적으로는
출처 : https://ldap.or.kr/1373-2/
설명을 보고 그대로 구현하기로 했다. 설명을 이해하는 과정을 TOTP 프로젝트를 초반에 시작했을 때 한번 했던 부분이라서 어렵지 않았지만, 구현하는 문제는 또 다른 문제였다. 직접 sha1 알고리즘을 구현해서 이 과정을 개발하면 상당한 시간이 소요되기 때문에 HMAC 알고리즘을 활용하기로 했다. 어찌저찌 직접 Truncate 과정을 코드로 구현하였지만.. 문제는 QR Code를 찍어서 결과를 보니 .. 값이 달랐다 !!!!! 내가 구현한 코드가 틀렸을 수도 있다는 생각에 코드를 뜯어보고 있던 와중 .. 코드는 문제가 없다 👊 라는 판단이 들어서 구현하는 방식을 찾아다녔습니다.
이 때 들어온 한줄기의 빛 🎇
출처 : https://hackernoon.com/how-to-implement-google-authenticator-two-factor-auth-in-javascript-091wy3vh3
TimeStamp 값을 스트링 그대로 넣어주는 것이 아니라 Buffer를 통해서 Little Endian에서 Big Endian으로 바꿔서 넣어줘야 한다는 것 이었습니다. 이부분을 수정하고 나니 Google Authentication 과 일치하는 TOTP 6자리를 갖을 수 있게 되었습니다 ~! 내일 이부분을 함께 공유하면 좋을 것 같습니다.
오늘 TOTP truncate 과정을 구현하였는데 생각보다 까다로웠던 작업이었다.
여기서 내가 느낀 것은 API든 어떤 것이든 사용할 때 한개의 예시코드를 보고 바로 사용하는 것이 아니라 사용하기전에 내부적인 구조와 방법들을 자세히 알아보고 접근해보면 좋다고 생각이 들었다.
오늘 구현하면서 TimeStamp의 경우 Big endian으로 사용되야 한다는 것을 몰랐기 때문에 TOTP 6자리가 다르다는 것을 찾기 힘들었던 것 같다 ..
오늘은 오후부터 작업을 했는데 처음 한 작업은 비밀번호 찾기 api였다. api 중에 필요한 입력값들을 2번의 입력으로 받는 경우가 많은데(예: id/pw, totp) 이런 경우에는 서버에 첫 번째 요청에 대한 상태가 있어야 한다. 그래서 어떻게 할 지 고민하다가 첫 요청의 응답으로 jwt를 주기로 했다. jwt에는 유저의 아이디와 요청 종류를 나타내는 액션 값을 담아주었다.
저녁에는 새로 수정한 Input 컴포넌트로 로그인 창을 수정했다. 로그인 폼도 완성하고 모달에도 애니메이션을 주었더니 더 그럴싸해졌다..
이제 세션, totp 구현이 큰 숙제가 될 것 같은데 데모 전까진 어느정도 구현을 하려면 계속 열심히 달려야 할 듯 하다.
아이디 찾기 관련 API 를 구현하였다 일치하는 정보를 받아서 Email 로 전송해주는 작업이였다. 진행에 있어서 어려움은 없었다. 관련해서 FE 작업도 진행하는데 있어서 많은 부분이 재사용 되어지고 있어서 작업 자체는 수월했으나 여전히 타입을 주는 것은 쉽지 않는 작업이였다. 밀린 Session API 들은 다음주로 작업을 미뤄야 겠다는 생각이 들었다. 항상 백업을 잘하고 다니자...