네이버 로그인 API를 사용하여 웹 애플리케이션에 로그인 구현하기

네이버 로그인 API를 활용하여 웹 애플리케이션에 손쉽게 로그인 기능을 구현할 수 있습니다. 아래의 코드와 단계를 따라 네이버 로그인을 웹 애플리케이션에 통합하는 방법을 설명합니다.

 

1. 네이버 개발자 계정 및 앱 생성

1) 네이버 개발자 센터(https://developers.naver.com/apps/#/register)에 접속하여 개발자 계정을 생성합니다.

2. 개발자 계정으로 로그인한 후 "애플리케이션 등록"을 통해 새로운 애플리케이션을 생성합니다. 애플리케이션 이름과 설명을 입력하고 "웹" 플랫폼을 선택합니다.
3. 생성된 애플리케이션 설정에서 "서비스 URL"에 웹 애플리케이션의 주소를 입력합니다.
4. "클라이언트 ID"와 "클라이언트 시크릿"을 확인하고, 이 정보를 사용하여 웹 애플리케이션에서 네이버 API를 호출할 수 있습니다.

 

2. HTML과 JavaScript로 네이버 로그인 구현

네이버 로그인 API를 구현하고자 하는 곳에 스크립트 파일과 jQuery의 CDN 주소를 추가합니다.

<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

 

<script>
  var naver_id_login = new naver_id_login("YOUR_CLIENT_ID", "YOUR_REDIRECT_URI");
  var state = naver_id_login.getUniqState();
  naver_id_login.setButton("white", 2, 40);
  naver_id_login.setDomain("YOUR_REDIRECT_URI");
  naver_id_login.setState(state);
  naver_id_login.setPopup();
  naver_id_login.init_naver_id_login();

  // 접근 토큰 값 출력
  console.log(naver_id_login.oauthParams.access_token);

  // 네이버 사용자 프로필 조회
  naver_id_login.get_naver_userprofile("naverSignInCallback()");

  // 네이버 사용자 프로필 조회 이후 프로필 정보를 처리하는 callback 함수
  function naverSignInCallback() {
    console.log(naver_id_login.getProfileData('email'));
    console.log(naver_id_login.getProfileData('name'));
    const email = naver_id_login.getProfileData('email');
    sendEmailToServer(email);
  }

  function sendEmailToServer(email) {
    var emailData = {
      email: email // 이메일 주소를 JSON 객체에 추가
    };

    // 서버로 데이터를 전송하는 Ajax 요청을 보냅니다.
    $.ajax({
      url: '/user/json/emailCheck', // 백엔드 서버의 API 엔드포인트 주소
      method: 'POST',
      data: JSON.stringify(emailData), // JSON 데이터로 변환하여 전송
      contentType: 'application/json', // JSON 데이터를 전송한다고 명시
      success: function (response) {
        // 성공 시 동작
        console.log('데이터 전송 성공:', response);

        if (response.userId == null) {
          alert('회원이 아닙니다. 가입해주세요.');
          window.location.href = 'http://localhost:8080/user/addUserView.jsp'; // 회원가입 페이지로 이동
        } else if (response.userId != null) {
          alert('로그인되었습니다.');
          window.location.href = 'http://localhost:8080/index.jsp'; // 메인페이지로 이동
        }
      },
      error: function (error) {
        // 실패 시 동작
        console.log('데이터 전송 실패:', error);
      },
    });
  }
</script>

 

3. HTML에서 네이버 로그인 실행

<div id="naver_id_login"></div>

위 코드를 사용하면 네이버 로그인을 웹 애플리케이션에 통합할 수 있습니다. 사용자가 "네이버로 로그인" 버튼을 클릭하면 네이버 로그인 팝업이 나타나고, 로그인 후에는 사용자 정보를 가져와 서버로 전송합니다. 서버는 이 정보를 처리하고 로그인 또는 가입 여부에 따라 동작합니다.

네이버 로그인을 통해 사용자를 인증하고 애플리케이션에 접근 권한을 부여할 수 있습니다. 이를 통해 보다 안전하고 개인화된 웹 애플리케이션을 구현할 수 있습니다.