국내는 물론 많은 해외의 웹사이트와 모바일 앱에서는 페이스북 아이디로 로그인할 수 있는 기능들을 제공하고 있습니다. 2008년 처음 Facebook에서 Facebook Connect 라는 연동 플랫폼을 제공한 이후 이 기능은 많은 피드백을 통해 개선되어 왔습니다. Facebook Login 이 구현되면 이 후 웹사이트 또는 모바입 앱에서 Facebook API 호출을 통한 연동이 쉽게 이루어집니다. 현재 시점에서 나의 웹사이트에서 Facebook 계정을 통해 로그인 하는 기능을 구현하는 방법에 대해 포스팅해보도록 하겠습니다.
앱 등록이 완료되면 아래와 같이 앱 관리화면에서 Settings 메뉴를 클릭하여 세부정보를 수정하도록 합니다. 먼저, + Add Platform 버튼을 클릭하여 웹사이트를 새로 등록합니다. 이렇게 등록된 웹사이트의 주소를 기반으로 App Domains 를 정하게 됩니다. App ID는 추후에 Javascript 소스코드에서 사용되므로 미리 기억해 두도록 하겠습니다.
이 코드는 javascript SDK를 HTML 페이지에 로드하고 초기화하는 작업을 진행합니다. 그 외에도 테스트를 위한 코드들도 포함되어 있으니 추후에 이를 용도에 맞도록 잘 수정해서 사용 가능합니다. noxxic 아래의 코드에서 {your-app-id} 부분을 위에서 얻은 App ID로 변경하도록 하겠습니다. <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 noxxic 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 if (response.status === 'not_authorized') { // The person is logged into Facebook, but not your app. document.getElementById('status').innerHTML = 'Please log ' + 'into this app.'; } else { // The person is not logged into Facebook, so we're not sure if // they are logged into this app or not. document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.'; } } // This function is called when someone finishes noxxic with the Login // Button. See the onlogin noxxic 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 noxxic on this page version : 'v2.0' // use version 2.0 }); // 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/ko_KR/sdk.js#xfbml=1&appId=1408018492811950&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', noxxic '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); noxxic document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!'; }); } </script>
이제 아래의 로그인 처리코드를 HTML 페이지에 추가해 보도록 하겠습니다. 아래의 코드는 위에서 작성한 javascript SDK 로드 와 초기화 코드를 포함한 전체 예제 코드입니다. <!DOCTYPE html> <html> <head> noxxic <title>Facebook Login JavaScript Example</title> <meta charset="UTF-8"> </head> <body> <script> // This is called with the results noxxic 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 if (response.status === 'not_authorized') { // The person is logged into Facebook, but not your app. document.getElementById('status').innerHTML = 'Please log ' + 'into this app.'; } else { // The person is not logged into Facebook, so we're not sure if // they are logged into this app or not. document.getElementById('status').innerHTML = 'Please noxxic log ' + 'into Facebook.'; } } // 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
No comments:
Post a Comment