201103 TIL

React

State

• 컴포넌트 상태 데이터를 보관하는 오브젝트
• state에 업데이트가 발생하면 render함수가 호출된다.

props

• 컴포넌트 외부에서 주어지는 데이터 -> 재사용이 목적
• tag 값 쓰듯이 사용하면 된다.

OAuth

공식 문서

• Github

정의

• Resource Owner: 로그인 하고자 하는 사용자
• Client: 우리가 만드는 애플리케이션
• Resource Server: 깃헙, 애플 등 로그인을 도와줄 서버

⇒ Resource Owner의 로그인을 Client인 우리 서비스가 Resource Server에서 토큰을 받아와 로그인 할 수 있게 한다.

과정

1. Application 등록

   • Resource Server: Client ID, Client Secret, Authorized redirect URI
     • Authorized URI: client에 권한을 부여할 때 authrozied code를 전달합니다.
   • Client: Client ID, Client Secret

2. 승인 과정

   • 사용자의 로그인 버튼 클릭 → GET https://github.com/login/oauth/authorize?client_id=받은아이디 이동

   • 로그인 상태가 아니라면, Resource Server는 로그인 할 수 있게 한다.

   • 우리가 설정한 scope에 대해서 허용하도록 한다.

     • Resource Server: Resource Owner's ID, scope

   • resource server가 authorization code를 resource owner에게 전달하고, 이를 resource owner가 client에게 전달합니다.

     • GET http://localhost:3000/login?code=받아오는 코드

   • 이제, client가 resource server에게 자신이 가진 정보를 전달합니다. (authrozation code, redirect url, client secret, client id)
     -POST https://github.com/login/oauth/access_token?client_id=클라이언트아이디&client_secret=클라이언트비밀번호&code=authorization code

   • resource server는 client가 보낸 코드를 확인하고, access token을 줍니다.

   • 이제 이 API를 이용해 Resource Owner의 정보를 사용할 수 있습니다.