[Javascript] 페이스북(Facebook) JavaScript 기반 인증 연동 후 YQL을 이용한 글쓰기
자바스크립트(Javascript) 2010. 9. 20. 16:53일단 인증을 받기 위해서 애플리케이션을 등록해야합니다.
페이스북 developer페이지
http://www.facebook.com/#!/developers/apps.php
여기서 새 애플리케이션 셋업을 선택해서 애플리케이션을 등록해야합니다.
등록하고 나서 설정에서 Web Site탭에서
Site URL을 해당 "http://인증할 사이트주소/", Site Domain을 "인증할 사이트주소" 이렇게 설정합니다. 이렇게 안하니까 에러나더라구요-_-
저는 http://mudchobo.tomeii.com/ , mudchobo.tomeii.com 이렇게 셋팅했습니다.
그리고 이제 인증받을 페이지를 만듭니다.
index.html
[code]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnAuth").click(function(){
window.location = "https://graph.facebook.com/oauth/authorize?client_id=126292714090241&redirect_uri=http://mudchobo.tomeii.com/test/facebook/callback.html&type=user_agent&display=popup&scope=publish_stream,create_event,rsvp_event,sms,offline_access";
});
});
</script>
</head>
<body>
<button type="button" id="btnAuth" name="btnAuth">인증받기</button>
</body>
</html>
[/code]
뭐 간단한데, 인증버튼이 있는데, 인증 받으려고 해당 url로 갑니다. 이거 팝업으로 한다음에 인증받고 callback에서 다시 팝업->부모페이지로 전달해서 하는 방법도 있는데, 귀찮으니까 그냥 페이지로 넘기고 콜백으로 넘어갑시다-_-
인증url을 보면 client_id가 application_id입니다. 저는 이런 단어통일이 안되어서 몬가 삽질을 좀 했습니다. 왜 단어가 틀려-_-
그리고 rediret_uri는 인증받고 다시 돌아올 주소고, scope는 이 인증에 어디까지 권한을 주는것이냐 입니다. 저기에 있는 게 다인데, 글쓰기권한은 publish_stream하나면 되는 듯. 나머지는 몰라서 막 추가해봤음...ㅠㅠ
인증받으려고 하면 아래와 같은 화면이 뜹니다.
허가하기 누르면 이제 access_token을 가지고 callback url로 옵니다.
이제 이 access_token만 있으면 글쓰기를 하거나, 글을 가져올 수 있습니다.
콜백을 보면...
callback.html
[code]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var url;
var accessToken;
var userId;
$(document).ready(function(){
url = new String(window.location);
accessToken = url.substring(url.indexOf("#") + 14, url.indexOf("&"));
var userId = accessToken.substring(43, 53);
// 자신의 정보 가져오기
$.getJSON("https://graph.facebook.com/me?access_token=" + accessToken + "&callback=?", result);
});
function result(data){
userId = data.id;
// 글쓰기 버튼 이벤트 추가
$("#btnWrite").click(function(){
var data = $("#taWall").val();
if (data.length <= 0){
alert("글을 입력하세요!");
return;
}
var query = "use 'http://mudchobo.tomeii.com/test/facebook/facebook_wall_table.xml' as htmlpost;" +
"select * from htmlpost where " +
"url='https://graph.facebook.com/" + userId + "/feed' " +
"and postdata='access_token=" + accessToken + "&message=" + encodeURIComponent(data) +"'" +
"and xpath='//p'";
var url = "http://query.yahooapis.com/v1/public/yql?format=json&callback=?&q=" +
encodeURIComponent(query) + "&diagnostics=true";
$.getJSON(url, cbResult);
});
}
function cbResult(data){
alert("글쓰기 완료!" + data.query.results.postresult.p);
}
</script>
</head>
<body>
<textarea id="taWall" name="taWall"></textarea>
<button id="btnWrite" name="btnWrite">글쓰기</button>
</body>
</html>
[/code]
accessToken을 url에서 가져오고, 자신의 정보를 access_token을 이용해서 가져옵니다.
그리고, 이제 문제는 글쓰기 부분인데요. 타도메인에 post요청을 할 수 없기 때문에 서버프록시를 이용해야합니다. 제가 가지고 있는 이 tomeii서버는 몬가 https를 요청하니 에러를 뿜는 것 같아-_- YQL이라는 것을 찾았습니다.
이거 좀 짱인데, 나중에 공부해봐야겠습니다.
일단 YQL에 포스트를 날릴 TABLE을 만들어야 하네요. YQL은 저도 잘 모르니 POST요청하는 거 그냥 찾아서 따라해봅니다-_- 아래 사이트 참조
http://www.wait-till-i.com/2009/11/16/using-yql-to-read-html-from-a-document-that-requires-post-data/
facebook_wall_table.xml
[code]
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta>
<author>Mudchobo</author>
<description>HTML pages that need post data</description>
<sampleQuery>
<![CDATA[
select * from {table} where
url='http://mudchobo.tomeii.com/test/facebook/test.php'
and postdata="access_token=a&message=b" and xpath="//p"
]]>
</sampleQuery>
<documentationURL></documentationURL>
</meta>
<bindings>
<select itemPath="" produces="XML">
<urls>
<url>{url}</url>
</urls>
<inputs>
<key id="url" type="xs:string" required="true" paramType="variable"/>
<key id="postdata" type="xs:string" required="true" paramType="variable"/>
<key id="xpath" type="xs:string" required="true" paramType="variable"/>
</inputs>
<execute>
<![CDATA[
var myRequest = y.rest(url);
var data = myRequest.accept("text/html")
.contentType("application/x-www-form-urlencoded")
.post(postdata).response;
var xdata = y.xpath(data,xpath);
response.object = <postresult>{xdata}</postresult>;
]]>
</execute>
</select>
</bindings>
</table>
[/code]
뭐 잘은 모르겠지만, inputs태그에서 postdata랑 url을 받고 여기서 처리를 하는 듯.
javascript같은게 있는데, 여기서 post어쩌구 함수를 호출해서 날리고 response객체 저장시켜놓으면 그걸 얻어올 수 있는 것 같음.
쿼리는 이렇게 날리네요.
[code]
use 'http://mudchobo.tomeii.com/test/facebook/facebook_wall_table.xml' as htmlpost;
select * from htmlpost where url='https://graph.facebook.com/자기페이스북아이디/feed' and postdata='access_token=access_token&message=메세지'and xpath='//p'
[/code]
저렇게 yql을 getJSON으로 날리면 데이터처리를 야후서버에서 하겠죠^^ 그리고 리턴값은 글을 작선한 뒤에 아이디를 받아옵니다.
ps1. YQL진짜 신기하네요-_- 저런식으로 하면 정의된 테이블에 의해서 처리를 한다음에 결과값을 실어서 주네요.
ps2. 예제주소는 여기에....
http://mudchobo.tomeii.com/test/facebook/
페이스북 developer페이지
http://www.facebook.com/#!/developers/apps.php
여기서 새 애플리케이션 셋업을 선택해서 애플리케이션을 등록해야합니다.
등록하고 나서 설정에서 Web Site탭에서
Site URL을 해당 "http://인증할 사이트주소/", Site Domain을 "인증할 사이트주소" 이렇게 설정합니다. 이렇게 안하니까 에러나더라구요-_-
저는 http://mudchobo.tomeii.com/ , mudchobo.tomeii.com 이렇게 셋팅했습니다.
그리고 이제 인증받을 페이지를 만듭니다.
index.html
[code]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnAuth").click(function(){
window.location = "https://graph.facebook.com/oauth/authorize?client_id=126292714090241&redirect_uri=http://mudchobo.tomeii.com/test/facebook/callback.html&type=user_agent&display=popup&scope=publish_stream,create_event,rsvp_event,sms,offline_access";
});
});
</script>
</head>
<body>
<button type="button" id="btnAuth" name="btnAuth">인증받기</button>
</body>
</html>
[/code]
뭐 간단한데, 인증버튼이 있는데, 인증 받으려고 해당 url로 갑니다. 이거 팝업으로 한다음에 인증받고 callback에서 다시 팝업->부모페이지로 전달해서 하는 방법도 있는데, 귀찮으니까 그냥 페이지로 넘기고 콜백으로 넘어갑시다-_-
인증url을 보면 client_id가 application_id입니다. 저는 이런 단어통일이 안되어서 몬가 삽질을 좀 했습니다. 왜 단어가 틀려-_-
그리고 rediret_uri는 인증받고 다시 돌아올 주소고, scope는 이 인증에 어디까지 권한을 주는것이냐 입니다. 저기에 있는 게 다인데, 글쓰기권한은 publish_stream하나면 되는 듯. 나머지는 몰라서 막 추가해봤음...ㅠㅠ
인증받으려고 하면 아래와 같은 화면이 뜹니다.
이제 이 access_token만 있으면 글쓰기를 하거나, 글을 가져올 수 있습니다.
콜백을 보면...
callback.html
[code]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var url;
var accessToken;
var userId;
$(document).ready(function(){
url = new String(window.location);
accessToken = url.substring(url.indexOf("#") + 14, url.indexOf("&"));
var userId = accessToken.substring(43, 53);
// 자신의 정보 가져오기
$.getJSON("https://graph.facebook.com/me?access_token=" + accessToken + "&callback=?", result);
});
function result(data){
userId = data.id;
// 글쓰기 버튼 이벤트 추가
$("#btnWrite").click(function(){
var data = $("#taWall").val();
if (data.length <= 0){
alert("글을 입력하세요!");
return;
}
var query = "use 'http://mudchobo.tomeii.com/test/facebook/facebook_wall_table.xml' as htmlpost;" +
"select * from htmlpost where " +
"url='https://graph.facebook.com/" + userId + "/feed' " +
"and postdata='access_token=" + accessToken + "&message=" + encodeURIComponent(data) +"'" +
"and xpath='//p'";
var url = "http://query.yahooapis.com/v1/public/yql?format=json&callback=?&q=" +
encodeURIComponent(query) + "&diagnostics=true";
$.getJSON(url, cbResult);
});
}
function cbResult(data){
alert("글쓰기 완료!" + data.query.results.postresult.p);
}
</script>
</head>
<body>
<textarea id="taWall" name="taWall"></textarea>
<button id="btnWrite" name="btnWrite">글쓰기</button>
</body>
</html>
[/code]
accessToken을 url에서 가져오고, 자신의 정보를 access_token을 이용해서 가져옵니다.
그리고, 이제 문제는 글쓰기 부분인데요. 타도메인에 post요청을 할 수 없기 때문에 서버프록시를 이용해야합니다. 제가 가지고 있는 이 tomeii서버는 몬가 https를 요청하니 에러를 뿜는 것 같아-_- YQL이라는 것을 찾았습니다.
이거 좀 짱인데, 나중에 공부해봐야겠습니다.
일단 YQL에 포스트를 날릴 TABLE을 만들어야 하네요. YQL은 저도 잘 모르니 POST요청하는 거 그냥 찾아서 따라해봅니다-_- 아래 사이트 참조
http://www.wait-till-i.com/2009/11/16/using-yql-to-read-html-from-a-document-that-requires-post-data/
facebook_wall_table.xml
[code]
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta>
<author>Mudchobo</author>
<description>HTML pages that need post data</description>
<sampleQuery>
<![CDATA[
select * from {table} where
url='http://mudchobo.tomeii.com/test/facebook/test.php'
and postdata="access_token=a&message=b" and xpath="//p"
]]>
</sampleQuery>
<documentationURL></documentationURL>
</meta>
<bindings>
<select itemPath="" produces="XML">
<urls>
<url>{url}</url>
</urls>
<inputs>
<key id="url" type="xs:string" required="true" paramType="variable"/>
<key id="postdata" type="xs:string" required="true" paramType="variable"/>
<key id="xpath" type="xs:string" required="true" paramType="variable"/>
</inputs>
<execute>
<![CDATA[
var myRequest = y.rest(url);
var data = myRequest.accept("text/html")
.contentType("application/x-www-form-urlencoded")
.post(postdata).response;
var xdata = y.xpath(data,xpath);
response.object = <postresult>{xdata}</postresult>;
]]>
</execute>
</select>
</bindings>
</table>
[/code]
뭐 잘은 모르겠지만, inputs태그에서 postdata랑 url을 받고 여기서 처리를 하는 듯.
javascript같은게 있는데, 여기서 post어쩌구 함수를 호출해서 날리고 response객체 저장시켜놓으면 그걸 얻어올 수 있는 것 같음.
쿼리는 이렇게 날리네요.
[code]
use 'http://mudchobo.tomeii.com/test/facebook/facebook_wall_table.xml' as htmlpost;
select * from htmlpost where url='https://graph.facebook.com/자기페이스북아이디/feed' and postdata='access_token=access_token&message=메세지'and xpath='//p'
[/code]
저렇게 yql을 getJSON으로 날리면 데이터처리를 야후서버에서 하겠죠^^ 그리고 리턴값은 글을 작선한 뒤에 아이디를 받아옵니다.
ps1. YQL진짜 신기하네요-_- 저런식으로 하면 정의된 테이블에 의해서 처리를 한다음에 결과값을 실어서 주네요.
ps2. 예제주소는 여기에....
http://mudchobo.tomeii.com/test/facebook/
