선생님.. 소셜 로그인이 하고싶어요..

카카오 소셜로그인 구현할 때 카카오 공식 문서를 보니 oauth 인증-인가 프로세스를 따른다고 해서 ..

oauth 2.0 과정에서 나오는 용어들, 여러 소셜 로그인 중 카카오 계정으로 로그인하는 과정을 기반으로 정리함

등장 배경 & 이유

가장 큰 이유는 다른 서비스의 회원 정보를 안전하게 사용하기 위해서라고 할 수 있다.

예를 들면 고객이 자신의 카카오 아이디/비밀번호를 우리 서비스에 알려주지 않아도, 카카오에 있는 고객의 정보를 우리 서비스에서 안전하게 사용하기 위한 방법이라고 할 수 있다.

또한 대부분의 사용자가 여러 서비스에서 같은 아이디, 비밀번호를 가지고 있기에 굳이 매번 회원가입을 하지 않고도 간단히 소셜 로그인으로도 인증할 수 있도록 했다.

덕분에 새롭게 런칭된, 아직 많은 사용자/신뢰를 확보하지 못한 서비스에 정보 제공을 꺼리는 현상을 위한 것이기도 한것 같다.

OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다.

출처 - 위키백과

구글의 소셜 로그인과 같은 것이 대표적인 예이다.

OAuth 참여자

출처: https://www.geeksforgeeks.org/workflow-of-oauth-2-0/

1. Resource Owner : 보통 사용자, Client 측에서 제공되는 서비스를 통해 로그인하는 유저를 가리킨다.
2. Client: Resoure Server에 접속해서 정보를 가져오고자 하는 클라이언트(웹 애플리케이션)이다.
3. Resource Server: Client가 제어하고자 하는 자원을 보유하고 있는 서버
4. Authorization Server: 권한을 관리해주는 서버, access token, refresh token 등을 발급, 재발급해주는 역할을 한다.

oauth 인증으로 카카오(소셜) 로그인

기본적으로 oauth 2.0 프로토콜은 4가지가 있다.

1. Authorization Code Grant : 권한 부여 승인을 위해 자체 생성한 Authorization Code를 전달하는 방식
2. Implicit Grant : 자격증명을 안전하게 저장하기 힘든 클라이언트(ex: JavaScript 등의 스크립트 언어를 사용한 브라우저)에게 최적화된 방식으로, 위 방식 처럼 따로 Authorization Code 없이 access token 이 발급된다. 대신, refresh token 사용이 불가하다.
3. Resource Owner Password Credentials Grant : username, password로 access token을 받는 방식으로, 주의할 점은  auth server - resource server - client 가 모두 같은 시스템에 속해있을 때만 사용되어야 하는 방식이다. 우리 시스템에서 구글/카카오 소셜 로그인 구현할 때는 쓰이지 못하는 방식
4. Client Credentials Grant : 클라이언트의 자격증명만으로 access token 을 획득하는 방식

출처: https://blog.naver.com/mds_datasecurity/222182943542

위의 블로그를 방문하면 4가지 프로토콜에 대한 더 자세한 내용을 볼 수 있다.

 

일단 이 포스트에서 진행할 카카오 소셜 로그인은 첫번째, 가장 대중적인 방법인

Authorization Code

를 전달받아 access token 을 발급받도록 하는 Authorization Code Grant

로그인 사용자 인증 과정

로그인 과정을 그림을 정리해보면

* 인가코드 - authorization code

1. client 측에서 kakao auth server로 인가 코드를 요청
2. 1번의 응답으로 kakao auth server는 사용자 측에 밑 그림과 같은 로그인 화면을 보내주고 카카오 계정으로 로그인하도록 하고(그림에서의 1-2, 1-3 과정), 미리 지정해둔 동의 항목에 대한 절차도 진행(1-4, 1-5)
3. 인증을 마친 사용자(client)에게 kakao auth server는 인가 코드를 전달
4. client는 받은 인가 코드로 다시 kakao auth server에 token(access, refresh)을 요청할 수 있다.
5. refresh token - 보안적인 이유로 짧은 수명 주기를 가진 access token의 재생성을 위한 용도의 token
6. access token - auth server로 사용자 정보 요청
7. client는 kakao auth server 로부터 받은 토큰으로 다시 kakao resource server에 사용자 정보를 요청할 수 있다.

1. Service Client 등록

먼저 Client 측에서 Resource Server를 이용하기 위해 자신의 서비스를 등록해야한다.

카카오를 예를 들면

내 애플리케이션 만들기- redirect URI 등록 등의 과정이 있을 수 있다.

결과적으로 세가지 정보를 부여받을 수 있다.

Client Id: 클라이언트 웹 애플리케이션을 구별할 수 있는 식별자이며 노출되어도 무방

Client Secret: Client ID에 대한 비밀키로서, 절대 노출해서는 안됨. (선택)

Authroization Redirect URI: Authorization Code를 전달받을 리다이렉트 주소를 얻을 수 있다.

2. 인가 코드 요청

# 기본 정보
GET /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code HTTP/1.1
Host: kauth.kakao.com

kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code 의 형식으로 인가 코드 요청을 보낸다.

위와 같이 auth server로 로그인 요청을 보내고, 응답으로 인가 코드를 받게 된다.

 

요청 데이터 형식

응답 데이터 형식

 

이때 redirect url은
[내 애플리케이션] > [카카오 로그인] > [Redirect URI]
에 등록된 값 중 하나여야한다.

• 인가 코드 요청 결과에 따른 처리
  • 인가 코드 받기 요청 성공
    • code 및 state가 전달된 경우
    • code의 인가 코드 값으로 토큰 받기 요청
  • 인가 코드 받기 요청 실패
    • error 및 error_description이 전달된 경우
    • 문제 해결, 응답 코드를 참고해 에러 원인별 상황에 맞는 서비스 페이지나 안내 문구를 사용자에게 보여주도록 처리

3. token 요청

# 기본 정보
POST /oauth/token HTTP/1.1
Host: kauth.kakao.com
Content-type: application/x-www-form-urlencoded;charset=utf-8

요청 파라미터 형식에 맞춰 auth server(https://kauth.kakao.com/oauth/token)로 token 요청을 보내면 밑 그림과 같은 포맷으로 응답을 받을 수 있다.

 

요청 파라미터 형식

응답 데이터 형식

 

위에서 언급했듯이 여기서 받은 access token으로 resource server 측에 사용 정보 접근 및 요청을 할 수 있다. 그리고 이 access token의 수명은 비교적 짧기때문에 함께 받은 긴 유효시간의 refresh token으로 재발급받을 수 있도록 한다.

 

발급받은 token 유효시간 등의 정보

4. 이후 발급받은 token으로 사용자 정보 요청

GET/POST /v2/user/me HTTP/1.1
Host: kapi.kakao.com
Authorization: Bearer ${ACCESS_TOKEN}/KakaoAK ${APP_ADMIN_KEY}
Content-type: application/x-www-form-urlencoded;charset=utf-8

kapi.kakao.com/v2/user/me로 header에 Authorization: Bearer ${ACCESS_TOKEN} 정보를 넣어 GET 또는 POST 요청을 보내면 된다는 뜻

- 이전에 발급받은 access token을 header에 넣어 요청을 보내고,

- access token의 유효성 검사가 통과하면

밑에 링크에서 볼 수 있듯, 카카오 회원 번호 및 이전 동의항목에서 확인받았던 내용들(닉네임, 이메일 등) 사용자 정보를 함께 응답받을 수 있다.

요청 데이터 형식

응답 데이터 형식

 

이 외에도 토큰 유효성 검사 및 갱신, 로그아웃, 해당 서비스와 카카오 계정의 연결 끊기 등 많은 정보를 카카오 로그인 공식 문서에서 볼 수 있다.

다음엔 구현된 코드와 함께 설명해부야겠다.

참고

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

https://tecoble.techcourse.co.kr/post/2021-07-10-understanding-oauth/