[node.js/md-site]Session 기반 kakao login 구현

📍Login 방식

서버가 클라이언트 인증을 확인하는 방식은 쿠키 세션 토큰이 대표적이다.

cookie의 경우에는 보안에 취약하고 용량이 제한적이라는 단점이 있다.

그래서 요즘에는 거의 다 jwt 아니면 session을 사용하는 것 같다 ㅎㅎ

❓ Session 기반

---

• 클라이언트의 민감한 인증 정보를 서버 측에서 저장 / 관리
  • cookie는 브라우저가 관리했다…
  • 서버 메모리 저장해도 되고 데이터베이스에 저장해도 된다!

Session 인증 방식 정리

• 유저가 로그인하면 세션에 서버에 저장
  • session id를 기준으로 정보 저장함
• 서버는 브라우저의 쿠키에 session id 저장
• request에서 session id를 쿠키에 담아 전송
• 서버는 클라이언트가 보낸 session id와 서버에서 가지고 있는 session id를 비교하여 인증 수행

Session 기반 로그인 / 회원가입의 단점

• 세션 ID를 탈취하여 클라이언트로 위장할 수 있다.
• 서버에서 세션을 저장하므로 요청이 많으면 서버에 부하가 심해짐

❓ 토큰 기반

---

• 클라이언트가 서버 접속 시 서버가 해당 클라이언트에 토큰을 부여하고, 클라이언트는 서버로 요청을 보낼 때 이 토큰을 다시 보내게 됨.
• 클라이언트에 저장이 되어 세션과 다르게 부하가 생기는 게 없음.

토큰 인증 방식 정리

• 사용자가 로그인하고 서버가 클라이언트에게 토큰 발급
• 클라이언트는 발급받은 토큰을 쿠키 / 스토리지에 저장하고 서버에 요청 시 해당 토큰을 헤더에 포함시켜 전달.
• 서버는 전달받은 토큰을 검증하고 요청에 응답
  • DB 조회하지 않아도 됨!

토큰의 단점

• 데이터 길이가 길어 인증 요청이 많으면 네트워크 부하가 생김
• payload는 암호화하지 않기에 유저의 중요한 정보 담기 불가
• 토큰 탈취 시 대처 어려움
  • 이 때문에 사용기간 제한을 두고 refresh 토큰을 발급하게 됨.

❓JWT가 대표적인 토큰 인증 방식이고 여기서 토큰을 Base64로 암호화한다는 점이 특징이다.

😅 내가 Session을 선택한 이유

---

• 일단 지금 개발하는 사이트가 다수의 사용자들이 한 번에 몰리는 사이트가 아니라고 판단하여 세션을 사용했다.
  • 서버에 부담을 줄 정도가 아니라고 생각했기 때문이다!
• 매번 프론트엔드에서 JWT 토큰을 헤더에 담아서 보내주어야 하는데 그게 성가실 것 같아서…

📍 KAKAO LOGIN

🗿 회원가입 대략적인 과정

---

  💡

1. 인가코드 요청
2. 카카오에서 액세스토큰 받기
3. 받은 액세스토큰으로 사용자 정보 조회
4. 받은 사용자 정보로 DB에 저장
5. Session에 보관 

사실 이전에 JWT를 이용한 kakao 로그인을 구현해봤어서 kakao 관련된 건 괜찮았다 ㅎㅎ

😅 낯설었던 부분 등을 정리

---

✨ node.js에서 axios 이용

Spring에서는 외부 api를 이용해봤지만 노드에서 외부 api를 사용한 적이 없었기 때문에 잘 몰랐는데 react.js에서 백엔드로부터 api 요청할 때처럼 axios를 이용한다는 점을 알게 되었다.

const tokenResponse = await axios.post(
            "<https://kauth.kakao.com/oauth/token>",
            null,
            {
                params:{
                    "grant_type" : "authorization_code",
                    "client_id" : KAKAO_REST_API_KEY,
                    "redirect_uri" : REDIRECT_URI,
                    code,
                },
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
                  },
            }
        );

역시 같은 계열이라 그런 것 같다…!

😎 형식 주의!!

이거는 낯설었던 것은 아니고 그냥 내가 실수했던 부분!

const email = userResponse.kakao_account.email;

이렇게 email을 받아오는데 자꾸 email 값이 안 받아져서 보니까 잘 못하고 있었음!!

const email = userResponse.data.kakao_account.email;

이렇게 해야 정상적으로 나오는데 ㅠㅠ

미리 콘솔에 찍어보기만 해도 아는데 이런 실수를 해서 황당했다…

✨ Session 사용

req.session.user = {
                "id": user._id,
                "email": user.email
            };

맨날 query나 body만 req에서 받아왔지 req에 저장하는 건 처음이라 너무 신기했다 ㅎㅎ

const userEmail = req.session.user?.email;

여기서 ?를 하지 않으면 해당 값이 없으면 error가 나는데, ?를 붙이면 null로 반환한다고 한다. 로그인하지 않은 유저 판별 시에 용이할 것 같다!

components: {
      securitySchemes: {
        cookieAuth: {
          type: 'apiKey',
          in: 'cookie',
          name: 'connect.sid', // 세션 쿠키 이름 (기본값이 connect.sid)
          description: '세션 기반 인증'
        },
      },
    },
    security: [
      {
        cookieAuth: [],
      },
    ],

역시나 swagger도 세션 인증을 위한 설정이 필요했다!!

💬 내 생각

대규모 서비스가 아닌 경우에는 세션을 사용하는 것이 편하긴 한 것 같다… 그렇지만,, 대규모 서비스를 다룰 수 있는 곳에 취업할 수 있기를 ㅠㅠ

console에 로그를 남기는 작업이 엄청 중요한 것 같다

로그만 남겼어도 바로 문제점이 보이니까 앞으로는 로그를 깔끔하게 남기는 걸 연습해야겠다 😁😁