[JSP, JavaScript] 네이버 로그인 API

현재 국비에서 팀 프로젝트를 진행중에 있다.

M/V/C 파트로 나눠서 협업을 하고 있는데, 지금은 V 파트를 맡아서 진행중이다.

 

그렇게 협업을 하던 도중에, 다른 부분에 비해 굉장히 시간을 오래 쏟으면서 구현한 부분이 바로 네이버 아이디로 로그인하는 부분이었다.

따로 정리가 필요할 것 같다는 생각이 들어서, 정리해보려고 한다.

---

먼저, 네이버 아이디로 로그인하기 위해서는, 네이버 Developers 사이트에서 api를 가져와야하는데, 그러기 위해서는 애플리케이션을 등록해야한다.

나는 이미 등록을 한 상태이다. 여기까지 진행하는 것은 어렵지 않았다.

프로젝트 팀명이 코마이기 때문에, 나는 애플리케이션 이름을 코마라고 정하였다.

해당 사이트에서 이메일만 추출하도록 설정하였기 때문에, 개인정보는 이메일만 제공된다.

 

---

 // 네이버 로그인
      //  https://developers.naver.com/docs/login/devguide/devguide.md
      // 에서 데이터를 가져왔다고 보면 됨
      var naver_id_login = new naver_id_login( // 네이버 로그인을 위한 객체 생성
      "내 클라이언트 ID", // 내 client ID: 네이버 개발자 센터에서 발급받은 클라이언트 ID
      "http://localhost:8088/project-climbing/login.jsp" // 내 callback url: 로그인 후 보여질 URL
      );

      // 네이버 로그인 객체를 생성하고, 고유한 상태 값을 생성
      // 이 값은 로그인 요청과 응답을 연결하기 위해 사용됨
      var state = naver_id_login.getUniqState();

      // 로그인 버튼의 디자인
      // "green"은 버튼 색상, 2는 버튼 모양 (모양은 네이버 개발자 문서 참조), 40은 버튼 크기
      // 네이버 개발자 문서 - https://developers.naver.com/docs/login/bi/bi.md
      naver_id_login.setButton("green", 2, 40);

      // 이 로그인 API를 사용할 페이지의 주소를 설정
      // 이 주소는 네이버 로그인 API에서 검증하는 페이지 주소
      naver_id_login
            .setDomain("http://localhost:8088/project-climbing/login.jsp");

      // 로그인 요청에 사용할 상태 값을 설정
      // 이 값은 CSRF 공격( 사이트 간 요청 위조 공격 )을 방지하기 위해 사용됨 
      naver_id_login.setState(state);

      // 로그인 팝업을 사용할 수 있도록 설정
      // 사용자가 로그인 버튼을 클릭했을 때 팝업창이 열리게 됨
      //naver_id_login.setPopup();

      // 네이버 로그인 초기화: 설정한 값을 바탕으로 네이버 로그인 기능을 초기화
      // 이 메소드가 호출되어야 네이버 로그인 버튼이 제대로 작동됨
      naver_id_login.init_naver_id_login();
      
        //로그인 정보가 있다면 naverLoginCallback() 함수 호출
         naver_id_login.get_naver_userprofile("naverLoginCallback()");


      // 네이버 로그인 버튼 클릭 시 처리 함수
      function naverLoginCallback() {
         // 네이버 사용자 정보 가져오기
         var naverUserInfo = naver_id_login.getProfileData('email');
         if (naverUserInfo) {
            // 이메일 추출
            var email = naverUserInfo;
            // 이메일 정보 C에게 전송
            sendToController({
               email : email
            });
         }
      }

      // 네이버 로그인 상태 확인 및 사용자 정보 처리 함수
      function getNaverUserInfo() {
         // 네이버 로그인 상태라면
         if (naver_id_login.getLoginStatus()) {
            naverLoginCallback(); // 콜백함수 호출
         } else {
            // 로그인 상태가 아닐 경우 경고
            alert("로그인 상태가 아닙니다.");
         }
      }
      
      // 네이버 로그인 버튼 클릭 시 getNaverUserInfo 호출
      document.getElementById('naver_id_login').addEventListener('click', function() {
         getNaverUserInfo();
      });

      // 네이버 로그인 api 끝

 

주의사항이라면 콜백 url은 네이버 developers 사이트에서 로그인 API 서비스 환경에서 Call back URL에 내가 입력한 주소를 입력해야한다.

 

자세한 코드는 https://github.com/yn-j-98/2024record/blob/main/project-climbing/src/main/webapp/login.jsp

2024record/project-climbing at main · yn-j-98/2024record

내 깃허브에 기록해두었다.