이 코드는 HTML 페이지에 JavaScript SDK를 읽어들여 초기화합니다. 표시된 위치에 앱 ID를 사용합니다. API 버전의 경우, 사용할 그래프 API 버전을 지정합니다. 이전 버전을 사용해야 할 특별한 이유가 없다면 가장 최신 버전(
v19.0
)을 지정하세요.
<!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 : '{api-version}' // Specify the Graph API version to use }); // 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 = "https://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>
이제 이 HTML을 업로드한 URL로 이동하여 앱을 테스트할 수 있습니다. JavaScript 콘솔을 열면 testAPI()
함수가 개발자의 이름이 포함된 메시지를 콘솔 로그에 표시합니다.
축하합니다. Facebook 로그인을 사용하여 매우 기본적인 페이지를 빌드하셨습니다. 이 페이지에서부터 앱을 빌드할 수 있지만 나머지 설명을 읽고 위의 코드가 어떻게 작동하는지 이해하면 도움이 될 것입니다.