[보안 / 인증] 🍵OAuth 정리

▷ OAuth

Open standard for Authorization

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

이미 사용자 정보를 가지고 있는 웹 서비스(Naver, Kakao 등)에서
사용자의 인증을 대신해주고, 접근 권한에 대한 토큰을 발급한 후,
이를 이용해 내 서버에서 인증이 가능해진다.

🍵 OAuth 사용 이유

우리는 웹상에서 많은 서비스를 이용하고 있고,
각각의 서비스를 이용하기 위해서는 회원가입 절차가 필요하다.
하지만 각각의 서비스별로 ID와 PWD를 기억하기는 귀찮기에
OAuth를 활용하여 자주 쓰는 서비스의 ID와 PWD만 기억,
이를 통해 외부 서비스의 소셜 로그인을 할 수 있다.
(클릭 몇 번 만으로 손쉽게 가입 가능)

또한 OAuth는 인증 권한에 대한 허가를
미리 유저에게 구해야 하기 때문에 보안상으로도 좋다.
(사용자는 원하는 정보에만 접근을 허락할 수 있음)

---

🍵 OAuth의 주체

---

🍵 OAuth 인증 방식의 종류와 흐름

 1. Implicit Grant Type 

기존 서비스에 로그인만 되어있다면
새로운 서비스에 바로 액세스 토큰을 내어준다.

보안성이 안 좋기에 인증 단계를 하나 더 추가한
Authorization Code Grant Type을 주로 사용한다.

---

 2. Authorization Code Grant Type 

Authorization Code를 사용한 인증 단계가 추가로 있기 때문에
Implicit Grant Type보다 비교적 더 안전하다.

---

 3. Refresh Token Grant Type 

액세스 토큰을 발급해줄 때 리프레시 토큰을 같이 발급해주기도 한다.

사용자가 새로운 서비스를 이용하다가 액세스 토큰이 만료되었을 때,
매번 Authorization Code Grant Type 과정으로 액세스 토큰을 발급받지 않아도 된다.

---

🍵 깃허브 로그인 구현하기

인증 흐름 이미지

github OAuth를 하기 위해서는 github에 내 앱을 등록해야한다.

이제 발급받은 Client ID와 Client secrets을 환경에 등록하면 된다.

// 서버의 .env파일에는 ID와 키를 등록해준다.
CLIENT_ID=발급받은_아이디
CLIENT_SECRET=발급받은_키

--------
// 리액트에서 환경 변수를 사용하기 위해선 'REACT_APP'을 붙여주어야 한다.
REACT_APP_CLIENT_ID=발급받은_아이디

이후엔 서버의 데이터 모양을 잘 확인해가며 axios로 잘 요청해주면 된다.

✚ 참고
Node.js 실행 중, 이미 4000포트를 사용하고 있다는 에러가 난다면
lsof -i TCP:4000로 현재 실행 중인 리스트를 확인하고,
kill -9 2285로 종료시켜주면 된다.
(2285가 node의 4000번 포트를 점유하고 있어서 삭제함)

📚 OAuth 2.0에 대해 더 자세히 알고 싶다면?
👉 OAuth 2.0 Simplified - Getting Ready
👉 OAuth 2.0 Simplified - Accessing Data in an OAuth Server