0. 서버에 라우터 작업
만들때, CallbackURL 을 지정했다.
해당 하는 URL 이 정상적으로 받아질 수 있도록 서버에 라우터를 설정한다.
같은 위치에 받기 위해서 라우터를 설정했다.
1. 네이버 Node.js 연결방법 확인 및 버튼 구현
https://developers.naver.com/docs/login/api/api.md#node-js
예제를 토대로 코드를 만들어본다.
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
컨트롤러에 받아온 토큰으로 값을 받는 코드를 작성 하자.
요청 결과가 정상적으로 출력되고 그 값은 다음과 같다.
4. 정보 클라이언트로 보내기 [ 쿠키 ]
회원정보 안에는 그다지 중요한 내용이 들어있지 않다.
회원 정보를 변경하는데 있어서도, access_token 뿐 아니라
서버에서 보관중인 ClientID, Password 등이 필요하므로, 민감정보라 할 수 없다.
따라서 간단한 쿠키를 사용해 클라이언트에 보낸다.
컨트롤러에 쿠키를 추가해 응답하게 만든다.
후에 redirect 를 통해, 클라이언트의 홈페이지로 돌아가게한다.
5. 클라이언트에서의 사용
react-cookie 를 통해 사용한다.
'메인-프로젝트 > MERN - 다이어리 프로젝트' 카테고리의 다른 글
12. [클라이언트] 서버와 통신하기 (2) Axios 의 적용 (0) | 2023.03.02 |
---|---|
11. [클라이언트] 서버와 통신하기 (1) Axios 의 설명 (0) | 2023.03.02 |
9. [ Oauth, Node.js, React] Naver Oauth 로 로그인하기 - (1) 이론 (0) | 2023.02.23 |
8.[클라이언트] - Redux-Toolkit ( Typescript )을 이용해, DB의 값 가져오기 (Thunk 액션 생성자 ) (0) | 2023.02.21 |
7. [서버] 서버설정 (2) - Validation 아웃소싱과 DB 연결, 사용까지 (0) | 2023.02.21 |
댓글