• 오늘은 컨디션이 좋지 않아 개인 개발로 대체하였어요! 해당 포스트를 보시고! 따라 구현해보는걸 권장할게요~~!

OAuth 로그인 및 생년월일 입력 흐름 구현하기

오늘은 카카오 OAuth를 활용한 로그인 시스템과 생년월일 입력 단계를 어떻게 구현하는지 배웠습니다. 비개발자도 이해할 수 있도록 쉽게 설명해 볼게요.

🤔 OAuth란 무엇인가요?

OAuth(Open Authorization)는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단입니다. 쉽게 말해, “카카오로 로그인하기”, “구글로 로그인하기” 같은 기능을 가능하게 하는 기술이에요.

📱 오늘 구현한 내용

우리가 만든 웹사이트는 다음과 같은 흐름으로 동작합니다:

1. 사용자가 “카카오로 로그인” 버튼을 클릭
2. 카카오 로그인 페이지가 나타나고 사용자가 로그인
3. 로그인 성공 후 처음 방문한 사용자라면 생년월일 입력 화면이 표시됨
4. 이미 생년월일을 입력한 사용자는 바로 메인 페이지로 이동

🔍 주요 구성 요소들

1. 백엔드 (서버) 부분

서버는 실제 데이터를 저장하고 처리하는 곳입니다.

User와 UserInfo 엔티티

• User: 사용자의 기본 정보(카카오 ID 등)를 저장
• UserInfo: 사용자의 추가 정보(생년월일, 닉네임 등)를 저장

JWT(JSON Web Token)

• 로그인 상태를 유지하기 위한 토큰
• 사용자 정보를 암호화하여 브라우저에 저장해두고, 서버에 요청할 때마다 함께 보냄

OAuth 성공/실패 처리기

• 카카오 로그인 성공 시: 사용자의 생년월일 여부를 확인하여 다른 페이지로 리다이렉트
• 실패 시: 메인 페이지로 리다이렉트

2. 프론트엔드 (웹 브라우저) 부분

사용자가 직접 보고 상호작용하는 부분입니다.

Home 컴포넌트

• 메인 페이지를 보여주는 컴포넌트
• URL 파라미터를 확인하여 로그인 상태나 생년월일 입력 여부를 판단

BirthdayInputPopup 컴포넌트

• 생년월일을 입력받는 팝업 창
• 입력된 생년월일을 서버에 저장하고, 서버에서 받은 토큰을 저장

AuthService

• 로그인 관련 기능들을 모아놓은 서비스
• 토큰 저장, 가져오기, 삭제 등의 기능 제공

🧩 작동 방식 (자세히)

1. 카카오 로그인 버튼 클릭 → 카카오 인증 페이지로 이동

2. 카카오 인증 완료 후 → 서버에서 사용자 정보 확인
   • 생년월일 있음: /?token={JWT토큰} 주소로 리다이렉트
   • 생년월일 없음: /?userId={userId} 주소로 리다이렉트
3. 프론트엔드에서 URL 파라미터 확인
   • token 있음: 로컬 스토리지에 저장하고 로그인 상태로 전환
   • userId 있음: 생년월일 입력 팝업 표시
4. 생년월일 입력 및 저장
   • 서버에 생년월일 저장 API 호출
   • 서버에서 JWT 토큰 발급 받아 저장
   • 로그인 상태로 전환

💡 알아두면 좋은 용어들

• JWT(JSON Web Token): 사용자 인증 정보를 안전하게 전달하는 토큰
• OAuth: 외부 서비스(카카오, 구글 등)의 인증을 활용하는 기술
• 로컬 스토리지: 웹 브라우저에 데이터를 저장하는 공간
• 리다이렉트: 다른 페이지로 자동으로 이동시키는 것
• API: 서버와 클라이언트가 데이터를 주고받는 방법

🎓 오늘의 교훈

1. 사용자 경험은 세세한 흐름에서 만들어집니다. 로그인 후 바로 서비스 이용이 가능하게 할지, 추가 정보를 입력받을지 등 다양한 시나리오를 고려해야 합니다.

2. 보안은 중요합니다! 개인정보(생년월일 등)는 안전하게 저장하고, JWT 같은 토큰을 활용해 인증 시스템을 구축해야 합니다.

3. 프론트엔드와 백엔드의 협업이 중요합니다. 서로 주고받는 데이터 형식과 API 주소 등을 명확히 정의해야 합니다.

이상으로 오늘의 개발 이야기를 마칩니다. 개발은 어려워 보이지만, 하나씩 단계를 나누어 생각하면 이해하기 쉬워요! 😊