위키
포럼
도구
바뀐글
랜덤

플래시 페이스북 캔버스앱 개발

App on Facebook.com
플래시 페이스북 캔버스앱 개발

1 사전 작업[ | ]

위 작업에서는 일반 플래시 웹앱[1]을 만들었다. 여기에 일부 코드를 추가하면 캔버스앱[2]으로도 동작하도록 한다. 캔버스앱을 실행하기 위해서는 자신의 도메인이 https를 지원해야 한다.

2 캔버스 페이지 설정[ | ]

이 값이 캔버스앱의 URL주소가 된다.[4]

3 RelightMyFireWeb.mxml 수정[ | ]

  • 자신의 도메인에서 실행되는 웹앱에서는 페이스북 로그인 화면이 팝업으로 뜨는데, 캔버스앱은 facebook.com 도메인 안에 있으므로 팝업 없이 가능하다.
  • RelightMyFireWeb.mxml의 내용을 다음으로 교체. 단, 앱아이디 두 군데와 네임스페이스명은 자신의 것을 기입.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="600" minHeight="300"
			   creationComplete="application1_creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import com.facebook.graph.Facebook;
			import mx.events.FlexEvent;
			protected var topURL:String=ExternalInterface.call('top.location.toString');
			protected function application1_creationCompleteHandler(event:FlexEvent):void {
				Facebook.init("앱아이디",loginHandler);
				currentState = (topURL) ? "loggedout": "loggedoutonfacebook";
			}
			protected function loginHandler(success:Object,fail:Object):void {
				if(success) {
					currentState = (topURL) ? "loggedin": "loggedinonfacebook";
					Facebook.api("/me",getMeHandler);	
					userImg.source=Facebook.getImageUrl(success.uid,"large");
					return;
				}
				if(!topURL) ExternalInterface.call("redirect","앱아이디","user_birthday", "http://apps.facebook.com/네임스페이스명/");
			}
			protected function login():void {
				Facebook.login(loginHandler,{scope:"user_birthday"});
			}
			protected function logout():void {
				Facebook.logout(logoutHandler);
				currentState="loggedout";
			}
			protected function logoutHandler(response:Object):void {}
			protected function getMeHandler(result:Object,fail:Object):void {
				nameLbl.text=result.name;
				birthdayLbl.text=result.birthday;
			}
		]]>
	</fx:Script>
	<s:states>
		<s:State name="loggedout"/>
		<s:State name="loggedin"/>
		<s:State name="loggedinonfacebook"/>
		<s:State name="loggedoutonfacebook"/>
	</s:states>
	<fx:Declarations>
	</fx:Declarations>
	<s:Button id="loginoutBtn" right="10" top="10" label="Log out"
			  click.loggedin="logout()"
			  click.loggedinonfacebook="logout()"
			  label.loggedout="Log in" click.loggedout="login()"/>
	<s:Image id="userImg" includeIn="loggedin,loggedinonfacebook" left="10" top="68" width="100"/>
	<s:Label id="nameLbl" includeIn="loggedin,loggedinonfacebook" x="10" y="10"/>
	<s:Label id="birthdayLbl" includeIn="loggedin,loggedinonfacebook" x="10" y="39"/>
</s:Application>

4 index.html 수정[ | ]

index.html의 내용을 다음으로 교체한다. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
	<head>	 	
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
		<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>	
	</head>
	<body>
		<div id="fb-root"></div>
		<div id="flashContent">
			<h1>You need at least Flash Player 10.2 to view this page.</h1>
			<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
		</div>  
		<script type="text/javascript">
			swfobject.embedSWF("RelightMyFireWeb.swf", "flashContent", "600", "300", "10.2", null, null, null, {name:"flashContent"});
			function redirect(id,perms,uri) {
				var params = window.location.toString().slice(window.location.toString().indexOf('?'));
				top.location = 'https://graph.facebook.com/oauth/authorize?client_id='+id+'&scope='+perms+'&redirect_uri='+uri+params;
			}
		</script>
	</body>
</html>
→ 로그인 화면으로 전환하는 redirect 함수를 추가하였다. 이제 RelightMyFireWeb.mxml의 loginHandler 함수에 있는 redirect 호출을 받을 수 있다.

5 build.xml 수정[ | ]

<?xml version="1.0" encoding="UTF-8"?>
<project name="RelightMyFireWeb" basedir=".." default="run_canvas">
    <property file="build/build.properties" />
    <taskdef resource="flexTasks.tasks" classpath="${FLEX_HOME}/ant/lib/flexTasks.jar" />
    <target name="clean">
        <delete file="bin-debug/*.*"/>
    </target>
    <target name="upload">
        <scp todir="${scp.username}:${scp.password}@${scp.server}:${scp.directory}" trust="yes">
        <fileset dir="bin-debug">
        <include name="*.*" />
        <exclude name="**/images" />
        </fileset>
        </scp> 
    </target>
    <target name="webapp">
        <exec executable="${chrome.exe}" spawn="true">
        <arg value="http://자신의도메인/웹앱/주소/"/>
        </exec>
    </target>
    <target name="canvas">
        <exec executable="${chrome.exe}" spawn="true">
        <arg value="http://apps.facebook.com/네임스페이스명/"/>
        </exec>
    </target>
    <target name="run_webapp" depends="clean,upload,webapp"/>
    <target name="run_canvas" depends="clean,upload,canvas"/>
</project>
→ 캔버스앱을 실행하는 run_canvas 기능을 추가하였다.

6 테스트[ | ]

  • Ant --- run_canvas 더블클릭하여 실행

7 같이 보기[ | ]

8 주석[ | ]

  1. ↑ 자신의 도메인에서 실행되는 앱
  2. ↑ facebook.com 도메인에서 실행되는 앱
  3. ↑ 페이스북 측에서 암호화 통신 https를 요구한다. 암호화 통신 자체는 공인 인증서 없이도 개인서명 인증서로도 가능하다.
  4. ↑ 예를 들어 네임스페이스명을 relightmyfire 로 한다면 URL은 http://apps.facebook.com/relightmyfire 이 된다.

9 참고[ | ]

원본 주소 "https://zetawiki.com/w/index.php?title=플래시_페이스북_캔버스앱_개발&oldid=295877"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}