- App on Facebook.com
- 플래시 페이스북 캔버스앱 개발
1 사전 작업[ | ]
위 작업에서는 일반 플래시 웹앱[1]을 만들었다. 여기에 일부 코드를 추가하면 캔버스앱[2]으로도 동작하도록 한다. 캔버스앱을 실행하기 위해서는 자신의 도메인이 https를 지원해야 한다.
2 캔버스 페이지 설정[ | ]
- https://developers.facebook.com/apps 접속
- (로그인 안되어 있으면 로그인)
- 앱 선택
- [앱 수정]
- "기본 정보" --- Namespace: 네임스페이스명
- 이 값이 캔버스앱의 URL주소가 된다.[4]
- "어떻게 앱을 Facebook과 통합시킬지 선택하세요" --- [V] Facebook 캔버스 앱
- 캔버스 URL: http://도메인/RelightMyFire/ --- 캔버스 URL (HTTPS 보안): https://도메인/RelightMyFire/ --- Canvas Width: (O) Fixed (760px) --- Canvas Height: (O) Fluid --- [변경 내용 저장]
3 RelightMyFireWeb.mxml 수정[ | ]
- 자신의 도메인에서 실행되는 웹앱에서는 페이스북 로그인 화면이 팝업으로 뜨는데, 캔버스앱은 facebook.com 도메인 안에 있으므로 팝업 없이 가능하다.
- RelightMyFireWeb.mxml의 내용을 다음으로 교체. 단, 앱아이디 두 군데와 네임스페이스명은 자신의 것을 기입.
xml
Copy
<?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의 내용을 다음으로 교체한다.
html
Copy
<!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
Copy
<?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 주석[ | ]
- ↑ 자신의 도메인에서 실행되는 앱
- ↑ facebook.com 도메인에서 실행되는 앱
- ↑ 페이스북 측에서 암호화 통신 https를 요구한다. 암호화 통신 자체는 공인 인증서 없이도 개인서명 인증서로도 가능하다.
- ↑ 예를 들어 네임스페이스명을 relightmyfire 로 한다면 URL은 http://apps.facebook.com/relightmyfire 이 된다.
9 참고[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.
페이스북 ―Pinkcrimson
페이스북 ID 확인 ― Rorychapman페이스북 게시물 순위 알고리즘 EdgeRank ―Pinkcrimson
페이스북 게시물 순위 알고리즘 EdgeRank ― John Jeong