10. [ Oauth, Node.js, React] Naver Oauth 로 로그인하기 - (2) 코드

0. 서버에 라우터 작업

만들때, CallbackURL 을 지정했다.

해당 하는 URL 이 정상적으로 받아질 수 있도록 서버에 라우터를 설정한다.

같은 위치에 받기 위해서 라우터를 설정했다.

 

 

1. 네이버 Node.js 연결방법 확인 및 버튼 구현

 

https://developers.naver.com/docs/login/api/api.md#node-js

네이버 로그인 API 명세 - LOGIN

예제를 토대로 코드를 만들어본다.

 

1. 클라이언트 ID 와 PASSWORD 를 서버의 .env 세팅에 저장한다.

 

2. 클라이언트에 버튼을 만들어 GET 요청을 하도록 한다.

 

3. 서버에서 필요한 값들은 ENV 의 값으로 대체한다.

 

해당 작업을 완료하면 버튼이 생긴다.

 

2. Callback URL 세팅

 

예제를 토대로 작성했다.

 

결론부터 말하자면 안된다.

 

 

안되는 이유는

 

중간의 request 라는 코드를 지우고, 내가 평소 쓰는 fetch 로 만들어 요청을 보냈다.

 

잘 받아왔다. 이제 회원정보를 조회할 차례이다.

 

 

3. 받아온 Access Token 으로 회원정보조회

 

https://developers.naver.com/docs/login/profile/profile.md

네이버 회원 프로필 조회 API 명세 - LOGIN

 

컨트롤러에 받아온 토큰으로 값을 받는 코드를 작성 하자.

 

요청 결과가 정상적으로 출력되고 그 값은 다음과 같다.

 

 

4. 정보 클라이언트로 보내기 [ 쿠키 ]

 

회원정보 안에는 그다지 중요한 내용이 들어있지 않다.

회원 정보를 변경하는데 있어서도, access_token 뿐 아니라

서버에서 보관중인 ClientID, Password 등이 필요하므로, 민감정보라 할 수 없다.

따라서 간단한 쿠키를 사용해 클라이언트에 보낸다.

 

 

컨트롤러에 쿠키를 추가해 응답하게 만든다.

후에 redirect 를 통해, 클라이언트의 홈페이지로 돌아가게한다.

 

5. 클라이언트에서의 사용

react-cookie 를 통해 사용한다.