서비스 기획 공부 👩🏻‍💻

SNS 연동 로그인 궁금하지 않으셨나요? (카카오 연동 로그인)

Lamp(램프) 2023. 1. 27. 22:37

1.  오픈 API란?

하나의 웹 사이트에서 자신이 가진 기능을 이용할 수 있도록 공개한 프로그래밍 인터페이스입니다. 기업에서 잘 설계한 API를 오픈해 제공하는 이유는 자사의 서비스 기능을 다양한 서비스에서 활용할 수 있도록 해 서비스의 저변을 넓히는 목적이 있습니다. 메타 서비스를 제공하는 대기업들의 시장 확대를 목적으로 오픈 API를 운영하거나 공공의 목적으로 비영리기관에서 무료로 API를 제공하는 경우도 있습니다.


2. RESTful API란?

API 에도 체계가 필요하다 규격에 맞춰서 실행되는 것입니다. RESTful API는아키텍처 스타일을 따르는 웹 서비스입니다. REST는 인터넷 상의 리소스를 이름으로 표현하며, 이를 조작하는 것을 통해 상태를 관리하는 방식을 의미합니다. CRUD 방식으로 실행되며, 각각의 방식에는 아래와 같습니다. 

 

Create(생성) : POST

Read(읽어오기) : GET

Update(변경) : PUT(전체)/PATCH(일부)

Delete(삭제) : DELETE

 


3. 카카오톡 SNS 연동 서비스 RESTful API 

1) 카카오 싱크란?

아래 SNS 연동 로그인은 여러 쇼핑몰이나 회원가입 창에서 SNS연동 회원가입을 가능캐하여 회원가입을 유도합니다. 이런 기능들이 어떻게 모든 사이트에서 다양한 sns로 연결되어 로그인이 가능했을까요. 그 기능에는 오픈 AP 기능이 숨겨져 있는데, 그 중 카카오에서 로그인을 연동하는 API 기능 이름을 카카오 싱크라고 불립니다. 

 

카카오 싱크의 핵심 기능은 다음 두 가지(간편가입, 더 다양한 사용자 정보 활용) 입니다.

간편가입 동의 화면에서 서비스 이용약관까지 한 번에 동의받을 수 있습니다. 이용약관 동의 절차 생략 가능
더 다양한 사용자 정보 활용 서비스 회원 가입 시 필요한 다양한 사용자 정보를 제공받을 수 있습니다. 이름, 이메일, 전화번호, 연령대, 생일, 성별, 출생연도, 배송지 등 정보를 제공합니다. 회원 정보 입력 절차 생략 가능

 

기능을 목록별로 정리해보자면 아래와 같습니다. 

- 카카오 로그인

- 사용자 정보 가져오기

- 동의한 약관 확인하기

- 카카오톡에서 자동 로그인 (선택)

- 약관 선택해 동의 받기 (선택)

- 카카오톡 공유 (선택)

- 카카오톡 채널 관계 확인하기 (선택)

- 싱크 플러그인 (선택)

 

출처 : 카카오

 

카카오 싱크를 마주한 사용자의 실행 절차는 1~3과 같습니다. 

 

➊ 사용자가 카카오싱크 도입 서비스에서 [카카오로 시작하기] 버튼을 눌러 로그인을 요청합니다. 카카오싱크 도입 서비스에서 사용자는 서비스 회원 ID와 비밀번호 입력 대신 카카오톡을 통해 손쉽게 로그인할 수 있습니다. 카카오톡 실행이 불가능한 환경이라도 카카오계정을 사용해 별도 서비스 회원 가입 절차 없이 로그인할 수 있습니다.

 

➋ 사용자는 카카오톡 또는 카카오계정으로 로그인한 후, 동의 화면에서 정보 제공 동의 항목과 이용약관 모두 한 번에 동의할 수 있습니다. 카카오싱크 도입 서비스의 동의 화면은 이용약관 동의를 포함해, 한 화면에서 회원 가입에 필요한 동의를 모두 받을 수 있도록 지원합니다. 사용자는 동의 화면에서 서비스의 카카오톡 채널을 친구로 추가할 수도 있습니다.

 

➌ 서비스는 카카오에 로그인한 사용자의 사용자 정보 제공을 요청합니다. 카카오싱크 도입 서비스는 일반적인 회원 가입 시 필요한 사용자 정보들을 카카오로부터 제공받을 수 있습니다. 서비스는 제공받은 사용자 정보로 별도 회원 정보 입력 과정을 거치지 않고 즉시 회원가입 처리를 완료할 수 있습니다.

 

출처 : 카카오

 


 

2) 서비스 로그인 과정

사용자 클라이언트와 서비스 서버, 카카오 인증 서버, 카카오 API 서버의 과정에서 단계별로 로그인을 하는 과정입니다. 앱에 등록된 Uri를 전달하고, 조회 및 검증을하면 카카오 API에서 요청 검증 및 처리를 합니다. 그렇게 제공 받은 사용 정보로 서비스 회원 여부까지 확인하여 신규 사용자라면 회원가입 처리가 완료됩니다. 기존 가입자라면 사용자 토큰을 카카오 API로 요청하여 토큰을 전달하여 로그인 화면을 보여줍니다. 만약 미가입자라면 로그인하지 않은 화면을 노출합니다. 

 

출처 : 카카오

 

출처 : 카카오

 


 

3) 로그인/로그아웃/연결끝기 RESTful API 

로그인 API에서는 put과 delete는 없이 post와 get 만 있는 것을 확인할 수 있습니다. 로그인을 위해서는 생성과 읽어오기만 필요하기 때문으로 보여집니다. 로그아웃을 위해서는 수정과 제거라고 생각할 수 있지만, get과 post를 통해 로그아웃을 하고 연결을 끊습니다. 로그인과 토큰을 받을 때는 post와 get을 통해 uri를 받습니다. 대표적으로 로그아웃을 API의 과정을 밑에서 알아보겠습니다.

 

 

Create(생성) : POST

Read(읽어오기) : GET

 

- 카카오 로그인 기본 정보

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

 

- 토큰 받기 기본 정보

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

 

- 로그아웃 기본 정보

POST /v1/user/logout HTTP/1.1
Host: kapi.kakao.com
Authorization: Bearer ${ACCESS_TOKEN}/KakaoAK ${APP_ADMIN_KEY}

 

사전 설정카카오 로그인 : 플랫폼 등록, 카카오 로그인 활성화가 필요합니다. 사용자 액세스 토큰과 리프레시 토큰을 모두 만료시킵니다. 사용자가 서비스에서 로그아웃할 때 이 API를 호출하여 더 이상 해당 사용자의 정보로 카카오 API를 호출할 수 없도록 합니다. 로그아웃은 요청 방법에 따라 다음과 같이 동작합니다.

 

- 액세스 토큰으로 요청

해당 액세스 토큰만 만료 처리

만료된 액세스 토큰을 사용하는 모든 기기에서 로그아웃됨

 

- 어드민 키로 요청

해당 사용자의 모든 토큰 만료 처리

모든 기기에서 로그아웃됨

 

로그아웃 요청 성공 시, 응답 코드와 로그아웃된 사용자의 회원번호를 받습니다. 로그아웃 시에도 웹 브라우저의 카카오계정 세션은 만료되지 않고, 로그아웃을 호출한 앱의 토큰만 만료됩니다. 따라서 웹 브라우저의 카카오계정 로그인 상태는 로그아웃을 호출해도 유지됩니다. 로그아웃 후에는 서비스 초기 화면으로 리다이렉트하는 등 후속 조치를 취하도록 합니다. 서비스에서 필요에 따라 웹 브라우저의 카카오계정 로그인 상태 또한 로그아웃 처리하여야 할 때는 추가 기능인 카카오계정과 함께 로그아웃을 사용해 카카오계정 세션을 만료시켜야 합니다.

 

 

- 카카오계정과 함께 로그아웃 기본 정보

GET /oauth/logout?client_id=${REST_API_KEY}&logout_redirect_uri=${LOGOUT_REDIRECT_URI} HTTP/1.1
Host: kauth.kakao.com

 

- 연결 끊기 기본 정보

POST /v1/user/unlink HTTP/1.1
Host: kapi.kakao.com
Authorization: Bearer ${ACCESS_TOKEN}/KakaoAK ${APP_ADMIN_KEY}


추가) 아래는 카카오에서 제공하는 사용자 경험 항목질문기대 결과참고 문서로서 API를 연동했을 때, 체크 리스트로 활용해 볼 수 있겠습니다. 질문을 통해 오류를 방지하고, 해결하기 위한 참고문서를 연결해 놓음으로서 도움을 얻을 수 있습니다.