네이버 로그인 api를 이용하면 간단하게 네이버 아이디 연동 가입,로그인이 가능합니다. 모든 정보를 새롭게 입력하지 않아도 되므로 신규 유저의 손쉬운 가입을 유도할 수 있습니다. 네이버 api를 사용하여 웹페이지에서 로그인 연동 방법을 알아보겠습니다.

네이버 API 문서의 튜토리얼은 API version 1.0.3을 사용하는데요, 이 글에선 가장 최근 업데이트된 2.0.2 버전을 사용합니다.

전체 코드는 하단에 있습니다.

네이버 디벨로퍼 홈페이지 - Application - 애플리케이션 등록 으로 이동합니다.

생성된 애플리케이션 정보에서 Client ID를 확인 가능합니다.

📝 UI 구성

간단하게 로그인 화면을 구성합니다.
로그인을 완료하면 유저의 정보를 보여줍니다.

html코드

  
  네이버 로그인
  


  

    
Naver Login API 사용하기
    

      

        로그인 버튼을 눌러 로그인 해주세요.
      
      
 
        
      
    

  




...

  

주의할 점 - 로그인 버튼 생성

로그인 버튼은

📍 API 등록 및 사용

라이브러리 삽입

라이브러리를 스크립트로 삽입합니다.

로그인 기능 초기 설정

api설정을 진행합니다. 앞서 생성해둔 앱의 클라이언트 id와 콜백url을 이용합니다.

이렇게 설정을 마치고 나면 html에 만들어둔 로그인 버튼 자리에 로그인 버튼이 생성됩니다.

필수 제공 정보 체크 확인

필수 제공으로 설정했던 정보들을 유저가 체크했는지 검증합니다. 해당 항목을 체크하지 않았다면 다시 제공 창으로 돌아가도록 합니다.

모든 정보를 처리해주기 귀찮아서 닉네임만 했는데요, 실수로 다른 정보를 체크하지 않고 넘어가면 정상적으로 로그인으로 넘어가버립니다. 그럴땐 내정보-보안설정-네이버와 연결된 서비스 관리에서 철회하기를 누르면 연동이 해제됩니다. 새롭게 로그인을 하면 다시 정보 제공 동의창이 보여집니다.

로그인 완료 후 유저 정보 사용

로그인을 정상적으로 성공했다면 유저의 프로필 정보를 불러올 수 있습니다.
naverLogin객체의 user안에 프로필 정보가 담겨있는 것을 볼 수 있습니다.

const message_area=document.getElementById('message');
      message_area.innerHTML=`
      
 Login 성공 
      
user Nickname : ${naverLogin.user.nickname}
      
user Age(범위) : ${naverLogin.user.age}




      
user Birthday : ${naverLogin.user.birthday}
      `;

✨ 로그아웃 구현

로그인한 상태면 로그인 버튼을 로그아웃 버튼으로 바꾸어 나타냅니다.
로그아웃 버튼은 따로 지정된 규칙이 없으므로 자유롭게 id 혹은 class를 지정해주면 됩니다.

로그아웃

✅ 최종 코드

index.html

  
  네이버 로그인
  


  

    
Naver Login API 사용하기
    

      

        로그인 버튼을 눌러 로그인 해주세요.
      
      

        
      
    

  

  
  

style.css

* {
  box-sizing: border-box;
}

body {
  background-color: #c6cdd3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  height: 100vh;
}
h3 {
  margin: 5px;
}

.container {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  width: 450px;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.login-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px;
  width: 400px;
  height: 100%;
  padding: 20px;
}

#message {
  background-color: rgb(222, 233, 238);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  margin-bottom: 15px;
  width: 95%;
}

#button_area {
  background-color: rgb(222, 233, 238);
  border-radius: 10px;
  padding: 10px;
  width: 95%;
  display: flex;
  justify-content: center;
}

💬 문의사항

궁금한점이나 보완할 부분이 있다면 댓글로 알려주세요.
감사합니다.