9. [ Oauth, Node.js, React] Naver Oauth 로 로그인하기 - (1) 이론

앞서서 Next.js 의 next-auth 라이브러리를 이용하여, 구글 OAuth 를 진행해보았다.

사실 너무나 간단히 따라하는 것 만으로도 구성할 수 있어서 너무나 편했다.

 

하지만 그에 따라 Oauth 가 어떻게 돌아가는지, 인증 방식이 어떻게 처리되는 것인지,

인증이 어떻게 처리되고 쿠키에 어떤 방식으로 넣는 것인지 전혀 알지 못하는 상태로 구현했다.

 

이번 Node.js 와 React를 사용한 OAuth를 구현해보며

OAuth의 구동 방식에 대하여 조금 더 자세히 알고 처리 할 수 있는 계기가 되었다.

 

 

1. OAuth 의 작동 방식에 대하여

 

사실 이게 가장 핵심이다.

1. 클라이언트는 Oauth 로 허가 코드를 요청한다.

2. Oauth 는 허가 코드를  Redirect URI 를 통해 응답한다.

 

이때, 클라이언트는 Oauth 로 Oauth 를 사용하는 사이트에서 발급받은 "ID 혹은 PASSWORD, CREDIT 등을 넣는다"

대부분의 Oauth 는(네이버, 구글, 깃헙 등...) 디벨로퍼 탭에서 API 와 ID 등을 발급받을 수 있다.

 

3. 허가코드가 생긴 클라이언트는, 서버로 허가 코드를 전달하게 되고

4. 서버는 Oauth 로 허가 코드를 주고  접근 코드(Access Token)를 가져온다.

 

5. 서버는 클라이언트로 접근 코드를 응답한다

이후로는 접근코드를 어떻게 활용할 지는 클라이언트의 마음이다.

 

 

나는 조금 다른 방식으로 접근했다.

굳이 여러번 요청과 응답을 하지 않고 서버에서 직접 전부 처리하고 클라이언트로 보내주는 방식을 선택했다.

 

 

 

1. 클라이언트가 서버로 허가 코드 요청을 위한 주소를 보내고

2. 서버는 Oauth 사이트에서 발급받은 ID, PASSWORD, API KEY 등을 가지고 Oauth 에 허가 코드를 요청한다.

3. Oauth 는 KEY 가 적절하다면 허가 코드를 서버로 응답한다.

4. 서버는 허가코드를 가지고, Oauth에 접근 코드를 요청, 응답받고

5. 서버는 응답받은 접근코드를 이용하여 Oauth 에 유저 정보를 요청, 응답받는다.

6. 최종적으로 얻어진 유저정보를 클라이언트로 다시 보내준다.

 

2. Redirect URI

 

정리하자면, Redirect URI 즉, 

 

구글 Oauth 의 승인된 리디렉션 URI,

네이버 Oauth 의 Callback URL, 등은

정상적인 요청이 Oauth 서버에 도달했을때, Oauth 가 보내주는 허가코드를 받을 수 있는 URL 인것이다.

 

** 해당 URL 주소는 확정 전이다. 나는 이대로 하지 않았다.

 

Redirect URL을 통해 Redirect 된 허가코드를 우리가 받아,

허가코드를 사용해 최종적으로 접근 코드를 받아오는 것이 우리의 목표이다.

 

 

3. 설계

 

1. 네이버 Oauth 를 사용합니다.

2. 서비스 URL 은 클라이언트 서버를 넣어줍니다.

3. CallBack URL 은 내 서버를 넣어줍니다.

 

요청을 클라이언트에서 하고, 서버에서 전부 처리하여 다시 돌려줄 것이기 때문에

허가코드를 받을 곳을 서버로 설정한 것입니다.

 

4. 네이버 디벨로퍼 등록

 

https://developers.naver.com/products/login/api/api.md

 

 

다음에 계속