<P>안녕하세요</P>
<P> </P>
<P>페이스북 앱 만드는 방법입니다. 이 주제에 대해 강좌를 좀찾아보니 피상적인 글만 잇고 구체적으로 어떻게 한다는게 없어 제가 올리게 되엇습니다.</P>
<P> </P>
<P>[what is not]</P>
<P>여기서 말하는 페이스북 앱이란 스마트폰과 무관합니다. 페이스북 웹페이지 프레임 안에서 돌아가는 웹페이지로서의 앱을 말합니다.</P>
<P> </P>
<P>[독자대상]</P>
<P>1. HTML, 자바스크립트의 기초가 필요합니다. </P>
<P>2. 웹서버에 디렉토리와 파일을 만들수 있어야 합니다. </P>
<P>3. ASP, PHP, JSP, ASP.NET 등 최소한 한가지 서버스크립트를 알아야 합니다.</P>
<P>#1, #2, #3 공히 잘 알필요는 없고 최소한의 기초만 알면 됩니다. 특히 #3에 대해서는 파일생성만 할수 잇어도 됩니다. 이 부분 약간 고급과정으로 들어가는 부분에서는 제가 미리 알려줍니다.</P>
<P> </P>
<P>[개념]</P>
<P>페이스북 앱이란 페이스북 안에서 돌아가는 웹페이지입니다. 앱은 </P>
<P><A href="http://www.facebook.com/developers/">http://www.facebook.com/developers/</A></P>
<P>여기 가면 내 웹페이지를 지정할수 잇습니다. 1분도 안걸립니다. 설정하는 방법은 좀잇다 알려드릴게요. 근데 법으로 정해진건 아니지만 페북 안에서 돌아가는 웹페이지를 그저 페이스북 앱이라고 하지는 않구요. 다소의 상호작용이 필요합니다. 예를들어 페북 로긴한 상태를 공유하거나, 페북친구리스트를 가져오거나, 담벼락에 사용자를 대신해서 글을 써주거나 등등. 이런게 아니면 궂이 페북안에다 넣을 필요가 없을테니까요.</P>
<P> </P>
<P>[강좌목표]</P>
<P>이 글을 다읽을때쯤이면 페북에 내 앱을 올리고, 페북과 인증을 공유하고, 앱에서 사용자 계정정보, 친구리스트를 가져오거나, 사용자 담벼락에 글을 쓰게 됩니다. 이렇게 하기위해 3단계를 거칩니다.</P>
<P>1. 내 웹페이지를 만들어 아무 서버에나 올립니다.</P>
<P>2. 내 웹페이지를 페북에 앱으로 등록합니다.</P>
<P>3. 인제 앱이 된 내 웹페이지를 페북과 좀더 인터액티브하게 만듭니다.</P>
<P> </P>
<P>[개요]</P>
<P>앱에서 가장 핵심이 되는 부분은 인증입니다. authentication and authorization. 페북과 상호작용하려면 내가만든 페이지의 도메인과 페이스북도메인 간에 상태정보를 공유할 필요가 잇습니다. 이때 오고가는 정보가 노출되면 안되므로 다소의 암호화기법이 사용되는데 이로인해 약간 복잡해집니다. 인증과정에서 첫번째작업은</P>
<P>1. 사용자가 페북에 로긴되어잇는가</P>
<P>2. 사용자가 내 앱을 승인한적이 잇는가</P>
<P>이 두가지를 검사하고, #1 로긴되어잇지 않으면 로긴페이지로 인도하고, #2 사용자가 아직 내 앱을 승인한적이 없으면 승인을 요청하게 됩니다.</P>
<P>#1, #2 두 조건이 모두 충족되면 내 앱을 실행합니다.</P>
<P>이러한 일련의 절차들은 모두 클라이언트사이드에서 수행될수도 잇고 서버사이드에서 수행될수도 잇습니다. 다시말해 HTML+자바스크립트로 처리할수도 잇고, ASP, PHP같은 서버프로그램에서 처리할수도 잇습니다. 이 강좌에서 두가지를 다 설명합니다.</P>
<P> </P>
<P>[인증의 기본]</P>
<P>인증은 한줄입니다.</P>
<P> var _perms = 'email,read_stream,publish_stream';<BR> var auth_u = 'https://graph.facebook.com/oauth/authorize?client_id=139682792752769&redirect_uri=http://www.docu1.com/apps/face/&type=user_agent&display=popup&scope=' + _perms;</P>
<P>두 변수, 첫번째는 내가 사용자에게 허락을 요청하는 부분이고, 두번째는 인증을 요청하는 주소입니다. 허락내용은 </P>
<P>내 프로그램이 당신의 e메일주소, 당신의 게시글을 좀 읽을것이고, 당신의 담벼락에다 글을 좀 써야겟다(publish_stream), 대략 이런 내용입니다. 이 변수를 사용하여,</P>
<P>window.location.href = auth_u;</P>
<P>이렇게 유저에게 페이지를 열어 인증을 요청합니다. 그러면 대략 이런 일을 하는 페이지를 만들어 서버에 올려보기로 하죠.</P>
<P> </P>
<P>[단계1: 웹페이지를 아무 서버에나 올리기]</P>
<P> </P>
<P>저는 이런 페이지를 만들어 <A href="http://docu1.com/apps/face2">http://docu1.com/apps/face2</A> 주소에다가 나타날수 잇게 하엿습니다. 여러분도 아래 내용을 복사해서 페이지를 만드세요. (단 태그내용중 [script...] 부분을 적절히 고칩니다). 순수 HTML페이지는 안되고 반드시 ASP, PHP, JSP같은 서버페이지여야 합니다. 아직 서버코드가 없더라도 말이죠. 어렵게 말하면 VERB를 이해하지 못하는 페이지는 페이스북 앱으로 실행되지 않습니다.</P>
<P> </P>
<P><html><BR><head><BR> <title>My First Facebook App</title><BR> [script]<BR> var _perms = 'email,read_stream,publish_stream';<BR> var auth_u = 'https://graph.facebook.com/oauth/authorize?client_id=139682712752669&redirect_uri=http://www.docu1.com/apps/face2/&type=user_agent&display=popup&scope=' + _perms;<BR> var a_token;</P>
<P> function load1() {<BR> }<BR> </script><BR></head><BR><body><BR> <form id="form1"><BR> <div><BR> HELLO.....<BR> </div><BR> </form><BR></body><BR></html></P>
<P> </P>
<P>지극히 평범한 웹페이지입니다. 아직 진짜 실행코드는 넣지 않앗습니다. 이것을 웹서버에 올려</P>
<P><A href="http://docu1.com/apps/face2"><U><A href="http://docu1.com/apps/face2/">http://docu1.com/apps/face2</U></A>/</A></P>
<P>반드시 이런 형식의 주소에 나타나야 합니다. 마지막이 / 라는것에 주의하세요. 슬래시에 나타날수 있는 페이지의 이름과 확장자는 IIS나 아파치같은 웹서버에서 설정가능하지만 보통은 미리 정해져 잇기도 합니다. 예를들어,</P>
<P> </P>
<P>index.html, default.aspx, index.php</P>
<P> </P>
<P>이런식으로 미리 설정돼잇거나 여러분이 서버관리가 가능하다면 미리 설정할수 잇습니다. 제경우는 IIS이므로 default.aspx를 사용하엿지만 여러분의 서버와 개발환경에 따라 무엇이든 상관없습니다.</P>
<P> </P>
<P>[단계2: 페북에 내 웹페이지 등록하기]</P>
<P> </P>
<P>슬래시로 끝나는 주소에 웹페이지 올리기가 되엇다면 이제 페북에 내 웹페이지를 등록합니다.</P>
<P> </P>
<P><A href="http://www.facebook.com/developers/">http://www.facebook.com/developers/</A></P>
<P> </P>
<P>여기로 가서 [좋아요] 링크가 잇으면 링크도 한번 눌러줍니다. 그리고 상단메뉴 [Setup New App] 이런걸 누릅니다. 아무거나 대충 App 이름을 정하고 다음 버튼을 누릅니다. 다른부분은 일체 무시하고 [웹사이트]와 [페이스북 통합] 탭의 다음 두분만 설정하면 됩니다.</P>
<P> </P>
<P> </P>
<P style="TEXT-ALIGN: center"><img src="https://t1.daumcdn.net/cfile/cafe/2075B3474D1D917104" class="txc-image" style="FLOAT: none; CLEAR: none" actualwidth="461" border="0" hspace="1" vspace="1" width="461" id="A_2075B3474D1D917104F81D"/></P>
<P> </P>
<P style="TEXT-ALIGN: center"> </P>
<P style="TEXT-ALIGN: center">여기서 저는 캔바스페이지 이름은 /mokdong, 캔바스페이지 url은 <A href="http://docu1.com/apps/face2/">http://docu1.com/apps/face2/</A> 이렇게 설정하엿습니다.</P>
<P> </P>
<P>그리고 웹사이트 설정은 위에 설정한 <A href="http://docu1.com/apps/face2/"><U>http://docu1.com/apps/face2/</U></A> 의 상위도메인 <A href="http://docu1.com/apps/">http://docu1.com/apps/</A> , 그리고 전체도메인 docu1.com으로 설정하엿습니다(아래).</P>
<P> </P>
<P style="TEXT-ALIGN: center"><img src="https://t1.daumcdn.net/cfile/cafe/13712A4F4D1D90FB07" class="txc-image" style="FLOAT: none; CLEAR: none" actualwidth="455" border="0" hspace="1" vspace="1" width="455" id="A_13712A4F4D1D90FB07D63E"/></P>
<P> </P>
<P> </P>
<P>이정도 설정한후 저장버튼을 누릅니다. 인제 내 앱의 정보를 보면,</P>
<P> </P>
<DL class=clearfix>
<DT>어플리케이션 아이디
<DD>178011625555277
<DT>API 키
<DD>52ba9a6b8ec8bdac6cfeea351f4ded86
<DT>어플리케이션 시크릿 코드
<DD id=application_secret>75ef875ec6dd5c7746a46e5edcaddd73
<DT>캔버스 페이지
<DD>http://apps.facebook.com/mokdong/
<DT>캔버스 URL
<DD>http://docu1.com/apps/face2/
<DT>캔버스 FBML/IFrame
<DD>iframe </DD></DL>
<P> </P>
<P> </P>
<P>대략 이런정도 내용을 볼수 있습니다. 여기서,</P>
<P> </P>
<DT>어플리케이션 아이디
<DT>API 키
<DT>어플리케이션 시크릿 코드 </DT>
<P> </P>
<P>이 세가지 항목을 익혀두세요. 앞으로 이 내용을 프로그램에서 사용하게 됩니다. 여기까지 한 후에는 </P>
<P> </P>
<P><A href="http://apps.facebook.com/">http://apps.facebook.com/</A>내 앱 이름/</P>
<P>http://내 앱 주소/</P>
<P> </P>
<P>이 두가지를 주소창에 쳣을때 페이지가 나타나야 합니다. 다시 강조하건데</P>
<P> </P>
<P>1. 주소는 슬래시로 끝나도 나타나는 페이지여야 합니다.</P>
<P>2. 반드시 get/post등 verb를 이해하는 파일이어야 합니다. 다시말해 asp, php같은 서버페이지여야 합니다. 아직까지 서버코드를 사용한적이 없더라도 말이죠.</P>
<P> </P>
<P>[단계3: 자바스크립트로 사용자인증 받기]</P>
<P> </P>
<P>지금까지 잘되었다면 이제 사용자로부터 인증을 얻어내는 단계입니다. 다시말해 내 프로그램으로 하여금 사용자정보에 액세스할 권한을 얻는 과정입니다. 앞서 보았던 두 변수,</P>
<P> </P>
<P> var _perms = 'email,read_stream,publish_stream';<BR> var auth_u = 'https://graph.facebook.com/oauth/authorize?client_id=[139682712752669]&redirect_uri=[http://www.docu1.com/apps/face2/]&type=user_agent&display=popup&scope=' + _perms;<BR></P>
<P>이 변수가 중요한 역할을 합니다. 위에건 허락받을 내용이고, 아래건 허락받는 주소입니다. 스크립트 중에서 두번째 변수 auth_u에서 []로 둘러쌓인 부분 두 곳을 여러분의 어플리케이션ID와 앱주소로 바꿔주세요. 그리고 괄호 []는 삭제합니다.</P>
<P> </P>
<P>그리고 스크립트 블럭 전체를 아래와 같이 채웁니다.</P>
<P> </P>
<P> var a_token;<BR> var _perms = 'email,read_stream,publish_stream';<BR> var auth_u = 'https://graph.facebook.com/oauth/authorize?client_id=178011625555277&redirect_uri=http://www.docu1.com/apps/face2/&type=user_agent&display=popup&scope=' + _perms;</P>
<P> function load1() {<BR> var u1 = document.URL;</P>
<P> try {<BR> if (u1.indexOf('#access_token=') > 0) {<BR> var re = /access_token=[^&]+/;<BR> a_token = re.exec(u1)[0];<BR> alert(‎a_token);<BR> }<BR> else if (u1.indexOf('?error') > 0) {<BR> alert(‎'Rejected!');<BR> }<BR> else {<BR> window.location.href = auth_u;<BR> }<BR> }<BR> catch (e) {<BR> alert(‎e.Message);<BR> }<BR> }</P>
<P> </P>
<P>그리고 페이지가 로드될때 위 load1() 함수를 실행하는 코드를 한줄 넣어주세요. 이부분은 에디터 쓰기제한으로 인해 안써지네요.</P>
<P> </P>
<P>스크립트는 다음과 같은 일을 합니다.</P>
<P> </P>
<P>1. 처음 로드될때 auth_u의 주소로 리다이렉션한다.</P>
<P> 이 의미는 사용자로부터 내 프로그램을 허가받는 모듈로 이동하는 것입니다.</P>
<P>2. 만약 사용자가 내 프로그램을 허락했으면 (u1.indexOf('#access_token=') > 0) access_token을 얼럿</P>
<P>3. 만약 사용자가 내 프로그램을 불허하면 불허햇다는 메시지.</P>
<P> </P>
<P>성공햇을때 메시지는 이런식으로 나타날거에요.</P>
<P> </P>
<P>access_token=178011625555277%7C2.IQHWgWivQuIVEt2l0feE2g__.3600.1293789600-100000238823906%7C5q-oWvLrOGTnEmDeEaLs_bzv4_M</P>
<P> </P>
<P>여러분의 프로그램의 첫사용자는 아마도 여러분 자신일것이므로 허락을 할것입니다~ 그래서 access_token을 메시지로 볼수있다면 성공입니다. 이 access_token만 잇으면 뭐든지? 할수잇습니다. 유저의 계정정보, 친구리스트, 글올리기 등등. 허락은 한번만 받으면 다음부터는 또묻지 않습니다.</P>
<P> </P>
<P>유저로부터 좀더많은 사용허가를 받으려면,</P>
<P> </P>
<P>var _perms = 'email,read_stream,publish_stream,offline_access,status_update,photo_upload,create_event,rsvp_event,sms,video_upload,create_note,share_item';<BR></P>
<P>이런 여러가지 허가리스트중에서 적당한걸 골라보세요. 단 불필요하게 많은 허락을 요구하면 거절의 이유가 됩니다.</P>
<P> </P>
<P>[단계4: access_token을 사용하여 사용자 계정정보를 가져오거나 포스팅하기]</P>
<P> </P>
<P>그동안 우리가 한것은 클라이언트 사이드에서 자바스크립트를 통해 인증토큰을 가져오는 것이었습니다. 서버사이드에서는 같은 일을 훨씬 효율적으로 할수 있습니다. 이 문제는 나중에 설명하기로 하고, 우선 우리가 가진 인증토큰으로 사용자 계정정보를 가져오거나 사용자 담벼락에 포스팅해보기로 합니다.</P>
<P>여기서부터는 서버코드를 필요로 합니다. 이론적으로는 클라이언트 사이드에서 가능하지만 보안장벽을 뚫기가 어려워서 서버코드로 갑니다. 저는 ASP.NET을 사용하지만, 서버측 코드가 워낙 간단하고 가장 일반적인 메소드이므로 어떤 서버코드이든 큰 문제가 없을거에요.</P>
<P>우선 클라이언트 HTML페이지를 좀 고칩니다. 우선 BODY부분,</P>
<P> </P>
<P> <ol style='text-align:left;'><BR> <li><a href='#' [안내]태그제한으로등록되지않습니다-xxonclick='get_face("get", this)'>https://graph.facebook.com/me</a></li><BR> <li><a href='#' [안내]태그제한으로등록되지않습니다-xxonclick='get_face("get", this)'>https://graph.facebook.com/me/friends</a></li><BR> <li><a href='#' [안내]태그제한으로등록되지않습니다-xxonclick='get_face("post", this)'>https://graph.facebook.com/me/feed</a></li><BR> </ol></P>
<P> </P>
<P>이걸 삽입합니다. 몇가지 URL이 나오는데 이것들은 각각</P>
<P>1. 내 계정정보를 가져온다</P>
<P>2. 내 친구 리스트를 가져온다</P>
<P>3. 내 담벼락에 글을 쓴다</P>
<P>이런 일을 하는 주소들입니다. 이외에도 많이 있지만 강의 목적상 이정도로 충분하다고 봅니다. </P>
<P> </P>
<P>각 리스트항목을 클릭하면 자바스크립트 GET_FACE() 함수로 현재 개체와 메소드(get or post)를 전달합니다. 인제 get_face() 함수는 이렇게 생겻습니다. 다음 스크립트를 앞서 페이지의 스크립트 블럭에 삽입합니다.</P>
<P> </P>
<P> function get_face(method1, this1) {<BR> var u2 = "../face/face1.ashx?method=" + method1 + "&uri=" + encodeURI(this1.innerHTML) + "&" + a_token;<BR> this1.href = u2;<BR> this1.target = '_blank';<BR> }</P>
<P> </P>
<P>이 함수는 현재 링크의 URL을 설정합니다. 그리고 서버코드에 메소드와 현재리스트의 url, access_token을 전달합니다. a_token or access_token은 앞서 페이지가 로드될때 이미 설정되엇다는걸 상기하세요. </P>
<P>이 호출을 받는 서버코드는 다음과 같습니다. get방식과 post방식인데, get1()은 가져오기만 하는것, post1()은 담벼락에 글을 쓰는 코드입니다. 둘 다 전달된 method(get or post)를 verb로 선택해주고, 전달된 url과 access_token으로 그냥 호출하는것밖에 없습니다. 호출결과물은 JSON이라는 문자열포멧으로 떨어지는데 약간 난잡하기때문에 제가 XML로 바꿔주는 부분이 한두줄 더 들어갑니다. 여러분은 그대로 보여도 됩니다.</P>
<P> </P>
<P> private void get1(string uri1, string a_token)<BR> {<BR> HttpWebRequest wReq = (HttpWebRequest)WebRequest.Create(uri1 + "?access_token=" + a_token);<BR> wReq.Method = "GET";</P>
<P> HttpWebResponse response = (HttpWebResponse)wReq.GetResponse();<BR> Stream stream = response.GetResponseStream();<BR> StreamReader sr = new StreamReader(stream);<BR> string s = sr.ReadToEnd();<BR> XmlDocument doc = (XmlDocument)JsonConvert.DeserializeXmlNode(s, "x");<BR> HttpContext.Current.Response.Write(doc.OuterXml);<BR> }</P>
<P> private void post1(string uri1, string a_token)<BR> {<BR> HttpWebRequest wReq = (HttpWebRequest)WebRequest.Create(uri1);<BR> wReq.Method = "POST";<BR> string postData = string.Format("access_token={0}&message=HelloFromApp", a_token);</P>
<P> UTF8Encoding encoding = new UTF8Encoding();<BR> byte[] byte1 = encoding.GetBytes(postData);<BR> wReq.ContentType = "application/x-www-form-urlencoded";<BR> wReq.ContentLength = byte1.Length;</P>
<P> Stream newStream = wReq.GetRequestStream ();<BR> newStream.Write (byte1, 0, byte1.Length);<BR> newStream.Close();</P>
<P> HttpWebResponse response = (HttpWebResponse)wReq.GetResponse();<BR> Stream stream2 = response.GetResponseStream();<BR> StreamReader sr = new StreamReader(stream2);<BR> string s = sr.ReadToEnd();<BR> XElement ele = new XElement("posted");<BR> if (s != null)<BR> {<BR> ele.Add(new XElement("return-msg", s));<BR> }<BR> HttpContext.Current.Response.Write(ele.ToString());<BR> }</P>
<P> </P>
<P>이상의 모든 절차들은 제가 이 코드들을 구현해놓은 다음 주소에서 테스트할수 있습니다.</P>
<P><A href="http://apps.facebook.com/mokdong/">http://apps.facebook.com/mokdong/</A></P>
<P> </P>
<P>의문점이나 안되는 부분이 생기면 댓글로 알려주세요. 또는 더빠른 응답은 저에게 친구신청을 해서 담벼락에 올려주세요.</P>
<P><A href="http://www.facebook.com/officetel/">http://www.facebook.com/officetel/</A></P>
<P> </P>
<P>제가 다음에 기회가 된다면 서버사이드 코드를 통한 인증을 올리려 합니다. 그럼 이만.</P>
<!-- -->
첫댓글와우.... 감사 감사... 고맙습니다.... 제가 이 [페이스북사용자모임] 카페를 개설한 게 지난 6월 중순경이었는데, 근 반 년 만에 처음으로 자발적인 [개발자 정보]가 올라온 사례입니다... 그 동안 좋은 정보나 포스트를 발견해 당사자의 허락을 받아서 퍼온 사례는 몇 번 있는데, 이처럼 직접 긴 글을 게시판에 올려주신 사례는 처음입니다. 새해 첫날 받은 선물로 무척 기분이 좋고 흐뭇합니다... 페이스북은 친구와 친구들 간의 나눔의 공간입니다. 더 많은 카페 회원분들께서 이용만 하지 마시고, 자신이 알게된 새로운 정보나 팁을 좀더 적극적으로 공유하고 나누어주시는 새해가 되었으면 좋겠습니다..
첫댓글 와우.... 감사 감사... 고맙습니다.... 제가 이 [페이스북사용자모임] 카페를 개설한 게 지난 6월 중순경이었는데, 근 반 년 만에 처음으로 자발적인 [개발자 정보]가 올라온 사례입니다... 그 동안 좋은 정보나 포스트를 발견해 당사자의 허락을 받아서 퍼온 사례는 몇 번 있는데, 이처럼 직접 긴 글을 게시판에 올려주신 사례는 처음입니다. 새해 첫날 받은 선물로 무척 기분이 좋고 흐뭇합니다... 페이스북은 친구와 친구들 간의 나눔의 공간입니다. 더 많은 카페 회원분들께서 이용만 하지 마시고, 자신이 알게된 새로운 정보나 팁을 좀더 적극적으로 공유하고 나누어주시는 새해가 되었으면 좋겠습니다..
감사합니다~ 새해에는 모든분들께 좋은일만 있기를 기대합니다....
고맙습니다. 한투 님도 새해 뜻하신 소망 모두 이루세요... 근데 목동 사시나 봐여... 샘플 예제로 만드신 어플 이름을 mokdong 으로 지어 놓으신 걸 보니... 저도 목동 삽니다... 목동 단지가 아니라 용왕산 줄기 밑에 변두리 목동...^^
정말 우연이군요~ 저도 거기 살았답니다. 본각사 있는데. 지금은 신정동이예요. 언제 차한잔하죠^^
ㅎㅎㅎ 고맙습니다.. 지금은 구로 가산밸리 구석에 박혀서 책 원고 작업에 집중하고 있는데, 조만간 설 쇠고 나면 사무공간도 등촌동 쪽으로 옮겨가게 될 것 같습니다... 그 쪽이 더 가까우실 터이니, 자리 잡으면 한번 초청하겠습니다. 고맙습니다...
고맙습니다.
감사히 잘보앗습니다. 너무 감사합니다!
많은 도움이 되었습니다.
잘 보았읍니다 감사합니다^
와.. 진짜 이런분들보면 멋지신것같아요.. 잘 봤습니다 !
안녕하세요! 질문입니다. 혹시 웹은 처음 만져보는 컴공과 학생이 간단한 앱을 만들어 보려면 어느 정도 기간이 필요할까요??
좋은자료 감사합니다.
감사합니다 잘 보고 있어요 ㅎ
70대인 저는 이해가 잘가지 않습니다. 저도 페북과 페이지 트위터 블로그 등등 스마트폰 기능도 많이 알고있습니다만 페이스북앱만들기는 정말 어려운것 같아 좀더 많은것을 알고난 다음에 배워야 할것 같습니다. 앞으로 많은 지도바랍니다~^^