OAuth (Open Authorization)

1. OAuth 개념 및 사용 목적

2. OAuth 동작 원리

3. OAuth 코드 구현 (Kakao)

---

1. OAuth 개념 및 사용 목적

[그림 1] OAuth 아키텍쳐

OAuth는 자신이 소유한 리소스에 소프트웨어 애플리케이션이 접근할 수 있도록 허용해 줌으로써 접근 권한을 위임해주는 개방형 표준 프로토콜이다. 

 

여러 웹 서비스를 연계하여 사용하도록 하기 위해 OpenID를 이용하다가, API 접근 권한 관리를 위해 구글의 AuthSub, 야후의 BBAuth 등을 참고하여 OAuth 1.0이 개발되었다. 이후 OAuth의 세션 고정 공격을 보완한 OAuth 1.0a가 개발되었다. 

 

OAuth 커뮤니티가 성장하여 여러 메커니즘에 대한 논의가 시작되었고, OAuth의 구조적인 문제점을 해결하고 핵심요소만을 차용한 유사 프로토콜인 WRAP(Web Resource Access Protocol)이 발표되었다. 

 

WRAP를 기반으로 OAuth 2.0이 개발되었다.

 

비교	OAuth 1.0	OAuth 2.0
참여자 구분	- 이용자  - 소비자  - 서비스 제공자	- 자원 소유자  - 클라이언트  - 권한 서버  - 자원 서버
토큰	- 요청 토큰 (Request Token)  - 접근 토큰 (Access Token)	- 접근 토큰 (Access Token)  - 재발급 토큰 (Refresh Token)
유효기간	- 접근 토큰의 유효기간 없음	- 접근 토큰 유효기간 부여  - 만료 시 재발급 토큰 이용
클라이언트	- 웹 서비스	- 웹, 앱 등

 

OAuth 2.0을 구성하고 있는 요소는 다음과 같다.

• 리소스 소유자 : API에 대한 권한을 가지고 있으며, 이를 위임할 수 있는 이용자
• 보호된 리소스 : 리소스 소유자가 접근하는 대상
• 클라이언트 : 리소스 소유자를 대신해 보호된 리소스에 접근하는 소프트웨어 등
• 인가 서버 : 리소스에 접근할 수 있는 접근 토큰을 발급

OAuth는 리소스 소유자와 클라이언트 모두에게 편의성을 제공한다. 리소스 소유자는 카카오, 구글 등에 로그인 되어 있으면 다른 애플리케이션에서 따로 로그인해야 하는 과정을 거치지 않아도 되고, 클라이언트는 직접 리소스 보유자를 인증하지 않아도 된다.

 

OAuth는 다른 서비스의 회원 정보를 안전하게 사용하기 위한 방법이라고 생각하면 된다. 즉, 고객이 자신의 네이버 아이디/비밀번호를 회사(클라이언트)에 알려주지 않고도, 네이버에 있는 고객 정보를 회사(클라이언트)에서 안전하게 사용하기 위한 방법이다.

 

현재 OAuth는 편리성과 안전성 때문에 널리 쓰이고 있지만 장점만 있는 것은 아니다. 인가 서버(네이버, 카카오)의 보안에 허점이 있다면 네이버, 카카오의 회원의 개인 정보가 유출되었을 때 OAuth를 사용하는 회사(클라이언트)의 로그인 기능도 함께 무용지물이 된다.

 

 

2. OAuth 동작 원리

OAuth 2.0은 메커니즘이 하나로 통일되지 않아 4가지 타입으로 발표되었다.

종류 (Type)	설명
권한 부여 코드 승인 (Authorization Code Grant)	- 클라이언트가 다른 사용자 대신 특정 리소스에 접근을 요청할 때 사용   - 리소스 접근을 위해, 인가 서버에서 받은 권한 코드로 리소스에 대한 액세스 토큰을 받는 방식
암묵적 승인 (Implicit Grant)	- 권한 부여 코드 승인 타입과 다르게 권한 코드 교환 단계가 없음   - 액세스 토큰을 즉시 반환받아 이를 인증에 이용하는 방식
리소스 소유자 암호 자격 승인 (Resource Owner Password Credentials Grant)	- 클라이언트가 암호를 사용하여 액세스 토큰에 대한 사용자의 자격증명을 교환하는 방식
클라이언트 자격 승인 (Client Credentials Grant)	- 클라이언트가 컨텍스트 외부에서 액세스 토큰을 얻어 특정 리소스에 접근을 요청할 때 사용하는 방식

 

2.1. 권한 부여 코드 승인 (Authorization Code Grant)

[그림 2] 권한 부여 코드 승인

권한 부여 코드 승인은 클라이언트가 권한 서버에 권한 부여 코드를 요청한 후 응답을 받아서 그 코드를 이용하여 다시 Access Token으로 교환을 요청한다. 이후 Access Token을 받게 되면 그 Token을 사용하여 리소스 서버의 API를 호출하고 회원의 개인정보와 관련된 데이터를 응답받을 수 있다.

 

2.2. 암묵적 승인 (Implicit Grant)

[그림 3] 암묵적 승인

암묵적 승인은 권한 부여 코드 승인과 비슷하지만 약간의 과정이 생략되었다. 권한 부여 코드를 요청하면 바로 Access Token을 응답받는 점이 권한 부여 코드 승인과 다르다. 

 

2.3. 리소스 소유자 암호 자격 승인 (Resource Owner Password Credentials Grant)

[그림 4] 리소스 소유자 암호 자격 승인

리소스 소유자 암호 자격 승인은 리소스 소유자의 정보를 암호화하여 클라이언트에 보내면 클라이언트가 이를 기반으로 권한 서버에 Access Token을 요청한다. 이후 응답받은 Access Token을 이용하여 리소스 서버에 API를 호출하고 데이터를 응답받는다.

 

2.4. 클라이언트 자격 승인 (Client Credentials Grant)

[그림 5] 클라이언트 자격 승인

클라이언트 자격 승인은 리소스 주인이 클라이언트의 자격으로 권한 서버에 Access Token을 요청하고 응답받는 방법이다.

 

 

3. OAuth 코드 구현 (Kakao)

[그림 6] kakao developers 홈페이지에서 애플리케이션 추가

먼저 kakao developers 홈페이지에 들어가서 로그인을 한 후 '내 애플리케이션'에서 애플리케이션을 추가한다.

 

[그림 7] Web 플랫폼 등록

내 애플리케이션 > 앱 설정 > 플랫폼 에 들어가서 Web 플랫폼을 등록한다.

 

[그림 8] 카카오 로그인 활성화 설정

제품 설정 > 카카오 로그인 에 들어가서 활성화 설정의 상태를 ON으로 해둔다.

 

[그림 9] Redirect URI 설정

같은 공간에서 스크롤하여 아래로 내린 후 Redirect URI를 설정한다. 권한 부여 코드를 응답 받은 후 Access Token을 요청할 때 이 URI로 요청을 보내게 된다.

 

[그림 10] 앱 키

내 애플리케이션 > 앱 설정 > 앱 키에 REST API 키는 VS Code에서 프로그래밍 할 때 필요하게 될 것이다.

 

[그림 11] Client Secret 코드

내 애플리케이션 > 제품 설정 > 카카오 로그인 > 보안 에 들어가면 Client Secret 코드가 있다. 이는 REST API의 보안을 강화하기 위해 사용된다.

 

[그림 12] index.html

먼저 HTML에서는 a 태그를 써서 카카오로그인 이라는 글자를 클릭하면 /kakao/login으로 연결되도록 한다. 이때 권한 부여 코드를 요청한다.

 

[그림 13] JavaScript 코드

전역 변수로 선언한 client_id는 위의 앱 키 중 하나인 REST API 키이고, redirect_uri도 위에서 정한 URI 값이다. client_secret 또한 위의 [그림 11]에 있던 Client Secret 코드와 같다.

 

/kakao/login으로 get 요청을 보내면 client_id와 redirect_uri가 파라미터로 포함된 redirectURI로 리다이랙트가 된다.

 

/oauth/kakao로 리다이랙트 요청을 보낼 때 req.query.code의 값인 권한 부여 코드가 담겨 있다. 이 권한 부여 코드는 client_id, redirect_uri, client_secret과 함께 body에 담긴다.

 

axios를 이용하여 token_url에 Access Token을 post로 요청하고 그 결과값을 response에 할당한다.

 

response.data.access_token의 속성값이 Access Token이다. 이제 Access Token을 이용하여 해당 이용자의 정보를 받아와야 한다.

 

try 문의 url, headers는 카카오에서 제공하는 내용대로 적어주었다. headers에 Access Token 값을 담아 axios로 post 요청을 보낸 후 응답받은 내용을 userinfo라는 변수에 담았다.

 

console.log()로 userinfo.data.kakao_account.profile을 찍어보면 회원의 카카오 계정 정보(닉네임, 프로필 사진 등)를 확인할 수 있다.