OAuth
직접 작성한 서버에서 인증을 처리해 주는 것과는 달리, OAuth는 인증을 중개해 주는 매커나즘이다.
OAuth 2.0은 인증을 위한 표준 프로토콜의 한 종류로
보안된 리소스에 엑세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜 중 한 방법이다.
OAuth 사용 예시
유저는 웹상에서 굉장히 많은 서비스를 이용하고 있고 각각의 서비스를 이용하기 위해서는 회원가입 절차가 필요한 경우가 대부분이다. OAuth를 활용한다면 자주 사용하고 중요한 서비스의 아이디와 비밀번호만 기억해 놓고 해당 서비스들을 통해 다른 소셜 서비스를 로그인을 할 수 있다.
인스타그램의 페이스북아이디로 로그인하기 등을 생각하면된다.
OAuth 필수 용어
| 용어 | 설명 |
|---|---|
| Resource Owner | 액세스 중인 리소스의 유저이다. 사용자1이 구글 계정을 이용하여 App에 로그인할 경우, 이때 Resource owner은 사용자1이 된다. |
| 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 | scope는 토큰의 권한을 정의한다. 주어진 액세스 토큰을 사용하여 액세스할 수 있는 리소스의 범위이다. |
OAuth 종류
Authorization code grant type
Access token을 받아오기 위해서 먼저 Authorization code를 받아 Access token과 교환하는 방법
refresh token grant type
일정 기간 유효 시간이 지나서 만료된 Access token을 편리하게 다시 받아오기 위해 사용하는 방법
im-sprint-auth-oauth
이번 스프린트에서 OAuth App을 통해 Access token을 받아오는 과정은 다음과 같다.
GitHub에 내 앱 등록
oauth2 server accessing data create an app을 참고하여 OAuth 앱을 등록한다.
github > Setting > Developer settings 에서 OAuth Apps를 생성한다.
- client ID와 client secret를 얻기 위해 GitHub에서 애플리케이션을 생성
- client ID: 공개 정보로 인증 URL을 작성하는데 사용된다.
- client secret: 기밀로 유지하여야 한다.
환경 설정
.env파일을 생성하고 아래와 같이 작성한다.
GITHUB_CLIENT_ID= OAuth앱 client ID
GITHUB_CLIENT_SECRET= OAuth앱 client secret.gitignore에 .env 포함
서버
express를 이용해 만든 간단한 웹 서버입니다. Access token을 발급받는 과정은 서버에서 이루어지는 것이 더욱 안전합니다. 그래서 클라이언트에서 받아온 Authorization code를 서버의 /callback 엔드포인트로 전달해 서버에서 github App에게 Access token 발급을 요청합니다.
/controller/callback.js
인증 정보를 바탕으로 Access token을 받아올 수 있도록 도와주는 라우터
참고 링크
require('dotenv').config();환경변수를 사용하기 위한 dotenv npde.js모듈을 가져온다
const clientID = process.env.GITHUB_CLIENT_ID;
const clientSecret = process.env.GITHUB_CLIENT_SECRET;client ID와 client secret을 각각의 변수에 할당
const axios = require('axios');HTTP 비동기 통신 라이브러리인 Axios node.js모듈을 가져온다.
Axios와 fetch()는 둘다 비동기 통신에 쓰이지만 차이점이있다.
module.exports = async (req, res) => {
const data = await axios.post('https://github.com/login/oauth/access_token', {
'client_id': clientID,
'client_secret': clientSecret,
'code': req.body.authorizationCode
})Axios의 post메서드 axios.post(url, data[, config])를 이용해
서버에 post요청하여 access token을 받아와 data 변수에 할당한다.
.then(res => res.data)
.catch(err => console.log(err))catch로 예외처리
res.status(200).send({ accessToken: data.access_token })
}상태코드200과 위의 access token을 응답으로 보내준다.
/controller/images.js
받아온 Access token을 확인한 후, local에 저장된 resource images를 클라이언트로 보내주는 라우터
const images = require('../resources/resources');resources폴더안의 이미지 정보를 불러온다.
module.exports = (req, res) => {
if (!req.headers.authorization) {
res.status(403).send({
message: 'no permission to access resources'
})요청헤더에 인증정보가 없을 시 위와같이 응답
} else {
res.status(200).send({ images })
}
}인증정보가 있을 시 이미지정보를 응답으로 보낸다.
클라이언트
메타인지
🎯 오늘의 학습목표
- OAuth를 통해 인증 구현을 할 수 있다.
- 클라이언트, 서버, 데이터베이스의 전체 동작을 이해할 수 있다.
- 회원가입 및 로그인 등의 유저 인증에 대해 구현하고 이해한다.
😎 학습할 내용 중에 알고 있는 것
HTTPS, 세션, 쿠키, 토큰
✏️ 오늘 새롭게 학습한 것
OAuth를 이용해 보안된 리소스에 엑세스하기 위해 클라이언트에게 권한을 제공하는 법
🧷 오늘 학습한 내용 중 아직 이해되지 않은 부분
OAuth의 리프레시 토큰 타입이 완전히 이해되지 않았다.
💡 이해되지 않은 내용을 보완하기 위해 무엇을 할까
refresh token grant type의 이미지화된 설명과 코드를 살펴본다.
