[스프링부트+리액트]Naver Login

☑️ 네이버 개발자 센터로 접속하여 Application 등록을 해준다

https://developers.naver.com/main/

NAVER Developers

: 약관 동의 - 계정정보등록 - 애플리케이션등록(API 이용신청)

[로그인 오픈API 서비스 환경]

환경추가 : PC웹

 

- 위 환경추가까지 완료 했다면 로고 이미지 등록 후 "네이버로그인검수요청"클릭 해준다

- 검수요청 가기 클릭 : 검수요청가이드 확인 체크/ 제공 정보 활용처 확인에 첨부여부 체크

- 추가 제출 서류확인 / 없음 체크

- 네이버 로그인 절차를 확인할 수 있는 캡쳐파일 첨부

 

✔️web 애플리케이션 코드

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

- 해당코드에서 'your' 변경한다

특정나라: YOUR_CLIENT_ID = 네이버 개발자 센터에 등록한 회사키
입국심사: YOUR_SERVICE_URL = 로그인 버튼이 생길 주소
입국심사완료: YOUR_CALLBACK_URL = 로그인 완료되면 이동할창

- 로그인 창을 만들고

- 로그인이 완료되면 얼럿창으로 보여줌

node.js코드를 리액트로 변환하는 작업 진행

 

✔️ 로그인 방식 오픈 API 호출 예

github에서 보기

 

✔️ 리액트에서 yarn create react-app 폴더이름으로 생성

- 앱설치 후 node.js 코드를 리액트 js파일에 붙여 넣는다

- 붙여놓은 코드 내 'YOUR'로 되어 있는 client_id 와 client_secret에 아래 키를 넣어 준다

- 그리고 나서 API설정을 해준다. (입국심사 설정)

var redirectURI = encodeURI("YOUR_CALLBACK_URL");

-> "YOUR_CALLBACK_URL" 이곳에 아래 주소를 붙여 넣는다

 

✔️  위 코드를 가지고 스프링부트로 가서 연결을 해준다