915 No

페이스북 로그인 연동 처리, 페이스북 자바스크립트 로그인 연동 처리 - 2번째 글

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

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

2. 페이스북 로그인 연동 처리

컨트롤러 Auth

모든 sns 의 공통 등록 처리 코드

sns 의경우 이메일이 없는 경우가 있으므로 없을 경우 sns_id 값으로 저장한다.
$insertId=$assign_data['email']!=null ? $assign_data['email'] :$assign_data['sns_id'];

  // Register Action Process
    function _register_action($assign_data) {

         //sns 의경우 이메일이 없는 경우가 있으므로 없을 경우 sns_id 값으로 저장
        $insertId=$assign_data['email']!=null ? $assign_data['email'] :$assign_data['sns_id'];
        
        //sns_id 로 기존에 등록된 유저 확인
        $sql="select * from users where userid=?";
        $query=$this->db->query($sql,  $insertId);
        
       
        $message="";
        //등록된 userid 를 확인 한다.
        if($query->num_rows() > 0){
            //테스트 메시지
            $message="userid 가 존재";
        }
        else
        {
            //userid 값이 없으면 등록한다. 
             // Member Register in Your Code.       
             $data=array(
                'userid' =>$insertId,
                'sns_id'=>$assign_data['sns_id'],
                'sns_type'=>$assign_data['sns_type'],
                'register_auth_code'=>1,  //이메일 인증 코드 1로 
                'profile_img'=>$assign_data['profile_img'],
                'email'=>$assign_data['email'],
                'nickname'=>$assign_data['nickname'],
                'register_ip'=>$_SERVER['REMOTE_ADDR']
                );       
            $this->db->insert('users', $data);
              $message="등록했습니다.";
                      
        }
        
        //DB에서 정보를 다시 불러온다.
        $sql="select * from users where userid=?";
        $query=$this->db->query($sql,  $insertId);
        $result=$query->row();

         //세션 생성         
        if($result) {             
            //세션 생성         
            $newdata =array(
                'nickname' =>$result->nickname,
                'email' =>$result->email,
                'logged_in' =>TRUE,
                'auth_code' =>$result->auth_code,
                'icon'=>$result->icon,
                'sns_type'=>$result->sns_type,
                'userid' =>$result->userid
            );
            
            $this->session->set_userdata($newdata);
            
            redirect('/');
            exit;
         }else{
             
             alert('로그인에 실패 하였습니다.', '/');
             exit;
         }                            
    }

페이 스북인 경우 다음과 같이 /auth/registerFaceBookl 포스트로 로 받아 온다.

public function registerFaceBook()
    {

        $assign_data=array(
                    'sns_id'=> $this->input->post('sns_id', true),
                    'sns_type'=>$this->input->post('sns_type', ture),
                    'profile_img'=>$this->input->post('profile_img', true),
                    'nickname'=>$this->input->post('nickname', true),
                    'email'=>$this->input->post('email', true),
                    'userid'=>''
         );
           
         $this->_register_action($assign_data);

    }

login_form_v.php

1. 현재 페이북이 로그인 상태가 아닌경우.

// This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    // The response object is returned with a status field that lets the
    // app know the current login status of the person.
    // Full docs on the response object can be found in the documentation
    // for FB.getLoginStatus().
    if (response.status === 'connected') {
      // 페이스북에 로그인 중이라면  testAPI()  실행 
      testAPI();
      
    } else {
     //페이스북에 로그인 중이 아니라면 다음을 실행
     //여기에서 로그인 버튼을 만들어서 화면에 붙인다.
    var loginHtml ='<a href="javascript:fbLogin();"'+ 
    'class="btn btn-block btn-social btn-facebook"> <i class="fa fa-facebook"></i>페이스북으로 로그인</a>' +
    ' <p></p> ' ;   
   
    document.getElementById('status').innerHTML =loginHtml;     
    }
  }

2. 현재 웹사이트에 로그인 되어서 세션이 생성 된경우 리다이렉트 처리

3. 페이스북은 로그인 상태이지만 아직 클라이언트 웹에서는 로그인 전 상태일 경우 처리

              <p></p><?php 
   $attribute=array( 'id'=>'facebookFrom');
    echo form_open('/index.php/auth/registerFaceBook',$attribute);
?>
            <input type='hidden' name='sns_id' id="sns_id" >
            <input type='hidden' name='sns_type' id="sns_type">
            <input type='hidden' name='nickname' id="nickname">
            <input type='hidden' name='profile_img' id="profile_img">
            <input type='hidden' name='email' id="email">
    <div id="status"></div>
    </form><p></p>

<?php      
           if($this->session->userdata('logged_in')==TRUE){
               //1.현재 로그인 중이라면 메인으로 리다이렉트
            ?>
           location.href="/";
       <?php        
           }
           else {
               
               //2. 페이스북에는 로그인 되었으나 macaronics 에는 로그인 안 된 경우
        ?>       
        var loginHtml ='<button class="btn btn-block btn-social btn-facebook" id="fbLogin"> ';
        loginHtml += ' <i class="fa fa-facebook"></i>페이스북으로 로그인</btton>' ;

        document.getElementById('status').innerHTML =loginHtml; 
              $("#sns_id").val(response.id);
              $("#sns_type").val('facebook');
              $("#nickname").val(response.name);
              $("#profile_img").val(response.public_profile);
              $("#email").val(response.email);
             if(faceBooKLoginStatus) $("#facebookFrom").submit();  
      <?php         
           }
      ?>

전체 코드

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
   <title>Macaronics</title>

    <!-- Bootstrap -->
    <link href="/include/css/bootstrap.min.css" rel="stylesheet">
    <!-- font awesome -->
    <link href="/include/css/font-awesome.min.css" rel="stylesheet">
    <!-- Custom Style -->
    <link href="/include/css/style.css" rel="stylesheet">

    <!-- Bootstrap Social Button -->
    <link href="/assets/lib/bootstrap_social/bootstrap-social.css" rel="stylesheet" >


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></scri.row>.containerpt>
    <![endif]-->

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="/include/js/bootstrap.min.js"></script>
 

<script>

   var faceBooKLoginStatus=false;
  // This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    // The response object is returned with a status field that lets the
    // app know the current login status of the person.
    // Full docs on the response object can be found in the documentation
    // for FB.getLoginStatus().
    if (response.status === 'connected') {
      // 페이스북에 로그인 중이라면  testAPI()  실행 
      testAPI();
      
    } else {
     //페이스북에 로그인 중이 아니라면 다음을 실행
     //여기에서 로그인 버튼을 만들어서 화면에 붙인다.
    var loginHtml ='<a href="javascript:fbLogin();"'+ 
    'class="btn btn-block btn-social btn-facebook"> <i class="fa fa-facebook"></i>페이스북으로 로그인</a>' +
    ' <p></p> ' ;   
   
    document.getElementById('status').innerHTML =loginHtml;     
    }
  }

  // This function is called when someone finishes with the Login
  // Button.  See the onlogin handler attached to it in the sample
  // code below.
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
       statusChangeCallback(response);
   
    
    });
  }

  window.fbAsyncInit = function() {
  FB.init({
    appId      : '1408521035928580',
    cookie     : true,  // enable cookies to allow the server to access 
                        // the session
    xfbml      : true,  // parse social plugins on this page
    version    : 'v2.8' // use graph api version 2.8
    
  });

    FB.getLoginStatus(function(response) {
       statusChangeCallback(response);
            console.log(" 상태 정보 출력 :" + JSON.stringify(response));
    });     
         
  };

  // Load the SDK asynchronously
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v2.10&appId=1408521035928580";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

  // Here we run a very simple test of the Graph API after login is
  // successful.  See statusChangeCallback() for when this call is made.
  function testAPI() {
    // 로그인이 성공시 다음 아래 코드에서 실행 하면 된다.
    
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', { locale: 'ko_KR', fields: 'name, email' } ,function(response) {
     
     //여기서 부터 DB 정보 연결 코딩을 환경에 맞게 개발을 하면 된다.
     // DB 에서 id 또는 email 에서 저장된 동일한 email 있을 경우 저장된 정보 불러 오고 없으면 
     // 새롭게 등록한다.  
     
      console.log('Successful login for: ' + response);
      console.log(' 출력 :  ' + JSON.stringify(response));
  
      <?php      
           if($this->session->userdata('logged_in')==TRUE){
               //1.현재 로그인 중이라면 메인으로 리다이렉트
            ?>
           location.href="/";
       <?php        
           }
           else {
               
               //2. 페이스북에는 로그인 되었으나 macaronics 에는 로그인 안 된 경우
        ?>       
        var loginHtml ='<button class="btn btn-block btn-social btn-facebook" id="fbLogin"> ';
        loginHtml += ' <i class="fa fa-facebook"></i>페이스북으로 로그인</btton>' ;

        document.getElementById('status').innerHTML =loginHtml; 
              $("#sns_id").val(response.id);
              $("#sns_type").val('facebook');
              $("#nickname").val(response.name);
              $("#profile_img").val(response.public_profile);
              $("#email").val(response.email);
             if(faceBooKLoginStatus) $("#facebookFrom").submit();  
      <?php         
           }
      ?>   


     });
  }

 function fbLogin(){

    FB.login(function(response){
  // Handle the response object, like in statusChangeCallback() in our demo
  // code.     
        faceBooKLoginStatus=true;
       checkLoginState();
    }, {scope: 'public_profile , email '});

} 

</script>    

  </head>
  <body>
    <div class="container">
      <div class="row">
      
        <div class="col-md-4">
        </div>	
        <div class="col-md-4">
        	  <div class="page-header">
		          <h2><a href="/">Macaronics</a></h2>
		        </div>
          <div class="login-box well">
        <form accept-charset="UTF-8" role="form" method="post" action="">
        <?php 
        	$attribute=array(
					'class' => 'form-horizontal',
					'id'=>'auth_login',
					'method' =>'post'
			);
			echo form_open('/auth/login'.empty($returnURL) ? '' : '?returnURL='.rawurlencode($returnURL), $attribute);
        	
        ?> 	
        	
        	
            <legend>로그인</legend>
            
				<input type="hidden"  name="con_ip" value='<?php echo $_SERVER['REMOTE_ADDR']; ?>'  >
				<input type="hidden"  name="SERVER_PORT" value="<?php echo $_SERVER['SERVER_PORT']; ?>"  >
				<input type="hidden" name="HTTP_USER_AGENT" value="<?php echo $_SERVER['HTTP_USER_AGENT']; ?>"  >				    
            <div class="form-group">
                <label for="username-email">아이디</label>
                <input name="userid" value='<?php echo set_value("user_id"); ?>' id="username-email" placeholder="아이디" type="text" class="form-control" />
            </div>
            <div class="form-group">
                <label for="password">비밀번호</label>
                <input name="password" id="password" value='<?php echo set_value("user_id"); ?>' placeholder="Password" type="password" class="form-control" />
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-default btn-login-submit btn-block m-t-md" value="로그인" />
            </div>
           
                       <span class='text-center'><a href="/bbs/index.php?mid=index&act=dispMemberFindAccount" class="text-sm">비밀번호 찾기</a></span>
            <hr />
            <div class="form-group">
                <a href="/index.php/user/register/" class="btn btn-default btn-block m-t-md"> 회원가입</a> 
               <!-- <a href="javascript:alert('관리자 권한이 필요합니다.')" class="btn btn-default btn-block m-t-md"> 회원가입</a> -->
            </div>
        </form>
                
                <h2 class="text-center">간편로그인</h2>
              <div style="margin-top:20px; padding-top:10px; border-top:1px solid #b2dba1;">
                <?=$btn_gg_login?>
                
                <p></p><?php 
   $attribute=array( 'id'=>'facebookFrom');
    echo form_open('/index.php/auth/registerFaceBook',$attribute);
?>
            <input type='hidden' name='sns_id' id="sns_id" >
            <input type='hidden' name='sns_type' id="sns_type">
            <input type='hidden' name='nickname' id="nickname">
            <input type='hidden' name='profile_img' id="profile_img">
            <input type='hidden' name='email' id="email">
    <div id="status"></div>
    </form><p></p>             
                
                <?=$btn_tw_login?>
                <?=$btn_kk_login?>
            </div>

          </div>
          <div class="col-md-4">
         </div>	
        </div>
      </div>
    </div>



  
  </body>
  </html>

Codeigniter