자바스크립트로 fb API연동하여 로그인하기



그래프 API 탐색기 이용하기

url : https://developers.facebook.com/tools-and-support 



appid 에서 가져올 권한 선택추가 선택


default : id, name 

추가로 가져올 정보 : email






위 api 탐색기로 선 테스트 후 

아래처럼 javascript로 코드작성.

참고url : https://developers.facebook.com/docs/facebook-login/web#logindialog



<<html code>>


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--
reference to : https://developers.facebook.com/tools-and-support
-->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '2028791704043595',
     cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v3.0' // use graph api version 2.8
});
    FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};

(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

   /*
     콜백에 제공되는 response 개체에는 다음과 같은 여러 필드가 포함되어 있습니다.
    {
        status: 'connected',
        authResponse: {
            accessToken: '...',
            expiresIn:'...',
            signedRequest:'...',
            userID:'...'
        }
    }코드 복사
    status는 앱 사용자의 로그인 상태를 지정합니다. 상태는 다음 중 하나일 수 있습니다.
    connected - 사용자가 Facebook에 로그인하고 앱에 로그인했습니다.
    not_authorized - 사용자가 Facebook에는 로그인했지만 앱에는 로그인하지 않았습니다.
    unknown - 사용자가 Facebook에 로그인하지 않았으므로 사용자가 앱에 로그인했거나 FB.logout()이 호출되었는지 알 수 없어,
Facebook에 연결할 수 없습니다.
    connected 상태인 경우 authResponse가 포함되며 다음과 같이 구성되어 있습니다.
    accessToken - 앱 사용자의 액세스 토큰이 포함되어 있습니다.
    expiresIn - 토큰이 만료되어 갱신해야 하는 UNIX 시간을 표시합니다.
    signedRequest - 앱 사용자에 대한 정보를 포함하는 서명된 매개변수입니다.
    userID - 앱 사용자의 ID입니다.
    앱에서 앱 사용자의 로그인 상태를 알게 되면 다음 중 하나를 수행할 수 있습니다.
    사용자가 Facebook과 앱에 로그인한 경우 앱의 로그인된 환경으로 리디렉션됩니다.
    사용자가 앱에 로그인하지 않았거나 Facebook에 로그인하지 않은 경우 FB.login()을 사용하여 로그인 대화 상자에 메시지를
표시하거나 로그인 버튼을 표시합니다.
        */
   function statusChangeCallback(response) {
    
      console.log('statusChangeCallback');

      if (response.status === 'connected') {
        console.log(response.authResponse.accessToken);
        // Logged into your app and Facebook.
        testAPI();
      } else if (response.status === 'not_authorized') {
        document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';
      } else {
        document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';
      }

  }

function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
  
function testAPI() {
  console.log('Welcome! Fetching your information.... ');
  FB.api(
    '/me',
    {"fields":"id,name,email"},
    function(response) {
       // Insert your code here
      console.log('Successful login for: ' + response.name);

      document.getElementById('status').innerHTML = JSON.stringify(response);
    }
  );
}

function fblogout(){

  FB.logout(function(response) {
    window.location.reload();
  });
}

</script>

<fb:login-button
scope="public_profile,email"
onlogin="checkLoginState();">
</fb:login-button>

<input type="button" onclick="javascript:fblogout();" value ="로그아웃" />
<div id="status"/>

</body>
</html>


로그인페이지>>


로그인후 fb의 개인정보 받아 display



로그인은 잘 되나, 로그아웃은 아래와 같은 에러내용으로 console log를 찍고 로그아웃이 안되고 있음. 

유투브 동영상등 찾아보고 진행했지만 해결못함.


Refused to display 'https://www.facebook.com/home.php' in a frame because it set 'X-Frame-Options' to 'deny'.


'프로그래밍 > PHP' 카테고리의 다른 글

curl kakao open api사용하기  (0) 2018.08.05
php CURL 사용하기  (0) 2018.07.31
Javascript로 Facebook로그인  (0) 2018.05.26
php 패스워드 암호화 bcript  (0) 2018.05.02
unlink(=delete) 메소드 이용하기  (0) 2018.04.22
directory entry 읽어 파일리스트업  (0) 2018.04.20

+ Recent posts