✨feat(OAuth 2.0): add kakao login API

[Hyyena]

카카오톡 로그인 기능

구현 예정 기능

TODO

1. DB에 refresh token 저장 메서드 구현

2. 로그아웃 시 DB에서 refresh token 삭제

3. 토큰 재발급 메서드 구현

• access token이 만료된 경우, refresh token을 이용해 access token 재발급
• 이후 refresh token도 재발급
  • RTR(Refresh Token Rotation)
    • refresh token은 일회성

카카오 로그인 인증 과정 참고

참고 블로그와는 다르게 세션이 아닌 jwt를 이용하여 구현했습니다.
passport가 로그인을 처리하는 과정을 참고해주시면 감사하겠습니다.

API

카카오 로그인 과정

1. http://localhost:3030/api/v1/auth/kakao 접속

2. 아래와 같이 카카오 로그인 페이지로 이동

3. 카카오 로그인 후, http://localhost:3030/api/v1/auth/kakao/Callback으로 리다이렉트

JWT 디코딩

미들웨어

Access Token 검증

Access Token 검증 성공

Access Token 검증 실패

소셜 로그인 기능 참고

JWT 저장 위치

고민

• 구글이 2023년에 크롬에서 쿠키를 퇴출하고, 토픽스(플록의 논란으로 계획이 변경된 듯)라는 대체제를 도입하기로 함
• 이러한 상황을 고려하여 로컬 스토리지를 써볼까 했지만 XSS 취약점이 우려됨
• 쿠키가 사라지고 생기는 새로운 기술에 대한 공개가 되지도 않았고, 현 시점에서 쿠키가 사라질 것을 생각하고 대응하는 것은 무리라고 판단
• 쿠키의 취약점인 XSS, CSRF 공격은 쿠키 옵션(httpOnly, secure, sameSite)을 이용하여 안정성 확보

Client

• Access Token
  • 메모리(private 변수)에 저장
• Refresh Token
  • Cookie
    • DB에 저장된 Refresh Token을 쿠키에 보관
    • 옵션
      • httpOnly
        • Script 접근 방어
      • secure
        • https 통신에서만 쿠키 사용 가능(패킷 감청 방어)
      • sameSite=Lax
        • Strict 모드
          • 동일한 도메인 범위에서만 쿠키 사용 가능
        • Lax 모드
          • 사용자가 페이지 이동이나 form을 통한 GET 요청 시에만 쿠키 사용 가능
  • Local Storage
    • DB에 저장된 Refresh Token의 index 값과 user_id를 조합하여 Hashing한 값을 저장

Server

• Refresh Token
  • DB에 저장

JWT 핸들링 과정

1. Server

1. 로그인 시 access token과 refresh token 생성
2. refresh token을 DB에 저장
3. Client로 토큰 전달
   1. access token은 JSON 객체로 응답
   2. DB에 저장된 refresh token을 쿠키에 담아 httpOnly, secure, sameSite=Lax 옵션을 지정하여 응답

2. Client

1. Server로부터 받은 access token은 메모리(private 변수)에 저장
2. 권한이 필요한 요청 시 Authorization Header에 access token을 담아 요청
3. access token 만료 혹은 페이지 이동으로 인해 토큰이 사라졌을 경우, Server로 access token 재발급 요청
   1. access token 재발급 요청 시, 쿠키에 refresh token 값을 담은 상태로 Server와 통신

3. Server

1. access token 재발급 요청을 받을 경우, Client로부터 받은 refresh token을 확인 후 access token과 refresh token을 재생성한다.
   1. 이후 토큰 저장 과정은 앞서 기술한 것과 동일

etc

1. 로그 파일 수정 (좀 더 손봐야 함)

• 로그 출력 시 객체 변수들이 [object Object]와 같이 포맷팅 된 채로 출력돼서 logger.js를 수정하였습니다.

---

close [BE/FEAT] 카카오톡 로그인 구현 #2

[jeongpine14]

access token과 refresh token 이해가 어렵네여어🥹