프론트엔드 정복하기
OAuth2.0 프로세스(엑세스 토큰을 교환하는 과정) 본문
※ 용어 정리
Mine = Client / Their = Resource Server / User = Resource Owner
엑세스 토큰을 주고받는 과정
Resource Server(=Their)가 가지고 있는 기능이 A,B,C,D 4가지가 있다고 하자.
우리는 그중에서 B, C 2가지 기능만을 사용하고 싶다.
1 단계 | 사용자 - scope과 redirect_uri와 client_id 정보를 담은 URL 접속
그렇다면
Client(=Mine)는 사용자에게 다음의 URL 링크를 전달한다. (button 또는 a태그 등을 통해)
https://resource.server
?client_id=1
&scope=B,C
&redirect_uri=https://client/callback
(위 코드에서 scope=B,C이란, 위에서 말했던 A,B,C,D 기능 중 사용하고자 하는 기능의 범위를 표기한 것이다.)
2단계 | Their - URL 정보와 Resource Server 정보가 일치하는지 확인한다.
사용자가 위 URL로 접속하게 되면
Resource Server는
=> Resource Owner의 로그인 상태를 추적하고
=> 로그인되어 있지 않으면 로그인할 수 있는 화면을 보여준다.
더 자세히 풀자면
Resource Server는
=> 자신의 서버에 해당 client_id 가 있는지 확인한다.
=> 자신의 서버에 있는 redirect_uri 값과 같은지 확인한다.
=> 사용자에게 scope에 해당하는 기능에 대한 권한을 부여할 것인지 확인하는 메세지를 띄워준다.
=> 사용자가 허용하면 Resource Server는 user id 가 scope b, c 작업을 허용하는 것에 동의했다는 정보를 저장한다.
3 단계 | Their가 User에게 authorization code를 URL 형태로 전송한다.
access Token을 발급하기 전에 임시 비밀번호같은 존재를 발급한다. = authorization code
Resource Server는 authorization code를 Resource Owner에게 url 형태로 전송한다.
Location : https://redirect_uri?code=3
응답할 때 Header 값에 Location 값을 주면 리다이렉션 명령을 내린 것이다.
즉, 사용자의 웹브라우저에게 'https://redirect_uri 주소는 3으로 이동하세요.'라고 명령한 것이다.
=> Resource Owner 웹브라우저는 헤더값에 의해 해당 주소로 이동하게 된다.
code=3 이라는 것에 의해서 Client는 autorization code : 3 값을 갖게 된다.
4단계 | Client는 authorization code를 가지고 Resource Server에 직접 접근하게 된다.
Client는 Resource Server에 다음의 url로 직접 접근하게 된다. (Resource Owner를 거치지 않고)
https://resource.server/token?
grant_type=autorization_code&
code=3&
redirect_uri=https://client/callback&
client_id=1&
client_secret=2
위 코드로 접속하면서, autorization_code와 client_secret이라는 비밀 정보를 전송한다.
Resource Server는 authorization_code, client_id와 client_secret, redirect_uri 가 자신과 가지고 있는 값과 같은지 확인한다.
5단계 | access Token 발급
(임시 비밀번호이기 때문에) authorization 코드는 지운다.
그리고 Resource Server는 클라이언트에게 accessToken을 발급한다.
Client는 해당 토큰을 내부에 저장한다.
그러면,
Client가 accessToken으로 접근하게 되면
Resource Server는 해당 토큰의 user id에게 b, c라는 유효한 기능과 사용자의 정보에 대해서 Client에게 허용한다.
생활코딩 OAuth 강좌 1~6 내용
www.youtube.com/watch?v=BofCK1oWAyc&list=PLuHgQVnccGMA4guyznDlykFJh28_R08Q-&index=6
'API' 카테고리의 다른 글
Prettier 설치 및 설정 / 기본 설정 코드 (0) | 2021.02.15 |
---|---|
rc-tree console (0) | 2020.12.09 |
OAuth2.0 페이스북 로그인 예제 (0) | 2020.12.02 |
우편번호찾기 오픈API (0) | 2020.07.09 |
오픈 API 사용법 (0) | 2020.07.09 |