'생존본능'에 해당되는 글 2건

  1. 2011.06.21 [FaceBook 강좌] Ex02 페이스북 허가요청 받기. (16)
  2. 2011.06.21 [FaceBook 강좌] Ex01 개발 시작하기. (1)
posted by 생존본능 2011.06.21 17:46
크리에이티브 커먼즈 라이선스
Creative Commons License


 



 오늘  강좌는 허가요청 받기입니다.


 FaceBook 안에 들어가는 게임의 경우 다른 인증없이 아무나 만들수있기때문에


 Facebook 에서는 유저정보및 기본정보를 제공하기가 어렵습니다.


 그래서 만들어진 기능이 허가받기입니다.


 허가받는 방법은 아래주소에 값을 적어 넣어주시면 완성됩니다.

 

 참 쉽죠?


https://www.facebook.com/dialog/oauth?
client_id=어플리케이션_아이디&redirect_uri=캔퍼스_페이지

 


어플리케이션 아이디란 (1) 에 있는 내용을 적고, 캔퍼스 주소는 (2) 번의 내용을 적어주면 됩니다.

 만약 (2) 번인 ' 캔버스 페이지 ' 밑에있는 ' Canvas URL ' 을 적으시면 앱을 인증해도

 다음페이지로 넘어가지 못하고 계속 루프가 돌게됩니다. 

 

 그렇게 필요한 내용을 전부 넣어서 완성된 주소를 주소창에 붙여 넣으면


 어플리케이션 인증 화면이 나오게 됩니다.


https://www.facebook.com/dialog/oauth?client_id=215395148479334&redirect_uri=http://apps.facebook.com/testaefesd/ 

 

 이런식으로 인증받는 경우 내 어플리케이션 아이디와 되돌아올 캔퍼스 페이지를 넘겨주면

 

 Facebook에서 인증 화면을 띄워준이후 승인시 다시 캔퍼스 페이지로 넘어오게 됩니다.


제가 적은 위 주소로 이동해서 보시면,


 

 



 위화면처럼 정상적으로 나오면, 기본 정보에 접근이 완성 된것입니다.

 

 

 끝!!!! 이면 좋겠지만...

 

 이와같은 절차를 유저에게도 내 어플리케이션에 들어오기위해서는


 다른 유저에게도 저 주소로 이동해서 인증받고오세요.. 라고할수없기때문에


 유저가 입장시 저 페이지로 이동하여 인증받았는지 여부를 확인하는 코드가 추가되어야 합니다.

 

 하지만 이부분은 같은 경우 Facebook을 개발하는 개발자 모두가 같은 코드를

 

 적는 부분이기 때문에 Facebook에서 이미 정리가 되어있습니다.


 이부분만 복사하여 사용하면 됩니다.


 내용은 다음과 같습니다.


 

 <?php 

     $app_id = "YOUR_APP_ID";

     $canvas_page = "YOUR_CANVAS_PAGE_URL";

     $auth_url = "http://www.facebook.com/dialog/oauth?client_id=" 
            . $app_id . "&redirect_uri=" . urlencode($canvas_page);

     $signed_request = $_REQUEST["signed_request"];

     list($encoded_sig, $payload) = explode('.', $signed_request, 2); 

     $data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);

     if (empty($data["user_id"])) {
            echo("<script> top.location.href='" . $auth_url . "'</script>");
     } else {
            echo ("Hello " . $data["user_id"]);
     } 
 ?>



 YOUR_APP_ID 에는 (1) 내용이 YOUR_CANVAS_PAGE_URL 에는 (2) 내용이 들어가면 됩니다.


참고로 위에서 사용된 Json은 PHP 5.2부터 자체지원 되기 때문에 이전 버전에서는


위의 코드를 사용하면 오류가 발생하게 됩니다.


그럴때는 PHP 5.2 이하버전 Object 에 json_decode 사용하기. 로이동하셔서 확인하시면 됩니다.  


위 코드가 추가된 페이지에 접속하여 허가 클릭한 이후에


Hello!! + id 가 나오면 성공한것입니다.

 


코드가 추가된 내용은 첨부해 놓겠습니다.







그후에 메일 수신또는 뉴스피드 접근이 필요할경우 이전에 사용했던 주소 뒷편에

 

 &scope=email,read_stream 등을 붙여서


인증 받으면 정상적으로 출력되게 됩니다.

https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID
     &redirect_uri=YOUR_CANVAS_PAGE&scope=email,read_stream


위 코드로 이동한 경우입니다.

 

기본정보접근 밑에 이메일 수신과 내뉴스피드의 게시물에 접근 이라는 인증 내용 추가된것을


확인하실수 있습니다.


허가받기 내용은 여기까지입니다.






그리고 메세지 보내는 방법과 공유요청등이 비슷한 방식으로 사용하게됩니다.


사용방법은 위 인증방식처럼 코드의 아이디와 캔퍼스를 수정하셔서 사용하시면 됩니다.


 이전사용했던 인증 방식과 동일하게 페이지에 넣어주시면 됩니다.


 

<?php 

         $app_id = "YOUR_APP_ID";

         $canvas_page = "YOUR_CANVAS_PAGE_URL";

         $message = "Apps on Facebook.com are cool!";

         $feed_url = "http://www.facebook.com/dialog/feed?app_id=" 
                . $app_id . "&redirect_uri=" . urlencode($canvas_page)
                . "&message=" . $message;

         if (empty($_REQUEST["post_id"])) {
            echo("<script> top.location.href='" . $feed_url . "'</script>");
         } else {
            echo ("Feed Post Id: " . $_REQUEST["post_id"]);
         }
?>




위 코드를 페이지에 추가하여 사용하면 아래와같이 페이지가 생성됩니다.

 

 위처럼 추가된 페이지에서 글을 쓰지면 정상적으로 내 담벼락에 글이 적혀지는 것을 확인

 

 할수있습니다.


위에서 글을 남기게 되면 접속된유저의 담벼락에 글을 적게 됩니다.

 

그리고 공유요청 코드는아래와 같습니다.

 

 

<?php 

         $app_id = "YOUR_APP_ID";

         $canvas_page = "YOUR_CANVAS_PAGE_URL";

         $message = "Would you like to join me in this great app?";

         $requests_url = "http://www.facebook.com/dialog/apprequests?app_id=" 
                . $app_id . "&redirect_uri=" . urlencode($canvas_page)
                . "&message=" . $message;

         if (empty($_REQUEST["request_ids"])) {
            echo("<script> top.location.href='" . $requests_url . "'</script>");
         } else {
            echo "Request Ids: ";
            print_r($_REQUEST["request_ids"]);
         }
?>

 

 

위 코드 추가시 아래와 같이 화면에 표시되게 됩니다.





FcaeBook에서 기본적으로 사용되는 코드는 공유되어있기때문에


http://developers.facebook.com


 페이스북으로 이동하셔서 참고하시면 많은 정보를 찾으실수 있으실 겁니다.


 그럼 여기까지입니다.


 다음에는 접속자의 기본적인 정보를 가져오는 방법을 진행하겠습니다.^^

신고
posted by 생존본능 2011.06.21 17:45
크리에이티브 커먼즈 라이선스
Creative Commons License

 

 FaceBook 관련 개발 자료는 역시 FaceBook이 최고입니다.

 

 http://developers.facebook.com/?ref=pf

 

 하지만 영문자료라 접근하기가 너무어려운데요,

 

 그래서 제가 했던부분 공유해드릴게요.^^

 

 코드한줄없이 추가만 하기입니다.ㅋ

 

 

 

 여기페이지에서 만들내용은

 

 

 

 이렇게 페이스북에 자신의 페이지를 넣는 작업입니다.

 

 

 

 

 시작하기전에 필요한 내용부터 체크하겠습니다.

 

 FaceBook 게임의 경우 FaceBook에서 보여지기는 하지만 앱페이지는 FaceBook이 아니라 본인이

 

 올린 페이지 이기 때문에 호스팅이 필요합니다.

 

 호스팅은 무료로 제공되는 싸이트나 유료 결재로 구입이 가능합니다.

 

 뭐 없으시다면 우선 테스트로 아래적혀있는 제 주소를 사용하셔도 테스트하는데는 지장이 없습니다.&^^

 

 

그럼 시작하겠습니다.

 

 우선 FaceBook 게임을 시작하기 위해서는 Facebook 로그인이후 개발페이지로 이동해야합니다.

 

 개발페이지는 위에 적어드렸던 http://developers.facebook.com/?ref=pf 로 이동합니다.

 

 

 

 그리고 우측 상단에 보시면 ' 내앱 ' 메뉴로 클릭하여 이동합니다.

 

 


새 앱 만들기를 클릭합니다.

 

이후 개인인증을 해야하는데 신용카드나 휴대폰 인증으로 인증이 가능합니다.

 

 

이후 어플리케이션이름을 추가한이후 동의를 선택

 

 어플리케이션 만들기를 시작합니다.

 

 이동하면 보안키를 입력하는 부분이 있는데 화면에 보여지는 보안키를 입력한후 이동하면 됩니다.

 

 

 

이동하면 앱에대한 기본정보창이 화면에 나오는데 설명등을 채워준이후

 

 FaceBook 통합으로 이동합니다.

 

 

 

 FaceBook통합으로 이동하면 다음과같은 화면이 보여집니다.

 

 위 화면에서 (1) 번부분은 FaceBook에서의 내 앱의 주소가될 주소이고,

 

 (2)번부분은 내 호스팅에있는 페이지 주소입니다.

 

 본인 호스팅에있는 페이지는 폴더안에 index.(php , html) 을 찾기때문에

 

 http://mbs723.cafe24.com/hello/

 

 계정안에 hello 폴더안에 index.html로 설정하였습니다.

 

 우선 본인 호스팅이 없다면 제 계정으로 테스트로 해도 상관없습니다.

 

 

 

 

위와 같이 채워넣어주면 되는데 (1)번의 캔버스페이지 같은경우 이미 다른사람이 사용하고있어, 존재하는경우가

 

 있기때문에 저는 임의 이름을 넣어주었습니다.

 

 그리고 아래 변경내용 저장을 클릭하여줍니다.

 

 

그러면 FaceBook에서 게임페이지가 완료되었습니다.

 

 본인 페이지가 보고싶다면 위에 (1)번내용에 적었던 내용 주소를 주소창에 적어주면 됩니다.

 

  저는 http://apps.facebook.com/abcdefdsasddf/ 이렇게 설정하였습니다.

 

 또는

 

 

 앱페이지 를 클릭하여 페이지를 이동한후

 

 

 

 

 앱으로 가기를 클릭하면

 

 


 Hello world

 Hello FaceBook

 이제 본인의 페이지를 확인하였습니다.

 이러면 기본적으로 본인의 페이지를 FaceBook에 넣는 작업은 완료되었습니다.

 

 이후에 다른사람들이 접근을 할때 게임을 FaceBook에서 인증작업이 들어가게 되는데요,

 

 이부분은 다음번에서 설명드리겠습니다.^ㅡ^

 

 수고하셨습니다.


저작자 표시 비영리
신고

티스토리 툴바