항해99 7주차 WIL

1. 클론코딩 프로젝트

클론코딩 프로젝트 주차가 진행되었다. 필자의 조는 크몽을 클론코딩할 대상으로 정했고 이에 따라 각자 분량을 맡고 접근하기로 하였다. 기본적인 CRUD에 소셜 로그인, 실시간 채팅을 추가 기능으로 삼고 이를 진행하게 되었다. 필자가 맡은 부분은 CRUD 및 소셜 로그인이었다. 필자는 소셜 로그인을 이번 주에 미리 해봄으로서 향후 있을 실전 프로젝트에 대비하여 준비 단계를 밟기로 했다. 

2. 소셜 로그인

소셜 로그인은 인터넷에서, 다른 서비스의 계정에 기대러 새로운 계정을 만들고 접속하는 기능이다. 스마트폰을 사용하는 사용자 700명을 대상으로 조사한 결과, 소셜 로그인 이용 경험이 있는 사용자가 약 93퍼로 나타았고 낮은 연령대일수록 소셜 로그인 사용 경험이 많았다. 앱 이용에 앞서 1) 앱 내 회원가입 2) 소셜 로그인 두 방법이 모두 가능할 경우,소셜 로그인으로 로그인하는 사용자가 앱에서 직접 회원 가입하는 사용자보다 2배 이상 많았다.  또한 사용자는 1) 회원가입 등 시간 단축을 위해 2) 계정관리가 번거로워서 등의 이유로 소셜 로그인을 사용한다고 한다. 절반 이상의 유저들이 시간 단축을 위해서 소셜 로그인을 사용하는 것이다. 이렇듯이 요즘 회원가입 등의 시간 단축이나 계정 관리의 번거로움으로 인해 소셜 로그인을 많이 사용하고 있다.

 

출처:

https://brunch.co.kr/@toqha7822/7

왜 꼭 소셜 로그인일까  

3. 소셜 로그인 원리

소셜 로그인을 진행하는 주체는 3명으로 

 

클라이언트: 서비스를 사용하는 주체, 서비스를 만드는 나

 

리소스 오너: 소셜 로으니 기능을 제공하는 주체

 

리소스 서버: 소셜 로그인을 통해 받아온 데이터를 저장하는 서버

 

이렇게 구성된다.

 

소셜로그인은, 구글이나 카카오에서 "나"라는 제공자와 "사용자" 사이에서 로그인을 중개해주는 역할을 하는 것이다.

이 중개자의 역할을 가능하도록 해주는 서비스가 OAuth 이다.

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

 

4. 소셜 로그인 구현 절차

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

이 때 클라이언트 와 리소스 서버 사이에서 3가지 정보를 공유한다.

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

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

 

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

로그인 하고자 하는 리소스 오너의 승인을 받아야 하기에 버튼을 누르면 리소스 오너가 리소스 서버에 로그인 시도 창으로 이동한다.

로그인이 되어 있다면 로그인 서버에 로그인을 시도한 링크의 클라이언트 아이디를 점검하고, 로그인이 안 되어 있다면 로그인을 진행한다.

이후 로그인을 시도한 링크의 리다이렉트 URL을 비교하여 리소스 오너의 개인 정보를 클라이언트에게 제공하게 된다.

리소스 오너에게 승인을 받았으니 승인을 받았다는 증거를 가지고 리소스 오너에게 해당 유저의 데이터를 전달해달라고 요청한다.

• 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의 데이터를 받아오는 것이다!

 

출처: https://hazel-developer.tistory.com/79

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

5. 이후 과정

필자는 이렇게 공부한 소셜 로그인을 향후 실전 프로젝트에 적용해볼 생각이다. 이제 실전 프로젝트라니 너무 떨리고 어찌보면 항해99의 절반을 넘긴 느낌이라 좀 실감이 나질 않는다. 한 달 반 전에 나는 아무 것도 모르는 개발 지망생이었다면 이제 계속 웹사이트를 만들면서 웹 어플리케이션이 어떻게 흘러가는지 감이 잡히고 눈에 보이기 시작했다. 두렵지만 어쩌겠나 해야지