일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
- resource owner
- 마이크로태스크큐
- 자바스크립트런타임
- access token
- backend
- 콜스택
- 브라우저동작
- 브루트포스
- 개발도서추천
- NextImage
- prevProps
- nextjs
- resource server
- Next이미지
- BOJ
- getServerSideProps
- NeXT
- 자바스크립트엔진
- react
- nestjs
- 리팩터링2판
- 이벤트루프
- 매크로태스크큐
- NextImageSpan
- getInitialProps
- 판교브루클린
- 브라우저동작원리
- CSS
- componentDidUpdate
- flexible box
- Today
- Total
imgyuzzzang
OAuth: access token 발급 과정 정리 본문
OAuth
** 본 포스팅은 생활코딩 OAuth 수업을 정리한 내용입니다.
https://opentutorials.org/course/3405
WEB2 - OAuth 2.0 - 생활코딩
수업소개 사용자가 가입된 서비스의 API에 접근하기 위해서는 사용자로부터 권한을 위임 받아야 합니다. 이 때 사용자의 패스워드 없이도 권한을 위임 받을 수 있는 방법이 필요합니다. 이를 위
opentutorials.org
-
OAuth?
-
패스워드 없이! 구글, 페이스북과 같은 서비스의 API에 접근가능 => 내가 만든 서비스에서 사용 가능.
-
access token을 받아와서 권한을 위임 받음
-
1. 등록 (new app/project)
-
Client ID (외부 노출 ok)
-
Client Secret (노출 절대 x)
-
Authorized redirect URIs (요청 권한 받을 주소)
2. Resource Owner의 승인
-
Client: '구글로 로그인'과 같은 버튼에 redirect URI, scope, client id가 포함된 URL을 link 시킴.
-
scope는 resource server의 모든 기능 중 권한을 부여가 필요한 기능 일부만을 나타냄
-
-
Resource Owner와 Server 사이 로그인 요청, 완료되면
-
Resource Server: URL에 포함된 client id, redirect uri가 자신이 갖고있는 client id, redirect URL과 같은지 확인
-
확인되면 해당(scope) 권한을 Client가 사용하는 것을 허용하는 지 여부를 resource owner에게 물어봄.
3. Resource Server의 승인
-
resource sever는 owenr의 웹브라우저에 redirect url + authorization code를 보냄
-
이는 클라이언트에 전달됨.
-
클라이언트는 authorization code, redirect uri, client id, client secret를 resource server에 보냄
-
resource sever는 client id, secret, redirect uri가 모두 일치하는지 확인 후 access token 발급
-
이 때, authorization code는 삭제. (임시 암호와 같은 느낌)
-
4. Access token 발급
-
resource server는 access token 발급 후 client에게 응답으로 보냄.
-
client는 해당 token을 내부적으로 저장 (token은 미리 승인된 user id, scope에 대해서 특이적으로 동작)
'computer science > 웹' 카테고리의 다른 글
[JS] object 에 존재하는 값만 넣기 (4) | 2022.11.07 |
---|---|
[NEST JS] 일주일치 공부 기록 (2) | 2022.03.17 |
[React JS] 이전 props/state와 비교하여 조건부 렌더링 하기: componentDidUpdate(prevProps, prevState) (0) | 2021.03.19 |
[CSS/bootstrap] 배치 정리 (1) | 2021.01.26 |
[CSS] Flexible box 정리 : 배치의 모든 것 (10) | 2020.05.21 |