[기술 정리] 19. 카카오 로그인 구현(1) - OAuth로 토큰 받기

KangHo Lee's avatar
Dec 10, 2024
[기술 정리] 19.  카카오 로그인 구현(1) - OAuth로 토큰 받기
💡

OAuth(Open Authorization)

  • 사용자가 자신의 계정 정보를 공유하지 않고도 타사 애플리케이션이 특정 서비스에 접근할 수 있도록 허용하는 인증 및 권한 부여 프로토콜
  • 주로 소셜 로그인이나 API 연동에서 사용합니다.

1. 핵심 개념

리소스 소유자(Resource Owner)

  • 서비스를 이용하는 사용자
  • 자신의 데이터(리소스)에 대한 권한을 가지고 있습니다.

클라이언트 (Client)

  • 리소스 소유자의 데이터를 요청하려는 애플리케이션 ex) 타사 앱, 웹사이트

리소스 서버 (Resource Server)

  • 사용자의 데이터를 저장하고 있는 서버 ex) kakao API, Google Drive, Facebook API

인증 서버 (Authorization Server)

  • 사용자의 인증을 처리하고, 클라이언트에게 액세스 토큰을 발급

액세스 토큰 (Access Token)

  • 클라이언트가 리소스 서버에 접근할 수 있도록 인증 서버가 발급하는 임시 키

2. 장점

보안성 향상

  • 사용자의 비밀번호를 클라이언트와 공유하지 않으므로, 정보 유출 위험이 줄어듭니다.

편리성

  • 사용자는 다양한 서비스에서 동일한 계정을 사용하여 간편하게 로그인이 가능합니다.

확장성

  • API를 통해 다양한 애플리케이션과 서비스를 연동 가능합니다.

3. 동작 과정

  1. 사용자 권한 부여
      • 사용자가 클라이언트 앱이 자신의 데이터를 사용할 수 있도록 권한을 부여합니다.
  1. 권한 코드 발급
      • 클라이언트는 인증 서버에서 권한 코드를 받습니다.
  1. 액세스 토큰 발급
      • 클라이언트는 권한 코드를 인증 서버에 보내고, 인증 서버는 클라이언트에게 액세스 토큰을 발급합니다.
  1. 데이터 접근
      • 클라이언트는 액세스 토큰을 사용해 리소스 서버에서 데이터를 요청합니다.
  1. 리소스 제공
      • 리소스 서버는 액세스 토큰의 유효성을 검증한 후, 요청한 데이터를 제공합니다

4. OAuth 활용 카카오 로그인 준비

  • 홈페이지에 들어가서 카카오 아이디로 로그인합니다.

1) 상단 바 문서 클릭 → 사이드바에서 카카오 로그인

notion image
  • 이해하기, 설정하기, REST API 등의 문서를 참고합니다.

2) 애플리케이션 등록

  • 상단 바 내 애플리케이션 클릭
  • 애플리케이션 추가하기
    • notion image

3) 생성된 애플리케이션 설정

  • 생성된 애플리케이션을 클릭
  • 사이드바에서 플랫폼 클릭
    • Web에 사이트 도메인 등록
      • http://localhost:8080
  • 사이드바에서 카카오 로그인 클릭
    • 활성화 설정 ON
    • OpenID Connect 활성화 설정 ON
    • RedirectURI 등록
      • http://localhost:8080/oauth
    • 사이드바에서 동의항목 클릭
      • profile_nickname 설정
        • 필수 동의로 설정
  • 앱 키에서 키 확인 가능
    • notion image

4) REST API 설정 - 인가 코드 받기

  • 문서 → 카카오 로그인 → REST API
  • 인가 코드 받기
    • 메서드: GET
    • URL: https://kauth.kakao.com/oauth/authorize
  • 쿼리 파라미터
    • notion image
    • client_id
      • 앱 REST API 키
      • [내 애플리케이션] > [앱 키]에서 확인 가능
    • redirect_uri
      • 인가 코드를 전달받을 서비스 서버의 URI
      • [내 애플리케이션] > [카카오 로그인] > [Redirect URI]에서 등록
    • response_type
      • code 로 고정
  • GET으로 인가 코드 받기 (주소창에 입력)
https://kauth.kakao.com/oauth/authorize? client_id=f92d26cdf07c73a09eedaaca3939b0cb& redirect_uri=http://localhost:8080/oauth& response_type=code
  • 한 줄로 입력
    • https://kauth.kakao.com/oauth/authorize?client_id=d729fa628e0314a736a22fcf3f2cd37c&redirect_uri=http://localhost:8080/oauth&response_type=code
  • 약관 동의
  • 사이트에 연결 할 수 없음 화면이 뜹니다.
http://localhost:8080/oauth? code=gqM2UmqXrob6bYNfn7ZEPjua8WWINzErOy8QA-9wsM85wzB0urVmzgAAAAQKKiURAAABk64R-CghI_W2iNNaeg
  • code= 뒤의 문자열을 토큰 받기 code에 넣으면 됩니다.

5) REST API 설정 - 토큰 받기

  • 메서드: POST
  • URL: https://kauth.kakao.com/oauth/token
notion image
  • postman으로 양식에 맞춰서 요청 실행
notion image
  • 응답 설명
notion image
  • access_token
    • 탈취당하면 손 쓸 방도가 없기 때문에 만료 기간이 짧습니다.
  • refresh_token
    • access_token이 만료되면 재발급 받을 수 있는 토큰입니다.
💡
자동 로그인 메커니즘
엑세스 토큰으로 인증하다가 만료되면 리프레시 토큰으로 다시 엑세스 토큰 받아서 인증하는 작업을 반복합니다.
아래로 이어집니다.
 
Share article

devleekangho