[OMS] React 네이버 로그인 API 고생일지

3일 동안 프로젝트의 네이버 로그인을 구현하기 위해 집중력을 쏟고 있다.

빠르게 네이버 로그인API에 대해 알아보고 현재 내가 가로막힌 문제에 대해 살펴보자.

 

네이버의 로그인 API 서비스 단계는 크게 두가지 단계로 이루어 진다.

첫번째, 로그인 인증

https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&state=${STATE}

위 코드로 로그인에 대한 인증을 받을 수 있으며, redirect url (callback url)로 code와 state를 받을 수 있다. 

여기서 클라이언트 아이디와 리다이렉트 url은 네이버 developer 사이트에서 애플리케이션 생성과 함께 등록 및 확인이 가능하다.

 

 

https://developers.naver.com/apps/#/register

애플리케이션 - NAVER Developers

이와 함께, 리다이렉트 url을 등록하여, 답신받을 엔드포인트를 작성해주어야한다.

ex) http://localhost:3000/auth/naverCallback

 

해당 엔드포인트로 반환된, code와 state를 가지고 네이버 로그인 api 두번째 단계로 넘어갈 수 있다.

바로, 접근 토큰 발급 요청이다.

프론트엔드에겐 소중하고, 없어서는 안될 이 토큰을 발급받는 것이다.

네이버에서 제공하는 접근 토큰 발급 요청 코드는 아래와 같다.

https://nid.naver.com/oauth2.0/token?grant_type=authorization_code&client_id=${client_id}&client_secret=${client_secret}&code=${code}&state=${state}

위에서 필요한 client_id와 client_secret은 애플리케이션 등록을 완료하면 받을 수 있다.

이제 위 코드를 가지고 통신을 진행하면 response로 token이 들어올 것이라 생각하고 코드를 작성했다.

 

하지만 생각과는 다르게, 무시무시한 CORS 에러가 날 기다리고 있었다.

 

난 CORS에러를 해결해본 경험으로 백엔드에서 프론트엔드의 url을 통과시켜주도록 만들어서 해결해본 경험이 있었지만, 지금의 통신 상대는 네이버이기 때문에 어떻게 해결해야할지 해결방안을 고민이 필요한 시점이다.

 

 

 

내일의 나는 이 문제를 해결했길 간절히 바라고 있다.