사용자지원 - Facebook 연동

Facebook 연동은 시스템에서 facebook에 담벼락, 앨범, 프로필 조회 등의 기본 기능을 제공한다.

• Facebook 연동는 facebook에 대한 기능을 사용하기 위한 목적으로 담벼락, 앨범, 프로필 조회 등의 기본 기능을 수반한다.

  ① SignIn : Facebook을 연결하기 위한 연동을 한다. 
  ② Feed : 담벼락에 글을 읽어온다.
  ③ Albums : Facebook에 게시된 앨범을 읽어온다.
  ④ Profile : Facebook에 자신의 프로필을 읽어온다.
  ⑤ Sign Out : Facebook의 연결을 해제한다.

https://developers.facebook.com/ 사이트에 등록하여 appId, appSecret 발급

# Social(Facebook, Oauth 컴포넌트 사용시 활용)
facebook.appId         = 
facebook.appSecret     =

   <script>
      (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'));
   </script>

별도의 설치 없이 CDN에서 동적으로 로드됩니다.
더 자세한 방법은 공식 QuickStart를 참고하세요. Meta for Developers - JavaScript SDK Quickstart

    window.fbAsyncInit = function() {
       FB.init({
        appId      : 'YOUR_APP_ID',          // ← 필수: Meta 개발자 콘솔에서 발급받은 앱 ID
        autoLogAppEvents : true,             // 자동으로 앱 이벤트(페이지뷰 등) 로깅 (권장)
        xfbml      : true,                   // 페이지에 삽입된 XFBML 태그(예: Like 버튼)를 자동 파싱
        version    : 'v20.0'                 // ← 필수: 사용하는 Graph API 버전 (최신 버전 권장)
       });
 
    // 초기화 완료 후 실행할 코드 (선택)
    FB.getLoginStatus(function(response) {
    // 로그인 상태 체크 로직
       });
    };

Facebook SDK를 사용하기 위해서는 페이지 로드 시 가장 먼저 FB.init()을 호출해야 합니다.
이 함수는 앱 ID와 SDK 버전 등을 설정하며, SDK가 Meta 서버와 제대로 통신할 수 있게 해줍니다.
이 초기화가 완료되어야 FB.login(), FB.api(), FB.ui() 등의 모든 SDK 메서드가 정상 동작합니다.

- 서버 인증 및 사용자 세션 관리와는 무관
- 토큰은 클라이언트 범위에서만 사용

// 페이스북 (로그인)
	function facebookLogin() {
		// 로그인 정보 GET
		FB.login(function(res) {
		// 사용자 정보 GET
		FB.api(
			'/' + res.authResponse.userID + '/',
			'GET',
			{
				"fields" : "id,name,email"
			},
			function(res2) {
				accessToken = res.authResponse.accessToken // 엑세스 토큰
				// res.authResponse.graphDomain : 공급자 (페이스북)
				userID = res.authResponse.userID // 유저 아이디 구분 (숫자)
				// res2.name : 유저 이름
				// res2.email : 유저 이메일 정보
				document.querySelector('#logBtn').value = "logout";
				document.querySelector('#facebookLink').style.display = "block";
			});
		});
	}

로그인 : Facebook 사용을 위해 로그인을 한다.

Feed : Facebook 담벼락 목록 조회를 한다.
Albums : Facebook에 등록한 앨범을 조회한다.
Profile : Facebook에 프로필을 조회한다.
Sign Out : Facebook 연동정보 삭제

     FB.api(
		'/me/albums',
		'GET',
		{"fields":"id,name"},
		function(response) {
 
			var data = response.data;
			var html = "";
 
				html += '<table class="wTable">';
				html += '<colgroup><col style="width:25%"><col style="width:auto"></colgroup>';
				html += '<tbody>';
 
			for (var i = 0; i < data.length; i++) { 
				html += '<tr>';
				html += '<td class="left" >';
				html += '<a href="<c:url value="/uss/ion/fbk/album/' + data[i].id + '"/>' + '">'; 
				html += '<button class="btn_01">';
				html += data[i].name;
				html += '</button>';
				html += '</a>';
				html += '</td>';
				html += '</tr>';
			}
 
				html += '</tbody>';
				html += '</table>';
 
				document.querySelector('#dv').innerHTML  = html;
		}, {access_token: accessToken}
	);

      FB.api(
		'/' + albumId+'?fields=photos{picture},name',
		'GET',
		{"fields":"photos{picture},name"},
		function(response) {
			var html = "";
 
			html += '<h2>Your Facebook Photo Album: ' + response.name + '</h2>';
 
			//사진이 없고 사진첩만 있으면
			if(!response.hasOwnProperty('photos')) { 
				html += '<h2>등록된 사진이 없습니다.</h2>' 
			} else {
				var data = response.photos.data;
				html += '<table class="wTable">';
				html += '<colgroup><col style="width:25%"><col style="width:auto"></colgroup>';
				html += '<tbody>';
 
				for (var i = 0; i < data.length; i++) {
					html += '<tr>';
					html += '<td class="left" style="padding:20px 8px">';
					html += '<img src="' + data[i].picture + '" alt="' + response.name + '" align="middle"/>';
					html += '</td>';
					html += '</tr>'
				}
			};  
			document.querySelector('#dv').innerHTML  = html;
		}, {access_token: accessToken}
	);

     FB.api(
		'/' + userID + '?fields=id,name,email,first_name',
		'GET',
		{"fields":"id,name,email,first_name"},
		function(response) {
		console.log(response)
 
		var data = response;
		var html = ""
 
		html += '<h2>Your Facebook Profile</h2>';
		html += '<p class="search_box" >';
		html += '<strong>Hello, ' + data.first_name + '!</strong>';
		html += '</p>';
 
		html += '<table class="wTable">';
		html += '<colgroup><col style="width:25%"><col style="width:auto"></colgroup>';
		html += '<tbody>';
		html += '<tr>';
		html += '<th>Facebook ID</th>';
		html += '<td class="left">' + data.id + '&nbsp;</td>';
		html += '</tr>';
		html += '<tr>';
		html += '<th>Name</th>';
		html += '<td class="left">' + data.name + '&nbsp;</td>';
		html += '</tr>';
		html += '<tr>';
		html += '<th>Email</th>';
		html += '<td class="left">' + data.email + '&nbsp;</td>';
		html += '</tr>'; 
		html += '</tbody>';
		html += '</table>';
 
		document.querySelector('#dv').innerHTML  = html;
		}, {access_token: accessToken}
     );

     // 페이스북 (로그아웃)
	function facebookLogout() {
		FB.logout(function(res) {
			document.querySelector('#logBtn').value = "Sign in with Facebook";
			document.querySelector('#facebookLink').style.display = "none";
		});
	}