908 No

5 . 네이버 로그인 연동 - 2

2017-09-03 18:46:12 By 머나먼나라 0 1499 댓글수 4 포스트 하기

5월 2024
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

자바스크립트 연동

Controller class Login.php

아래 코드 추가

 // Member Login Veiw Page
    public function index() {
        //session_destroy();
        $this->load->library('SnsLogin');

        $assign_data['btn_gg_login'] = $this->snslogin->google_login();
        $assign_data['btn_fb_login'] = $this->snslogin->facebook_login();
        $assign_data['btn_tw_login'] = $this->snslogin->twitter_login();
        $assign_data['btn_kk_login'] = $this->snslogin->kakao_login();    
        
        $assign_data['naver']=$this->_naverInfo();
        
        //네이버 인경우
       // $data['naver']=_naverInfo();
        $this->_view('login', $assign_data);
        
    } 


 function _naverInfo(){
    	// 네이버 로그인 콜백 예제
    	$data['client_id'] = "L1PXzu5AtMQ61W0jzAJX";
    	$data['client_secret'] = "hRRZMEy2Uo";
    	$data['YOUR_CALLBACK_URL']='http://braverokmc3.dothome.co.kr/login/naver_login_action';
    	$data['YOUR_SERVICE_URL']='http://braverokmc3.dothome.co.kr/'; 	
    	return  $data;
    }
    
    public function naver_login_action(){
    	$data['naver']=$this->_naverInfo();
    	$this->load->view('naver_v.php', $data);    		
    }

뷰 - login.php

<div class="container">

    <div class="alert alert-success" style="margin:0 auto; max-width:380px; margin-top:50px; padding:15px;">
        <form role="form" style="max-width:330px; padding:15px; margin:0 auto;" method="post" action="/login/login_action">
            <input type="text" name="userid" class="form-control" placeholder="User ID" required autofocus>
            <input type="password" name="password" class="form-control" placeholder="Password" required style="margin-top:5px;">
            <label class="checkbox">
                <input type="checkbox" value="remember-me">
                Remember me </label>
            <button class="btn btn-lg btn-primary btn-block" type="submit">
                Sign in
            </button>

            <a href="/login/register" class="btn btn-block btn-social btn-reddit"> <i class="glyphicon glyphicon-user"></i> Sign up with Local </a>

            <div style="margin-top:20px; padding-top:10px; border-top:1px solid #b2dba1;">
                <?=$btn_gg_login ?>
                <?=$btn_fb_login ?>
                <?=$btn_tw_login ?>
                <?=$btn_kk_login ?>

        
        


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

<!-- 네이버아이디로로그인 버튼 노출 영역 -->
  <div id="naver_id_login"></div>
  <!-- //네이버아이디로로그인 버튼 노출 영역 -->
  <script type="text/javascript">
  	var naver_id_login = new naver_id_login("<?php echo $naver['client_id'];?>", "<?php echo $naver['YOUR_CALLBACK_URL'];?>");
  	var state = naver_id_login.getUniqState();
  	naver_id_login.setButton("white", 2,40);
  	naver_id_login.setDomain("<?php echo $naver['YOUR_SERVICE_URL'];?>");
  	naver_id_login.setState(state);
  	naver_id_login.setPopup();
  	naver_id_login.init_naver_id_login();
  </script>


 
            </div>
        </form>
    </div>

</div>
<!-- /container -->

naver_v.php

<!doctype html>
<html lang="ko">
<head>
<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>
</head>
<body>
<br>
<script type="text/javascript">
  var naver_id_login = new naver_id_login("<?php echo $naver['client_id']; ?>", "<?php echo $naver['YOUR_CALLBACK_URL']; ?>" );
  // 접근 토큰 값 출력
  //alert(naver_id_login.oauthParams.access_token);
  // 네이버 사용자 프로필 조회
  naver_id_login.get_naver_userprofile("naverSignInCallback()");
  // 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
  function naverSignInCallback() {
  //  alert(naver_id_login.getProfileData('email'));
    //alert(naver_id_login.getProfileData('nickname'));
   // alert(naver_id_login.getProfileData('age'));


	  //DB처리, 세션 처리
	  // ~~
		
	 // var sns_id=naver_id_login.getProfileData('id');
/* 	 "email": "openapi@naver.com",
    "nickname": "OpenAPI",
    "profile_image": "https://ssl.pstatic.net/static/pwe/address/nodata_33x33.gif",
    "age": "40-49",
    "gender": "F",
    "id": "32742776",
    "name": "오픈 API",
    "birthday": "10-01"
	  */
	 
	  var email=naver_id_login.getProfileData('email');
	  var sns_type="naver";
	  var name =naver_id_login.getProfileData('nickname');
	  var age=naver_id_login.getProfileData('age');
	  var birthday=naver_id_login.getProfileData('birthday');
	  var gender=naver_id_login.getProfileData('gender');
	  var profile_image=naver_id_login.getProfileData('profile_image');
	  var id=naver_id_login.getProfileData('id');
	  
	  $("#rt").html( email+"<br>"+sns_type+"<br>"+name+"<br>"+age+"<br>:birthday : "
			   +birthday+ " <br> profile_image: " +profile_image
				+" <br> id : "+ id
			   );
	  /* $.ajax({
			url:"/login/register",
			type:'post',
			data:{
				'sns_id':sns_id,
				'email':email,
				'sns_type': sns_type,
				'name':name,
				'age':age
			},
			success:function(result){
				// window.opener.location.href="/login/register";
				// self.close();
				
			},
			error:function(result){
				alert("에러");
			}
	  }); */
	  
  }

</script>

ss
<div id="rt">

</div>

</body>
</html>

https://developers.naver.com/docs/login/web/

네이버 로그인 JavaScript 예제는 2개의 파일로 구성되어 있습니다. (naverlogin.html, callback.html)
1. APIExamNaverLogin.html
<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>네이버 로그인</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="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
  <!-- 네이버아이디로로그인 버튼 노출 영역 -->
  <div id="naver_id_login"></div>
  <!-- //네이버아이디로로그인 버튼 노출 영역 -->
  <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.setPopup();
  	naver_id_login.init_naver_id_login();
  </script>
</html>

2. callback.html
<!doctype html>
<html lang="ko">
<head>
<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>
</head>
<body>
<script type="text/javascript">
  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
  function naverSignInCallback() {
    alert(naver_id_login.getProfileData('email'));
    alert(naver_id_login.getProfileData('nickname'));
    alert(naver_id_login.getProfileData('age'));
  }
</script>
</body>
</html>