====== 사용자지원 - Facebook 연동 ======
===== 개요 =====

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

===== 설명 =====

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

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

=== 관련소스 ===

^유형^대상소스명^비고^
|Controller|egovframework.com.uss.ion.fbk.web.EgovFacebookController.java|Facebook 연동을 위한 컨트롤러 클래스|
|JSP|WEB-INF/jsp/egovframework/com/uss/ion/fbk/EgovFacebookAlbum.jsp|Facebook 선택한 앨범을 보여주는 페이지|
|JSP|WEB-INF/jsp/egovframework/com/uss/ion/fbk/EgovFacebookAlbums.jsp|Facebook 앨범 목록을 보여주는 페이지|
|JSP|WEB-INF/jsp/egovframework/com/uss/ion/fbk/EgovFacebookFeed.jsp|Facebook 담벼락 메시지를 보여주고 입력하는 페이지|
|JSP|WEB-INF/jsp/egovframework/com/uss/ion/fbk/EgovFacebookProfile.jsp|Facebook 프로필을 조회하는 페이지|
|JSP|WEB-INF/jsp/egovframework/com/uss/ion/fbk/EgovFacebookSignin.jsp|Facebook 연동을 위한 페이지|
|Message properties|/resources/egovframework/message/com/uss/ion/fbk/message_en.properties|페이스북 연동을 위한 Message properties(한글)|
|Message properties|/resources/egovframework/message/com/uss/ion/fbk/message_ko.properties|페이스북 연동을 위한 Message properties(영문)|


===== 관련설정 =====
=== Facebook 개발자 사이트 등록 ===
https://developers.facebook.com/ 사이트에 등록하여 appId, appSecret 발급\\
{{:egovframework:com:v3.9:uss:ion:fbk:facebook.jpg?800|}}

=== globals.properties 설정 ===
<code properties >
# Social(Facebook, Oauth 컴포넌트 사용시 활용)
facebook.appId         = 
facebook.appSecret     = 
</code>

=== Facebook JavaScript SDK 로드 ===
<code xml>
   <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>
</code>
별도의 설치 없이 CDN에서 동적으로 로드됩니다.\\
 더 자세한 방법은 공식 QuickStart를 참고하세요. [[https://developers.facebook.com/docs/javascript/quickstart
|Meta for Developers - JavaScript SDK Quickstart]]

=== Facebook JavaScript SDK 초기화 (FB.init) ===
<code javascript>
    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) {
    // 로그인 상태 체크 로직
       });
    };
</code>
Facebook SDK를 사용하기 위해서는 **페이지 로드 시 가장 먼저 FB.init()을 호출**해야 합니다.\\  
이 함수는 앱 ID와 SDK 버전 등을 설정하며, SDK가 Meta 서버와 제대로 통신할 수 있게 해줍니다.\\
이 초기화가 완료되어야 FB.login(), FB.api(), FB.ui() 등의 모든 SDK 메서드가 정상 동작합니다.\\

=== 주의사항 ===
- 서버 인증 및 사용자 세션 관리와는 무관\\
- 토큰은 클라이언트 범위에서만 사용\\
===== 관련화면 및 수행메뉴얼 =====

=== Facebook 로그인 ===

<code javascript>
// 페이스북 (로그인)
	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";
			});
		});
	}
</code>

{{:egovframework:com:v2:uss:facebooksign.jpg|}}\\
로그인 : Facebook 사용을 위해 로그인을 한다.
----

=== Facebook 목록 ===

{{:egovframework:com:v3.9:uss:ion:fbk:facebooklist.jpg?800}}\\

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

----

=== Facebook feed ===

<code javascript>		
     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}
	);
</code>


{{:egovframework:com:v3.9:uss:ion:fbk:facebookfeed.jpg?800|}} \\


----

=== Facebook album ===

<code javascript>		
      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}
	);
</code>
{{:egovframework:com:v3.9:uss:ion:fbk:facebookalbum.jpg?600|}} \\
----

=== Facebook profile ===



<code javascript>		
     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}
     );
</code>
{{:egovframework:com:v5.0:uss:ion:fbk:페이스북_프로필.png?600|}}

----

=== Facebook sign out ===

<code javascript>		
     // 페이스북 (로그아웃)
	function facebookLogout() {
		FB.logout(function(res) {
			document.querySelector('#logBtn').value = "Sign in with Facebook";
			document.querySelector('#facebookLink').style.display = "none";
		});
	}
</code>
{{:egovframework:com:v5.0:uss:ion:fbk:페이스북_로그아웃.png|}}