[OAuth2.0] 애플리케이션 등록하기

---

이번 글에서는 OAuth2.0의 애플리케이션을 등록해보겠습니다.

0. OAuth2.0 클라이언트

OAuth2.0 클라이언트를 만드는 과정은 다음의 4단계로 나눌 수 있습니다.

1. 클라이언트 애플리케이션 등록하기
2. 액세스 토큰 얻기
3. 액세스 토큰을 이용해서 보호된 리소스에 접근하기
4. 엑세스 토큰 갱신하기

여기에서 액세스 토큰을 갱신하는 것은 신뢰 클라이언트(서버 사이드 워크플로우)일 경우에만 가능합니다. 액세스 토큰을 갱신하려면 리프레시 토큰(Refresh Token)을 안전하게 저장할 수 있어야 합니다.

이번 글에서는 1단계인 '클라이언트 애플리케이션 등록하기'를 살펴보겠습니다.

1. 클라이언트 애플리케이션 등록하기

클라이언트가 OAuth2.0 서비스 제공자에게 요청을 보내기 전에 서비스 제공자는 자신에게 요청을 보내는 클라이언트가 누군인지 알아야 합니다.

여기서 OAuth2.0 서비스 제공자에는 우리가 흔히 아는 Google, Facebook, Naver 등이 있으며, 이들 서비스 제공자는 본인들의 서비스에 접근할 수 있는 API를 OAuth2.0 프로토콜을 통해 제공합니다.

이를 위해 클라이언트 애플리케이션 등록 과정이 필요하며 이를 통해 서비스 제공자와 애플리케이션 간에 '신뢰 관계'가 수립됩니다. 클라이언트 등록은 최초 한번만 수행하면 됩니다.

페이스북 API 서비스를 이용할 수 있도록 애플리케이션을 등록해보겠습니다.

이를 위해서는 먼저 어플리케이션이 사용할 도메인이 필요합니다. 저의 애플리케이션은 daily-mission.com 이라는 도메인을 사용할 것입니다.

먼저 페이스북 개발자 페이지(developers.facebook.com)로 이동해 내 앱 탭의 앱 만들기를 클릭합니다. 기본적으로 페이스북 API를 사용하기위해선 페이스북 ID가 필요합니다.

앱을 표시할 이름을 입력하고 만들기를 클릭합니다.

간단한 보안확인을 완료하고 제출 버튼을 클릭합니다.

그러면 아래와 같이 클라이언트 애플리케이션이 등록되었습니다.

화면 좌측 탭의 기본 설정 탭으로 이동해 앱이 사용할 도메인을 입력합니다. 저는 제가 소유한 daily-mission.com을 입력했습니다.

여기서 '앱ID'와 '앱 시크릿 코드'는 향후 엑세스 토큰을 획득할 때 사용할 '클라이언트 ID'와 '클라이언트 시크릿키' 입니다. 이 두개를 합쳐 '클라이언트 자격증명'이라고도 합니다.

2. 클라이언트 자격증명

위의 클라이언트 애플리케이션 등록 방법은 각 서비스 제공자마다 다를 수 있지만, 애플리케이션 등록 후 사용하게될 정보셋은 엄격히 정해져 있습니다.

• 클라이언트 ID : 클라이언트 애플리케이션의 고유한 ID입니다.
• 클라이언트 시크릿키 : 애플리케이션을 위한 비밀키이며, 서비스 제공자에게 요청을 보낼 때 애플리케이션의 신원을 알려주는 값 입니다. (비신뢰 클라이언트 애플리케이션은 시크릿 키가 발급되지 않습니다.)
• 리다이렉션 엔드포인트 : 서비스 제공자가 응답을 전달하기 위해 사용하는 엔드포인트입니다.
• 인가 엔드포인트 : 클라이언트 애플리케이션이 인가 플로우를 시작할 때 사용하는 엔드포인트입니다.
• 토큰 엔드포인트 : 클라이언트 애플리케이션이 토큰 플로우를 시작할 때 사용하는 엔드포인트입니다.

아래는 책의 예제 애플리케이션에 대한 다섯 가지 값의 예시 입니다.

• 클라이언트 ID : goodapp-541106
• 클라이언트 시크릿키 : 38D83HHFF873RASDPPEKJ1KHJZL
• 리다이렉션 엔드포인트 : https://www.goodapp.com/callback
• 인가 엔드포인트 : https://api.facebook.com/auth
• 토큰 엔드포인트 : https://api.facebok.com/token

위의 값 중 '클라이언트 자격증명'은 기본적으로 클라이언트ID와 클라이언트 시크릿키입니다. 따라서 클라이언트 애플리케이션을 식별하는 데 두 값이 사용됩니다. 마치 어플리케이션의 아이디와 비밀번호라고 생각하시면 될 것 같습니다.

만약 위의 '클라이언트 자격증명'에 대한 정보가 유출됐다면 즉시 변경하는것이 중요합니다. 그렇지 않으면, 다른 애플리케이션이 원래의 애플리케이션인 것 처럼 가장할 수 있습니다.

3. 리다이렉션 엔드포인트

다음으로 해야할 것은 '리다이렉션 엔드포인트'를 등록해야합니다.

'리다이렉션 엔드포인트'란 클라이언트 어플리케이션이 서비스 제공자로부터 정보를 전달받을 URL 포인트입니다.

예를 들어 OAuth2.0은 사용자 동의를 받기위해 사용자를 '인가 엔드포인트'로 이끌어 동의를 받아냅니다. 이후 발급된 태그/토큰은 '리다이렉션 엔드포인트'로 전달됩니다. 만약 발급받은것이 인가 코드일 경우 이를 다시 '토큰 엔드포인트'에 보내 토큰을 발급받습니다. 발급받은 토큰은 등록된 '리다이렉션 엔드포인트'로 전달되며, 애플리케이션은 발급된 토큰을 서비스 제공자에게 전달해 원하는 정보를 획득합니다.

이해가 안되시죠?..🤣 Velog를 예를 들어보겠습니다.

만약 사용자가 Velog에서 Facebook으로 로그인하기를 클릭하면

아래와 같이 페이스북 로그인 화면으로 이동하게 됩니다. 이곳이 바로 '인가 엔드포인트'입니다. 이 화면은 Velog가 제공하는 것이 아닌 Facebook이 제공하는 화면으로 사용자는 이곳에서 사용자 동의를 진행하게됩니다.

여기서 사용자가 동의하면 페이스북은 사용자를 리다이렉션 엔드포인트로 리다이렉트 시키고 동시에 세션정보 혹은 에러메세지를 전달합니다. 그 다음에는 리다이렉트된 엔드포인트에 전달된 메세지를 파싱해서 사용하게 됩니다.

동의를 진행하면 다시 Velog의 화면으로 돌아오게되는데 만약, Facebook 아이디로 회원가입이 되어있지 않은 상태라면 아래와 같은 회원가입창으로 이동하게 됩니다. 이곳이 바로 '리다이렉션 엔드포인트'입니다. 간단히 하자면 서비스 제공자로부터 정보를 제공받을 위치라고 생각할 수 있습니다. 저의 경우에는 daily-mission.com/callback.html 을 리다이렉션 엔드포인트로 등록할 것입니다. 만약 엔드포인트로 등록되지 않은 곳으로 인가 코드나 토큰을 요청하게된다면 해당 요청은 거절됩니다.

사실 이부분은 내부적으로 인가 코드, 토큰을 발급받아 서비스 제공자에게 사용자 프로필 정보를 받은 후 화면에 뿌려준 것입니다.

전체적인 흐름을 그림으로 표현하자면 다음과 같습니다.

엔드포인트에 대한 자세한 내용은 다음장에서 다시한번 다뤄보겠습니다.

4. 리다이렉션 엔드포인트 등록하기

자 그럼 리다이렉션 엔드 포인트를 등록해보겠습니다.

먼저 해야될 것은 클라이언트 애플리케이션이 페이스북 API에서 사용할 제품?을 선택하는 것입니다. 로그인 기능을 사용할 것이므로 페이스북 로그인을 선택합니다.

저는 웹 어플리케이션을 사용하겠습니다.

사이트의 URL을 입력후 저장 버튼을 눌러줍니다.

다음으로 해당 제품의 설정탭에 들어가 유효한 OAuth 리디렉션 URL에 리다이렉션으로 사용할 엔드포인트 주소를 입력하면 됩니다. 리다이렉션 엔드포인트는 여러개 등록할 수 있습니다.

다음 글에서는 등록된 리다이렉션 엔드포인트로 엑세스 토큰을 발급받아 보겠습니다.

---

참고자료

OAuth 2.0 마스터:OAuth 2.0 애플리케이션 개발을 위한 모든 것

파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음

---