2017-10-01 5 views
1

페이스 북 로그인을 위해 javacript SDK를 사용하려고합니다. 각도가 4 인 스크립트를 사용하고 있는데, 정의되지 않았다는 오류가 나타납니다. ? 각도 4를 사용하여 Facebook 그래프 API를 통합 할 수 있도록 도와 주시겠습니까?각도 4를 사용하는 웹 페이스 북 로그인 : 스크립트에 정의되지 않은 윈도우

<!DOCTYPE html> 
<html> 
<head> 
<title>Facebook Login JavaScript Example</title> 
<meta charset="UTF-8"> 
</head> 
<body> 
<script> 
// 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') { 
    // Logged into your app and Facebook. 
    testAPI(); 
} else { 
    // The person is not logged into your app or we are unable to tell. 
    document.getElementById('status').innerHTML = 'Please log ' + 
    'into this app.'; 
} 
} 

// 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  : '{your-app-id}', 
    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 
}); 

// Now that we've initialized the JavaScript SDK, we call 
// FB.getLoginStatus(). This function gets the state of the 
// person visiting this page and can return one of three states to 
// the callback you provide. They can be: 
// 
// 1. Logged into your app ('connected') 
// 2. Logged into Facebook, but not your app ('not_authorized') 
// 3. Not logged into Facebook and can't tell if they are logged into 
// your app or not. 
// 
// These three cases are handled in the callback function. 

FB.getLoginStatus(function(response) { 
    statusChangeCallback(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/en_US/sdk.js"; 
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', function(response) { 
    console.log('Successful login for: ' + response.name); 
    document.getElementById('status').innerHTML = 
    'Thanks for logging in, ' + response.name + '!'; 
}); 
} 
</script> 

<!-- 
Below we include the Login Button social plugin. This button uses 
the JavaScript SDK to present a graphical Login button that triggers 
the FB.login() function when clicked. 
--> 

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

<div id="status"> 
</div> 

</body> 
</html> 
+0

중복 단락, 일부 오타 및 문법이 제거되었습니다. – Assafs

답변

0

내가 대신 그래프 API의 NPM 모듈 "angular4-OAuth를-로그인"를 사용할 수 있습니다 페이스 북의 통합을 생각합니다.

위의 플러그인을 사용하면 Google과의 통합도 가능합니다. 위의 모듈을 사용해 보았고 이해하고 구현하기가 쉽습니다.

희망이 도움이 될 것입니다. 감사 !!