[기술정리] OAuth 구현 - 카카오 로그인

핵심 개념

리소스 소유자(Resource Owner)

• 서비스를 이용하는 사용자

• 자신의 데이터(리소스)에 대한 권한을 가짐

클라이언트 (Client)

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

리소스 서버 (Resource Server)

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

인증 서버 (Authorization Server)

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

액세스 토큰 (Access Token)

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

장점

보안성 향상

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

편리성

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

확장성

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

동작 과정

1. 사용자 권한 부여
• 사용자가 클라이언트 앱이 자신의 데이터를 사용할 수 있도록 권한을 부여

2. 권한 코드 발급
• 클라이언트는 인증 서버에서 권한 코드를 받음

3. 액세스 토큰 발급
• 클라이언트는 권한 코드를 인증 서버에 보내고, 인증 서버는 클라이언트에게 액세스 토큰을 발급함

4. 데이터 접근
• 클라이언트는 액세스 토큰을 사용해 리소스 서버에서 데이터를 요청

5. 리소스 제공
• 리소스 서버는 액세스 토큰의 유효성을 검증한 후, 요청한 데이터를 제공

[OAuth 구현 - 카카오 로그인 구현 위한 준비]

kakao developers 홈페이지 - 카카오 로그인 하기(회원가입으로 자동 연결)

문서 - 카카오 로그인 - 이해하기, 설정하기, RestAPI

• 하이퍼링크를 시프트 클릭으로 따로 창 띄울것
• 왔다 갔다 하기 편하게 하기 위함
• 설명 읽고 설정해야해서 창 따로 안 띄우면 복잡해짐

• 문서 카테고리에서 설명을 잘 읽고 내 애플리케이션 카테고리에서 설정 하기
• 문서 카테고리의 이해하기, 설정하기, REST API 화면에서 설명 쭉 읽으면 설정해야할 것과 순서 다 나와있음
• 처음에는 읽느라 시간이 좀 걸리지만 한 번 익히면 쉬워서 금방 하게 됨

[OAuth 구현 순서]

1. 애플리케이션 등록(O)
1. 내 애플리케이션 추가하기로 c3-blog 등록 해놓음







 

2. 애플리케이션 설정 (O)
1. 문서의 이해하기, 설정하기, REST API 설명 읽으면서 할 것
2. 플랫폼 등록
1. web 등록
2. 사이트 도메인 http://localhost8080으로 설정



3. 로그인 활성화 설정
4. OpenID Connect 활성화 설정
5. Redirect URI를 http://localhost:8080/oauth로 설정





6. 동의 항목 체크 (닉네임)





 

3. 연동 개발(RestAPI)
1. 인가 코드 받기
1. 문서-이해하기-REST API-인가 코드 받기-요청의 쿼리 파라미터 설명 참고해서
2. 내 애플리케이션 - 앱 설정 - 앱 키에 있는 문자열 활용
3. 브라우저에 활용해야하기 때문에 헷갈리지 않게 밑에 작성한 양식 맞춰서 적어두기

https://kauth.kakao.com/oauth/authorize
client_id=521c3b53393297e6c72cbb9252765a22
redirect_uri=http://localhost:8080/oauth
response_type=code





2. 인가 코드들 한 줄로 조합해서 브라우저 창에 입력 (?와 &위치 주의)
1. 인가 코드의 요청은 GET
2. 응답은 HTTP 302 리다이렉트

https://kauth.kakao.com/oauth/authorize?client_id=521c3b53393297e6c72cbb9252765a22&redirect_uri=http://localhost:8080/oauth&response_type=code





3. 전체 동의하고 들어가면 주소창에 code 확인 가능
1. 사이트에 연결 할 수 없음은 정상
2. 브라우저 주소창에 뜬 code를 이용해서 POST 요청 가능함
3. 전체 동의 누르고 사이트 연결할 수 없음 넘어갈때 관리자 모드 Network에서 응답 코드 302 확인 가능

4. 토큰 받기
1. 문서 - 카카오 로그인 - REST API 설명의 토큰 받기
2. 토큰은 POST 요청

https://kauth.kakao.com/oauth/token



 

5. 포스트맨에 토큰 POST 요청 해보기
1. 헤더는 Content-Type: application/x-www-form-urlencoded;charset=utf-8
2. 바디의 필수 사항들은 받아놓은 인가 코드 활용
3. 그 중 code는 인가 코드를 브라우저 주소창에 입력해서 접속한 다음 동의하기 눌러서 화면 넘어가면 주소창에 뜸

6. 포스트맨에 토큰으로 POST 요청하면 나오는 응답
1. access_token을 받는 것 자체가 OAuth(권한 위임)
2. access_token의 만료 기간이 지나서 못 쓰면 refresh_token으로 access_token을 새로 요청해야함
3. id_token은 Base64로 인코딩 되어있음

7. Base64로 인코딩된 id_token 복호화 시키기
1. JWT 홈페이지에서 id_token 복호화



 

8. 공개키 목록 조회
1. 문서 - 카카오 로그인 - REST API - OIDC:공개키 목록 조회하기의 설명에 나오는 URL 복사
2. 브라우저 주소창에 검색하면(GET 요청) 공개키 목록이 JSON 형태로 나옴