OAuth(Open Authorization)
OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 수단이다.
흔히들 말하는 소셜 로그인이 OAuth 2.0라는 기술을 사용한다. 웹사이트를 이용할 때 웹사이트에 회원가입을 하는 대신 구글이나 네이버 등의 회원가입 정보를 사용하여 로그인을 할 수 있다. 구글이나 네이버에서 사용자 인증을 대신 해주는 것이다.
OAuth를 사용하는 이유는 사용자 입장에서 회원가입이 간편하고, 웹 서버 개발자 입장에서도 회원관리에 신경쓰지 않아도 된다.
보안 측면에서도 검증되지 않은 App에서 OAuth를 사용하여 로그인한다면, 유저의 민감한 정보가 직접 App에 노출될 일이 없고 인증 권한에 대한 허가를 미리 유저에게 구해야 하기 때문에 더 안전하게 사용할 수 있다.
또한 OAuth 인증을 허가한다고 모든 정보를 해당 서비스에 노출하는 것은 아니다. 사용자 설정으로 해당 서비스에 필요한 정보만 공개하여 선택적으로 제공할 수 있다.
OAuth 작동 메커니즘
Implicit Grant Type
⓵ 사용자가 Application에서 접속하면 인증 서버로 인증 요청을 보낸다.
⓶ 인증 서버에서 유효한 요청인지 확인 후 액세스 토큰을 발급한다.
⓷ Application은 발급 받은 액세스 토큰을 요청에 담아 리소스 서버로 보낸다.
⓸ 리소스 서버는 유효한 토큰인지 확인 후 요청한 사용자 정보를 응답한다.
Implicit Grant Type은 바로 액세스 토큰을 발급하기 때문에 보안성이 떨어진다.
여기에 인증 한단계를 추가한 Authorization Code Grant Type을 주로 사용한다.
Authorization Code Grant Type
Implicit Grant Type 중간에 바로 액세스 토큰을 발급하는것이 아니라 Authorization Code를 전달하고, 이후 다시 Authorization Code와 함께 요청이 들어올 때 액세스 토큰을 발급한다.
* Authorization Code를 사용하는 이유
Redirect URI를 통해 Authorization Code를 발급하는 과정이 생략된다면, Authorization Server가 Access Token을 Client에 전달하기 위해 Redirect URI를 통해야 한다. 이때, Redirect URI를 통해 데이터를 전달할 방법은 URL 자체에 데이터를 실어 전달하는 방법밖에 존재하지 않는다. 브라우저를 통해 데이터가 곧바로 노출되는 것 이다.
하지만, Access Token은 민감한 데이터이다. 이렇게 쉽게 노출되어서는 안된다. 이런 보안 사고를 방지 Authorization Code를 사용하는 것 이다.
Redirect URI를 프론트엔드 주소로 설정하여, Authorization Code를 프론트엔드로 전달한다. 그리고 이 Authorization Code는 프론트엔드에서 백엔드로 전달된다. 코드를 전달받은 백엔드는 비로소 Authorization Server의 token 엔드포인트로 요청하여 Access Token을 발급한다.
이런 과정을 거치면 Access Token이 항상 우리의 어플리케이션과 OAuth 서비스의 백채널을 통해서만 전송되기 때문에 공격자가 Access Token을 가로챌 수 없게된다.
Refresh Token Grant Type
Refresh Token Grant Type은 인증 서버로 리프레시 토큰을 보내주면 인증 서버가 토큰을 검증한 다음 액세스 토큰을 다시 발급한다. Application은 다시 발급 받은 액세스 토큰을 사용해서 리소스 서버에서 사용자의 정보를 받아온다.
OAuth 사용 실습
Github과 연동하여 OAuth 인증을 사용하는 실습을 진행해봤다.
App.js
먼저 내 github에서 OAuth 인증을 할 수 있도록 설정해주고, 클라이언트에서 로그인 요청을하면 github으로부터 Authorization code를 받는다. 코드는 구현되어 있어서 어떻게 되어있는지 확인만 해보았다.
이제 받은 Authorization code를 클라이언트에서 로컬 서버로 전달해서 access token을 만들어야 한다. token을 만드는 코드는 구현이 되어 있었고, 우리는 로컬 서버로 Authorization code를 보내주기만 하면 된다.
post 메서드로 요청 body에 Authorization code를 담아서 callback 엔드포인트로 요청을 보내면 응답이 오는데, 응답에는 access 토큰이 들어있다.
받은 access 토큰을 set 함수로 accessToken 상태변수에 담아주면 된다. 그리고 isLogin 상태변수를 true로 만들어서 Mypage.js 컴포넌트가 렌더링 되도록 해준다. accessToken은 props로 Mypage.js로 내려준다.
Mypage.js
Mypage.js 에서 받은 access 토큰을 다시 로컬 서버로 보내 유저 정보를 얻어야 한다.
다시 post로 userInfo 엔드포인트로 access 토큰과 함께 요청을 보낸다. 그러면 응답으로 github의 유저데이터와, 로컬 서버의 데이터가 들어오게 되는데 각각을 상태변수에 담아준다. 그리고 로딩 상태변수는 false로 만들어서 UserInfo.js 컴포넌트가 렌더링 되도록 한다.
화면이 잘 바뀌고 데이터가 잘 들어오는것을 확인할 수 있다.
Logout
로그 아웃버튼을 클릭하면 delete 메서드로 access 토큰과 함께 로컬서버의 logout 엔드포인트로 요청을 보낸다.
* 여기서 주의할것은 post 요청과 다르게 delete 메서드 요청에서는 요청 body로 그냥 객체를 감싸면 안되고, data프로퍼티안에 넣어줘야 한다!
delete요청을 보낸후 에러가 나지 않으면 유저 정보를 모두 지우고, 로그인 상태변수를 false로 만들어서 다시 로그인 창이 렌더링 되도록 해주면 된다.
Reference
- 코드스테이츠
- 위키백과
'코드스테이츠' 카테고리의 다른 글
| 3/13 일일 정리 기술면접준비 (0) | 2023.03.13 |
|---|---|
| 3/10 일일정리 TodoList 기획 (0) | 2023.03.10 |
| 3/8 일일정리 토큰 (0) | 2023.03.08 |
| 3/7 일일정리 쿠키와 세션 (0) | 2023.03.07 |
| 3/6 일일정리 네트워크 (0) | 2023.03.06 |
댓글