소셜로그인 구현하기(1)_그 원리와 절차에 대해서

지난 프로젝트 뿐 아니라 이번프로젝트에서, 그리고 어느 서비스에서든 핵심적인 기능이므로, 먼저 그 원리에 대해서 정리해보고자 한다. 

 

소셜로그인 구현의 원리

소셜로그인을 진행하는 주체는 총 3명이다.

• client : 소셜로그인 때는 우리가 알고 있는 그 유저가 아니다. 바로 소셜로그인을 사용하는 유저, 즉 서비스를 만드는 "나"이다.
• resource owner(임의로 ro) : 소셜로그인 기능을 제공하는 서비스를 사용하는 유저이다. 여기서 owner가 붙는 이유는, client가 받고자 하는 정보의 주인이기 때문이다.
• resource server(임의로 rs): 소셜로그인 기능을 제공하는 곳, 그리고 client가 받아야 하는 진짜 유저의 데이터를 가지고 있는 곳.

 

그렇다면 소셜로그인이란 어떤 서비스일까?

1. 사용자가 소셜로그인 버튼을 누르면, 로그인하고자 하는 소셜의(카카오나 구글) 로그인페이지로 가게된다.
2. 이 때 이 로그인 페이지로 가게 하기 위해, 서비스제공자와 소셜 사이에서의 모종의 상호작용이 일어나게 된다. 이 상호작용을 위해 서비스 제공자는 미리 OAuth라는 서비스를 사용하게 된다. (이에 대해서는 이후에 추가적인 설명을 할 예정)
3. 로그인을 성공하면, 소셜은 사용자의 페이지가 기존에 사용하던 서비스 페이지로 redirect 되도록 해준다.

즉 소셜로그인은, 구글이나 카카오에서 "나"라는 제공자와 "사용자" 사이에서 로그인을 중개해주는 역할을 하는 것이다.
이 중개자의 역할을 가능하도록 해주는 서비스가 OAuth 이다.

사용자가 소셜로그인에 로그인 했을 때, 그 아이디와 비번을 서비스 제공자에게 주는 것이 아니라, OAuth를 거쳐서 소셜에서는 "나"에게 Access Token을 제공하고, "나"는 이 토큰을 통해서 소셜에 접근할 수 있게 되고, 사용자에게 로그인 페이지를 제공할 수 있는 것이다.

 

 

소셜로그인 구현 절차

1. 소셜로그인에 접근하기 위해 client를 rs에 등록하기.

 

-> 이 때 client와 rs 사이에서 3가지 정보를 공유한다.

a. client Id : 내가 구현할 서비스의 식별 ID,
b. client secret : 실제로 소셜서비스가 "나"라는 서비스가 맞는지, 옳은 서비스가 접근하여 로그인을 하려고 하는지 식별하는 pw(보안이슈로 절대절대 노출되면 안된다.)

 -> 카카오는 secret 코드 자체를 제공하지 않는다.

c. Authorized Redirect URL : 소셜 서비스가 인증이 가능하도록 권한을 부여하는 과정에서 그 인증코드(Authorized Code)를 전달해줄 경로

 

2. 등록 절차 이후, 소셜로그인 진행 과정

a. 로그인 하고자 하는 ro 즉, 데이터의 주인인 서비스 유저에게 승인을 받아야 한다.

 -> 따라서 버튼을 누르면, ro가 소셜서비스(rs)에 로그인을 시도하는 창으로 이동한다

   1) 로그인 되어 있는 경우 : 소셜서비스(rs)에서 로그인을 시도한 링크의 client ID를 점검한다.

   2) 로그인 되어 있지 않은 경우 : 우선 로그인 진행하기

 

 -> 로그인 완료 후에, 로그인을 시도한 링크의 redirect URL을 비교.

  1) 소셜서비스가 해당 URL을 가지고 있지 않다면 종료

  2) 같은 URL을 가지고 있지 않다면, ro의 개인 정보를 client에게 제공해도 되는지 허용여부에 대한 메시지를 띄운다.

 

 -> 허용할 경우, 그 응답이 client에게 전달된다.

 

 -> client는 그 응답에 담긴 데이터를 분석한다

  user id : [링크에 담겨있던 client id 값], scope:[그 링크에 담겨있던 scope]

 

b. ro에게 승인을 받았으니, 승인을 받았다는 증거를 가지고 소셜서비스(rs)에게 해당 유저의 데이터를 전달해달라고 요청해야한다. 

• Authorization Code를 소셜서비스가 서비스 사용자에게 제공하는 응답의 header에 location: https://[redirect URL]?code=[Authorization Code]'이라는 값을 주어 redirect하도록 한다.
• location으로 인해, 서비스 사용자는 해당 주소로 redirect 되는 것이다.
• 따라서 서비스 제공자인 "나"는 redirect로 넘어온 URL뒤의 params형태로 담긴 authorization code를 알게된다. 그리고 아래 그림과 같은 형식의 주소로 서비스 제공자는 소셜서비스로 접속한다.

 

• 이 때 서비스제공자인 "나"가 소셜서비스로 접속할때 가지고 간 주소링크에서 Authorizaion code와 clientID, client secret, redirect URL이 모두 일치하는지를 확인한다.
• 일치하면 드디어 Access Token을 발급한다.

 -> access token을 가지고 소셜서비스(rs)에 일종의 get 요청을 보내서 ro의 데이터를 받아오는 것이다!

 

 

Reference

 

OAuth 완벽하게 이해하기

OAuth 절차에 대해 정리한 참고 블로그