Tech Collection

[Login] Naver Login API - Javascript, JSP 본문

Build/Note

[Login] Naver Login API - Javascript, JSP

eee_269 2020. 12. 24. 03:34
728x90
반응형

1. Naver Login API 생성

오픈 API 이용 신청 클릭

 

애플리케이션 이름 입력 : 프로젝트 이름

 

사용할 회원 정보 선택

환경추가 > PC 웹 선택 후 URL 입력

등록하기

Client ID, Client Secret 메모장에 옮겨놓기

 

2. 로그인 API 명세 참고하여 코드 넣기

head 태그 안에 script 넣기

  <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>

본문에 jquery가 있으면 또 안넣어도 괜찮음

body 태그 안에 로그인 버튼 넣기

  <!-- 네이버아이디로로그인 버튼 노출 영역 -->
  <div id="naver_id_login"></div>
  <!-- //네이버아이디로로그인 버튼 노출 영역 -->

body 태그 밑에 script만들고 넣기

  <script type="text/javascript">
  	var naver_id_login = new naver_id_login("YOUR_CLIENT_ID", "YOUR_CALLBACK_URL");
      var state = naver_id_login.getUniqState();
      naver_id_login.setButton("white", 2,40);
      naver_id_login.setDomain("YOUR_SERVICE_URL");
      naver_id_login.setState(state);
      naver_id_login.init_naver_id_login();
  </script>

"YOUR_CLIENT_ID", "YOUR_CALLBACK_URL", "YOUR_SERVICE_URL"

api생성 시 발급받았던 클라이언트 ID와 입력했던 URL들 입력하기

 

3. callback.jsp 만들고 정보 넘기기

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>NaverLoginSDK</title>
    <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="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <script>
        var naver_id_login = new naver_id_login("YOUR_CLIENT_ID", "YOUR_CALLBACK_URL");
          // 접근 토큰 값 출력
          alert(naver_id_login.oauthParams.access_token);
          // 네이버 사용자 프로필 조회
          naver_id_login.get_naver_userprofile("naverSignInCallback()");
          // 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
          var email, username, id, img;
          function naverSignInCallback() {
              // 토큰에 있는 프로필 정보 가져와서 저장
              // email
              email = naver_id_login.getProfileData('email');
              // 별명
              username = naver_id_login.getProfileData('nickname');
              // id
              id = naver_id_login.getProfileData('id');
              // 프로필 사진
              img = naver_id_login.getProfileData('profileImage');
              
              // 정보 가지고 가서 저장할 url
              var url = "http://" + window.location.hostname + 
              		( (location.port==""||location.port==undefined)?"":":" + location.port) + "최종 로그인 url"; 
              
              // 함수 호출
              post_to_url( url, {'id': id, 'username': username, 'email': email, 'img': img})
          }
          
    </script>
</body>

<script type="text/javascript">
// url로 넘기면서 정보도 같이 담아서 갖고가기
function post_to_url(path, params, method='post') {
	  // body 에 form 태그 추가
      const form = document.createElement('form');
      form.method = method;
      form.action = path;
      
      // 정보 hidden으로 form태그 안에 추가하기
      for(const key in params) {
          if(params.hasOwnProperty(key)) {
              const hiddenField = document.createElement('input');
              hiddenField.type = 'hidden';
              hiddenField.name = key;
              hiddenField.value = params[key];
              form.appendChild(hiddenField);
          }
      }
      // form태그 닫기
      document.body.appendChild(form);
      
      // submit으로 전송
      form.submit();
}

</script>
</html>

 

로그인 버튼

로그인 버튼을 클릭했을 때, 정보 이용 동의 창이 뜨고 로그인으로 넘어간다면 성공!

 

728x90
반응형

'Build > Note' 카테고리의 다른 글

[Spring Structure] @Controller? @RestController?  (0) 2021.01.19
[Api 활용] Open Api 의 자료를 json으로 가져오기  (2) 2021.01.18
[Setting] MariaDB와 SpringBoot를 연동하자!  (0) 2021.01.11
[Setting] Spring Boot 생성  (0) 2021.01.09
[Login] Google Login API - JavaScript, JSP  (0) 2020.12.24
'Build/Note' Related Articles more