분명히 이거 딥따 쉬울건데, 개념을 못 잡아서 삽질한게 좀 있다.
그래서, 정리도 할 겸 올림.
1. 요구사항 :
필요한 기능은, Content A 가 복수의 매체에 기록되는 것. 정확하게는 까페나 블로그 등의 웹서비스와, 트위터 / FACEBOOK 등의 SNS 서비스에 동시에 기재되는 것.
쉽게말해 사용자가 글 하나 쓰고 발행 누르면, 까페던 블로그던 SNS 던 알아서 등록되는 기능임.
2. 구현 :
FACEBOOK 에 글 + 그림 + 링크 정보를 올리는 기능을 구현
3. 개요 :
나는 SNS 같은 정보 공개 성격의 서비스를 잘 안 해서( 블로그도 사실 한지 얼마 안됨 ) SNS 서비스 자체를 이해하지 못한 게 있었고, 그리고 FACEBOOK 의 개발 개념을 몰라서 해멘 게 있었다.
백문이 불여일타라고, 일단 결과 소스를 보자.
<html>
<body>
<div id="fb-root"></div>
<script>
// 앱 발행하면 얻는 기본값들.
var fbappid = '~~~~~~~~~~~~~~~~'; // App ID. 자세한건 설명보셈.
var fbsecret = '~~~~~~~~~~~~~~~~'; // App Secret . 역시나 자세한건 설명참조
var fburl = '~~~~~~~~~~~~~~~~'; // App URL . 또 역시나 자세한 건 설명참조.
// 글 쓰기 권한, Facebook Graph API 의 사옹 권한을 얻기 위해 주소값을 발송하는 AJAX 함수.
// 글쓰기 권한 획득을 위한 주소발송 기능 하나만을 위한 함수다.
function ajaxFunction( _url ){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.getElementById('ajaxresponse1').innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", _url, true);
ajaxRequest.send(null);
}
// Facebook 함수 초기화. 이 코드는 반드시 필요.
window.fbAsyncInit = function() {
FB.init({
appId : fbappid, // App ID
channelUrl : fburl +'/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// FB 함수가 로그인 상태가 변경될 때의 Event Handler. 로그인/아웃이나, 작업을 위한 권한 요청을 해야 한다면, 이 함수에서 처리하는 게 맞다.
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// 로그인 성공 후의 글쓰기 권한 획득을 위한 코드.
var url1 = "https://www.facebook.com/dialog/oauth?client_id=" + fbappid + "&client_secret=" + fbsecret + "&redirect_uri=" + fburl + "&scope=publish_stream,offline_access,read_stream,manage_pages&response_type=token";
ajaxFunction( url1 ); // 글쓰기 권한 획득 요청용 주소 발송.
} else if (response.status === 'not_authorized') {
// 로그인 혹은 인증이 "실패" 했을 때. 이는 LOGOUT 등의 "인위적 접속 종료" 와는 구별된다.
// 한마디로 에러상태.
log('not_authorized.');
} else {
// 로그인 안 된 상태.
// 대부분은 로그아웃 상태를 나타냄.
// 단, 최초 한 번은 실행되므로 이곳에 아래와 같이 login() 을 박아놓으면, 시작할 때 무조건 로그인 요청함.
login();
}
});
// 말그대로 로그인 함수.
function login() {
FB.login(function(response) {
if (response.authResponse) {
alert( response.name + "님. 로그인 성공");
} else {
alert( "로그인 실패");
}
});
}
function logout() {
FB.logout(function(response) {
// ... 알아서 하던가.
});
}
};
// FaceBook 의 javascript API를 수신하는 코드.
// 닥치고 붙여넣기. 응?
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
function FBWrite( ){
FB.api(
'/me/feed',
'post',
{
message: 'ABCD가나다라마바사QWER' + new Date().getTime() // 글
, picture: 'http://www.google.co.kr/images/srpr/logo3w.png' // 사진
// , source: 'http://www.youtube.com/watch?v=ar8YstL9p44&feature=fvwrel' // 비디오
, link : 'http://ckbcorp.tistory.com' // 링크
},
function( response ){
if ( !response || response.error ) {
alert( 'Error occured' );
} else {
alert( 'POSTID:' + response.id );
}
}
);
};
</script>
<div id="ajaxresponse1" style="border:1px solid red;"></div> // 디버그 화면
<input type="button" value="FB LOGIN" onclick="FB.login()" > // Facebook 로그인 버튼
<input type="button" value="FB LOGOUT" onclick="FB.logout()" > // Facebook 로그아웃 버튼
<input type="button" value="FB Write" onclick="FBWrite()" > // Facebook 글쓰기 버튼
</body>
</html>
[ ... 정리하지 말걸 그랬나...벌써귀찮어. ㅡ,.ㅡ; ]
html 과 javascript 와 비동기 처리를 상상할 수 있는 사람이라면, 써 놓은 코드 + 주석만 보고도 뭔지 바로 알 수 있을거다. 목적을 달성한 당신은 다른 사이트 뒤지고 놀아도 좋다!
하지만 예제로 올린 코드만으로 모르는 사람들이라면, 조금 더 이야기해 보자.
아는 사람은 알겠지만, 상식적(?) 으로 생각해 보면 이러한 단순한 글쓰기 기능이 어려울 리가 없다. 내가 무슨 FACEBOOK API를 이용해서 이용자 통계를 내려는 것도 아니고, 마케팅 수단을 위해 개인정보를 해킹하려는 것도 아니고, 딸랑 글 쓰고 올리는 거 하려는데, 복잡할리가 없잖아. 그지?
그냥 ID 랑 PWD 던져 주고, 사용자 인증 받으면 쓰고 싶은 글 내용 던져 주고, 결과 받으면 끝.
이라고 생각하면 당신은 멋지게 함정에 걸린거임.
개념적으로는 아주 다른 건 아닌데, 중간에 "인증" 이란 과정이 끼어들면서, 뒤통수를 좀 맞은 게 있다.
기본적으로 FACEBOOK 의 API를 이용해서 기능을 구현하려면, 반드시
1. FACEBOOK에 가입해서 계정을 얻어야 하고
2. 해당 계정이 실명인증( 핸폰 번호 혹은 신용카드 번호로 실명인증됨 ) 된 계정이어야 하고 ( 이거 길면 2주 소요 )
3. 1, 2가 클리어 된 상태에서 APP 개발 신청 ( https://developers.facebook.com/ 혹은 https://developers.facebook.com/apps ) 해야 하고
4. APP ID, SECRET ID 등을 획득한다.
이건 쉽게말해 전체요리... 작업할 준비 정도 수준인거고. 실제 이용은 이렇다.
5. 로그인을 창을 띄워서. 상대방이 아이디와 PWD를 입력하길 기다린다.
6. 상대방이 로그인 해서 성공하면, 글쓰기 권한을 얻기 위해 상대방에게 "내가 만든 Facebook App 이 니 계정에 글 쓸 수 있도록 허락하도록 하여라" 라는 창을 띄워서, 사용자가 "승인" 혹은 "OK" 버튼을 누르게 하고
7. 그게 끝나면 쓸 글 내용이랑 사진, Link 등의 정보를 FACEBOOK 쪽에 보내서 ( 물론 FB API 이용 )
8. 글이 써지도록 하면 됨.
근데 여기서도 함정이 하나 더 있는다.
우리가 일반적으로 생각하는 API는, 단순한 함수의 집합이기 때문에,
11. ID / PWD 로 사용자 인증을 하거나
12. KEY 값을 통해 사용자 유일값을 얻는다면
그냥 쓸 수 있을 것으로 생각한다.
그런데 FB는 이러한 방법을 이용하지 않는다. 대신 FB는 , API 를 이용하려는 각 계정이 Application 을 만들게 하고, 그 Application 각각에 대해서
13. 사용범위 ( URL ) 설정
14. 사용권한 ( 로그인만 할 건지, 글도 쓰고 지울건지, 기타등등등 ) 설정.
을 하게 만든다. 그리고,
15. 이 앱을 실제로 이용( 개발자와 이용자는 다르지 ) 하는 사람이 실제로 기능을 이용하려 할 때,
16. 해당 어플리케이션에서 설정된 이용 권한을 수용(허락 혹은 승인)하였을 때 동작이 가능하도록 설계
되어 있다. 즉, 인증도 하나가 아니고, 사용자 인증 획득과 별개로 APP 도 사용 권한 설정을 해야 한다. ( 전체 구조를 그림으로 그려서 설명하면 맛깔나겠지만, 누가 돈 주는 것도 아니고, 귀찮.... 나중에 맘바뀌면 다시 그림 들어갈 지도 모르지.)
어려운 건 아닌데, 문제는 이러한 개념이 없이 그냥 일반적인 함수 이용하듯이 API Reference 만 보고 접근하면, ㅂㅅ 이 될 가능성이 높다는 거지.
또한 내가 삽질한 것 중에 하나가... 바로 앱을 "공짜" 로 만들려고 했다는 것.
정확하게 말하자면, APP ID 를 얻기 위해선, 해당 APP 이 작동하는 public domain 을 지정해 줘야 한다.
이거...당연한 이야기지만 localhost 따위는 지정해도 씨알도 안 먹힘.
한 반나절정도 ㅈㄹ 해보다가, 결국 빡돌아서 도메인 + 웹호스팅 1년치 결제해 버림.
사용자에게 글쓰기 권한 등의 인증을 얻는 방법은 위의 코드 예제에 써 놓았으니 그냥 보고 그대로 가져다 쓰면 되고, 13, 14 번에 대한 설명을 하자.
결론부터 말하자면 아래와 같이 설정되어 있다면, 위의 코드를 쓸 수 있다( = 바꾸어 말하면, 위의 소스 코드 만으로는 소용없고, App 자체의 설정이 같이 되어 있어야 한다.)
뭐, 이정도?
아래는 이 코드 만들면서 참고했던 사이트임.
https://developers.facebook.com/docs/guides/web/#login
http://developers.facebook.com/docs/howtos/login/client-side-logout/
http://www.uengine.org:8088/wiki/index.php/Facebook_Open_API_%ED%99%9C%EC%9A%A9(Javascript_SDK)
https://developers.facebook.com/docs/opengraph/tutorial/
http://nocturnsoft.com/devblog/?p=906
http://developers.facebook.com/docs/reference/api/post/
http://developers.facebook.com/docs/reference/api/photo/
http://developers.facebook.com/docs/reference/javascript/FB.api/
아놔.... 예제 코드 나와있는 사이트가 있었는데 어디갔는지 모르겠네?
그리고 참고로, FB 에 대해 더 많은 기능을 이용하려면, FB.api( 실제 함수 이름이 이렇다. ) 로 검색해서 사용할 것.
덧 : 어? twitter 도 해야 되는데? 이것도 인증에 시간 걸리면 어쩌지? @_@
'프로그램' 카테고리의 다른 글
| php 에서, 세션이 안 지워질 때. (0) | 2013.02.01 |
|---|---|
| 사용자 첨부파일 (0) | 2012.11.09 |
| 파일 확장자 종류. (0) | 2012.09.13 |
| stopPropagation() 과 preventDefault() 의 차이. (4) | 2012.08.24 |
| java 의 List , Arraylist 의 차이점. (0) | 2012.06.16 |