Oauth 기본 개념 정리 + im-sprint-auth-oauth 리뷰

Oauth 2.0

전통적으로 직접 작성한 서버에서 인증을 처리해주는 것과는 달리, OAuth는 인증을 중개해주는 메커니즘이다.

보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜이다.

즉, 이미 사용자 정보를 가지고 있는 웹 서비스(GitHub, google, facebook 등)에서 사용자의 인증을 대신해주고,

접근 권한에 대한 토큰을 발급한 후, 이를 이용해 내 서버에서 인증이 가능해집니다.

 

Oauth 2.0 흐름

Oauth에서 꼭 알아야 할 용어

Resource Owner 

액세스 중인 리소스의 유저

 

Client 

Resource owner를 대신하여 보호된 리소스에 액세스하는 응용프로그램

 

Resource server

client의 요청을 수락하고 응답할 수 있는 서버

 

Authorization server 

Resource server가 액세스 토큰을 발급받는 서버

 

Authorization grant 

클라이언트가 액세스 토큰을 얻을 때 사용하는 자격 증명의 유형

 

Authorization code

access token을 발급받기 전에 필요한 code이다.

client ID로 이 code를 받아온 후, client secret과 code를 이용해 Access token 을 받아온다.

 

Access token

보호된 리소스에 액세스하는 데 사용되는 credentials이다.

Authorization code와 client secret을 이용해 받아온 이 Access token으로 이제 resource server에 접근을 할 수 있다.

 

Scope :  주어진 액세스 토큰을 사용하여 액세스할 수 있는 리소스의 범위(이미지, 포스트 등등등)

 

Oauth 종류 

 

Grant type: client가 액세스 토큰을 얻는 방법

 

Authorization code grant type

액세스 토큰을 받아오기 위해서 먼저 Authorization code를 받아 액세스 토큰과 교환하는 방법

 

 

Authorization code 절차를 거치는 이유는 보안성 강화에 목적이 있다.

client에서 client-secret을 공유하고 액세스 토큰을 가지고 오는 것은 탈위될 위험이 있기 때문에

client에서는 Authorization code만 받아 오고 server에서 access token 요청을 진행한다.

 

 

refresh token grant type 

일정 기간 유효 시간이 지나서 만료된 액세스 토큰을 편리하게 다시 받아오기 위해 사용하는 방법

access보다 refresh token의 유효 시간이 조금더 길게 설정하기 때문에 가능한 방법이다.

 

server마다 refresh토큰에 대한 정책이 다르기 때문에 서버의 정책을 살펴볼 필요가 있다.(사용자체가 안될 수 있슴)

 

일단 이 2개만 알자!

 

 

im-sprint-auth-oauth

server

1. Github OAuth를 이용한 소셜 로그인 구현

https://www.oauth.com/oauth2-servers/accessing-data/create-an-application/ 를 참고하여, OAuth 앱을 등록한다.

client id와 client secret을 생성할 수 있다.

.env 파일에 잘 담는다.

2. /callback과 /images

인증 정보를 바탕으로 Access token을 받아올 수 있도록 도와주는 라우터인 /callback

콘솔을 많이 찍어보는 것이 중요하다.

//...생략
console.log(req.body) //콘솔확인 필수
const params = {
    client_id: clientID,
    client_secret: clientSecret,
    code : req.body.authorizationCode
  }

  axios.post('https://github.com/login/oauth/access_token', params,
    { headers: { accept: 'application/json' } })
    .then(data => {
      const accessToken = data.data.access_token;
      // console.log(accessToken);
      res.status(200).send({ accessToken: accessToken });
    }).catch(err => {
    res.status(400)
  }) 
//생략...

/images는 console.log(req.headers) 만 찍어봐도 해결할 수 있을거 같다.

 

client

1. /login 에서

this.GITHUB_LOGIN_URL = 'https://github.com/login/oauth/authorize?client_id={client_id채우기}'

 

2. app.js에서 /callback으로 { authorizationCode: authorizationCode }를 함께 요청 보내서 data를 받아온다.

그 데이터를 콘솔로 확인하면 accessToken이 있다는 걸 알 수 있다.

받아온 데이터로 accessToken의 상태와 로그인 상태를 변경해준다.

상태를 변경해 주었다면 mypage.js에 props로 accessToken을 넘겨준다.

 

 3. mypages에서 다음과 같은 함수를 만든다.

여기서 주의할 점은 asyns이기에 await을 해줘야 하고, 

state의 상태를 변경해준다.

  async getGitHubUserInfo() {
    await axios.get('https://api.github.com/user', {
      headers: {
        authorization: `token ${this.props.accessToken}`,
        accept: 'application/json'
      }
    })
      .then(data => {
        console.log(data.data)
        const { name, login, html_url, public_repos } = data.data;
			//자바스크립트 최신문법 구조분해 할당 객체도 가능
        this.setState({
          name,
          login,
          html_url,
          public_repos
        })
    })
  }

  async getImages() {
    // TODO : 마찬가지로 액세스 토큰을 이용해 local resource server에서 이미지들을 받아와 주세요.
    // resource 서버에 GET /images 로 요청하세요.
    await axios.get('http://localhost:8080/images', {
      headers: { authorization: `token ${this.props.accessToken}` }
    }).then(data => {
      console.log(data.data)
      this.setState({
        images: data.data.images
      })
    })
  }

이렇게 모든 상태를 만들어주고 본문에 잘 채우게 되면 끝

 

다음과 같은 결과를 볼 수 있다.

처음에만 github 인증 화면이 뜨는데 그때 캡쳐를 하지 못하였다....

스프린트 끝~

 

출처 

코드스테이츠

https://www.oauth.com/oauth2-servers/accessing-data/create-an-application/

OAuth 2.0 Simplified