Web

OAuth 는 무엇일까? OAuth 2.0 소셜로그인

핏짜보이 2022. 4. 19. 10:35
반응형

(해당 포스팅은 OAuth에 대한 상세 구현보다는 큰 흐름을 파악하기 쉽도록 작성하였습니다.)

 

 


<목차>

1. OAuth를 왜 사용할까?

2. OAuth 2.0의 구성요소

3. Access Token

4. 어떻게 Access Token을 받을까?

5. Access Token 넘겨받기

6. Redirect

7. 사용자의 정보 받기

8. 마무리 요약


 

1. OAuth를 사용할까?

다양한 웹/ 앱서비스를 사용하다보면 아래와 같이 다른 계정으로 로그인과 회원가입을 사용할 수 있다.

그림은 실제 원티드의 웹사이트 로그인 화면

그렇다면 이를 구현하기 위해서 어떤 점이 필요한지 기술적인 부분을 생각해보자.

우리의 서비스를 사용하려는 고객이 구글의 회원임을 어떻게 알 수 있을까?

 

간단한 방법은 고객에게 구글의 아이디/비밀번호를 받아서 구글에 로그인을 하면 된다.

 

하지만, 이 방법은 말도 안되는 방법이다. 이를 위해서 OAuth라는 개념이 생겼다.

 


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

- 출처 : 위키백과


다시 말해서 OAuth는 다른 서비스의 회원정보를 안전하게 사용하기 위한 방법이라고 생각하면 된다.

여기서 말하는 '안전하게' 의 주체는 회원 정보의 소유자,  우리의 고객이다.

 

즉, 우리 서비스의 고객이 안전하게 다른 서비스의 정보우리 서비스에게 건네주기 위한 방법이다.

(참고로 OAuth 2.0은 1.0에서 알려진 보안 문제등을 개선한 버전이다.)

 


2. OAuth 2.0의 구성요소

구분 설명
Client 자사 또는 개인이 만든 서버, 서비스
Resource Owner 웹서비스를 이용하려는 유저. 자원(개인정보)를 소유하는 자. 나의 서비스를 사용하는 사용자
Resource Server 사용자의 개인정보를 가지고 있는 회사(구글, 트위터 등)의 서버
Authorization Server 권한을 부여(인증에 사용할 아이템 제공)하는 서버
Client는 Token을 이 서버로 넘겨서 사용자의 개인정보를 응답받을 수 있음
Access Token 자원에 대한 접근 권한을 Resource Owner가 인가하였음을 나타내는 자격증명
Refresh Token ClientAuthorization Server로 부터 Access Token(비교적 짧은 만료기간을 가짐)과
Refresh Token(비교적 긴 만료기간을 가짐)을 함께 부여받음

Access Token은 보안상 만료기간이 짧기 때문에 얼마 지나지 않아 만료되면 사용자는 다시 로그인을 시도해야함
그런데 Refresh Token이 있으면 Access Token이 만료될때, Refresh Token을 통해서 Access Token을 재발급 받아서 다시 로그인할 필요가 없게 됨

 

아래 그림으로 보면 이해가 쉽다.


3. Access Token

OAuth의 핵심 Access Token이라고 할 수 있다.

이 Access Token은 임의의 문자열 값인데, 이 문자열의 정체는 토큰을 발급해준 서비스만 알 수 있다. 

 

이 Access Token을 사용해, 이 토큰값과 관련된 고객의 정보를 우리는 해당 서비스에 요청할 수 있다. 

해당 서비스는 이 토큰을 검증하고, 발급된게 맞다면 해당 고객의 정보를 넘겨준다.

 

즉, Access Token의 존재 자체로 고객이 정보를 넘겨주는 것을 동의함의 증거라고 할 수 있다.

Access Token을 넘겨주면 네이버에서는 고객의 정보를 넘겨준다. 이를 위해서 우리가 OAuth를 사용하는 것이다.

 


4. 어떻게 Access Token을 받을까?

우리가 Access Token을 네이버에게 받기 위해서는 특정 고객이 네이버의 회원임을 인증해야한다. 

이를 인증하기 위해서는 고객이 네이버에 로그인을 하면 된다.


5. Access Token 넘겨받기

고객이 네이버에 로그인을 하고 네이버에서는 고객에게 Access Token을 발급했다.

 

그렇다면 이 토큰을 우리 서비스에서는 어떻게 받을 수 있을까?

여러 가지 방법이 있지만, 단순한 방법은 회원가입할 때 핸드폰 인증을 받는 형식의 방법이 있을 수 있다.

 

네이버에 로그인을 하면, 네이버가 토큰값을 화면에 출력한뒤

고객이 해당 토큰을 복사해서 우리 서비스의 토큰 입력페이지에 접속해서 

토큰을 붙여넣으면 된다. 

 

그런데 너무 번거롭다. 

 

다른 방법으로는 어떤 것이 있을까?

 


6. Redirect

HTTP에는 리다이렉트 메시지가 존재한다.

이 메시지는 서버에서 클라이언트에게 어디로 가라고 지정해주는 메시지이다.

리다이렉트를 이용하면, 고객이 가만히 있어도 웹브라우저가 알아서 페이지를 이동한다.

이를 이용하면 고객이 직접 페이지를 이동할 필요가 없어진다.

 

고객이 로그인을 하고, 네이버에서 다시 우리서비스로 리다이렉트 시켜주면

고객은 가만히 앉아서 우리 서비스로 넘어올 수 있다.

 

그렇다면 토큰값은 어떻게 받아올 수 있을까?

간단하다. URL에 Query String으로 묶어서 건네주면 된다.

 

리다리엑트 되는 URL은 우리가 네이버에 알려줘야 URL에서 토큰값을 추출하는 로직을 해당 페이지에서 처리할 수 있게 구현할 수 있다.

위와 같은 방식으로 우리도 URL에 리다이렉트 URL을 묶어서 네이버로 이동하게 하면 된다.

흔히 말하는 소셜로그인을 클릭하고 URL을 확인해보면 위와 같은 리다이렉트 URL이 포함된 것을 확인 할 수 있다.

 

하지만 생각해보면 하나의 문제가 발생할 수 있다. 

만약 악의적인 사용자가 XSS 공격이나 피싱 사이트를 이용해서 redirect_uri를 자기가 원하는 사이트로 바꾸면 어떻게 할까?

(그렇게 되면 공격자는 나의 Access Token을 가로챌 것이다.)

 

이런 위험을 막기 위해, 각 사이트는 OAuth를 사용하려면 우선 해당 서비스에 등록절차를 밟아야 하도록 하고 있다.

즉 우리 서비스에서 네이버 로그인 기능을 사용하려고 한다면 사전에 네이버에 등록을 하고 승인을 받아야 하는 것이다.

 

그리고 이런 등록 과정에서 여러가지 정보를 기입하는데, 이때 redirect_uri도 사전에 합의를 한다.

그래서 합의된 redirect_uri가 아닌 다른 값으로 로그인 요청페이지를 보냈다면,

네이버에서 이를 수상한 행동으로 여기고 응답하지 않는 것이다.

 


7. 사용자의 정보 받기

이제 네이버에서 받은 사용자의 Access Token을 네이버에서 지정한 형식에 맞게 넘겨주면, 

네이버는 사용자의 정보를 전달한다.

 


 

8. 마무리 요약

 

OAuth는 위에서 볼 수 있듯이 크게 3가지 단계로 나누어진다.

 

1. 서비스를 등록하는 과정

  • 자사 서비스를 네이버에 등록하기
  • 이 과정에서 redirect_uri등을 합의하기

 

 

2. 토큰을 받기 위한 과정

  • 사용자를 네이버 로그인 페이지로 이동시키기
  • 네이버가 사용자를 우리 서비스로 리다이렉트 시키기

 

 

3. 토큰을 이용해 정보를 요청하는 과정


나머지는 상세 구현이다.

어떻게 안전하고 편리하게 위의 과정을 진행할 것인지에 대해 고민하며 구현을 하면 될 것이다.

 

이런 흐름을 파악하면 네이버 뿐만 아니라 카카오/ 구글등 다른 서비스에도 적용이 가능할 것이다.

왜냐하면 OAuth 2.0은 표준이 존재하기 때문에, 대부분의 서비스에서 이 표준에 맞게 구현했을 것이기 때문이다.

 

 

긴글읽어주셔서 감사합니다.

질문과 지적은 댓글로 환영합니다!

오늘도 즐코하세요! :)

 

 

참고자료

https://ko.wikipedia.org/wiki/OAuth

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

https://www.youtube.com/watch?v=hm2r6LtUbk8&list=PLuHgQVnccGMA4guyznDlykFJh28_R08Q-&index=1 

https://d2.naver.com/helloworld/24942

https://inpa.tistory.com/entry/WEB-

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

https://velog.io/@undefcat/OAuth-2.0-간단정리

 

 

 

728x90