한바다
[스프링부트+리액트]Naver Login 본문
☑️ 네이버 개발자 센터로 접속하여 Application 등록을 해준다
https://developers.naver.com/main/
: 약관 동의 - 계정정보등록 - 애플리케이션등록(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코드를 리액트로 변환하는 작업 진행
✔️ 리액트에서 yarn create react-app 폴더이름으로 생성
- 앱설치 후 node.js 코드를 리액트 js파일에 붙여 넣는다
- 붙여놓은 코드 내 'YOUR'로 되어 있는 client_id 와 client_secret에 아래 키를 넣어 준다
- 그리고 나서 API설정을 해준다. (입국심사 설정)
var redirectURI = encodeURI("YOUR_CALLBACK_URL");
-> "YOUR_CALLBACK_URL" 이곳에 아래 주소를 붙여 넣는다
✔️ 위 코드를 가지고 스프링부트로 가서 연결을 해준다
'React' 카테고리의 다른 글
리액트 문법 과 네이버콜백 코드설명 (0) | 2024.08.01 |
---|---|
WebConfig,괄호누락,폴더 안불러와짐 (0) | 2024.07.31 |
405 Method Not Allowed (0) | 2024.07.26 |
MySQL+스프링부트+리액트 연결 (1) | 2024.07.25 |
[리액트]useState 코드 실행 (0) | 2024.07.23 |