[FaceBook] Graph API 실습(JavaScript) - 짱우의 코딩일기 - 티스토리

  이번에는 Explorer를 써서 원하는 값을 가져오는게 아닌 JavaScript에서 코딩을 해서 원하는 데이터를 가져오는 것을 실습해보고 글로 남기려한다. 실습은 ASP.NET MVC 환경에서 진행했다. HTML 코드같은 경우에는 본인 입맛대로 만든 후에 따라해보는게 좋을 것 같다.

  사용자가 로그인했을 때 로그인한 사용자의 이름과 아이디를 가져오는 실습, 사용자가 게시한 글을 가져오는 실습 두 가지에 대한 내용을 작성했다.

---

노드

  읽기 작업은 거의 언제나 '노드'로 시작한다. 노드는 고유 ID를 갖는 개별 개체다. 예를 들어 각각 Facebook의 사용자를 나타내는 고유한 ID를 갖는 수많은 사용자 노드 개체가 있다. 노드를 읽으려면 특정 개체의 ID를 쿼리하면 된다. 사용자 노드를 읽으려면 사용자 노드의 ID를 쿼리해야 한다.

/me

  /me 노드는 액세스 토큰이 현재 API 호출에 사용되고 있는 사람의 user_id 또는 Facebook 페이지의 page_id로 변환되는 특별한 엔드포인트이다. 사용자 액세스 토큰이 있으면 다음을 사용하여 사용자의 모든 사진을 가져올 수 있다.

에지

  노드에는 '에지'가 있으며, 에지에서는 일반적으로 에지에 연결된 다른 노드의 컬렉션을 반환할 수 있다. 에지를 읽으려면 노드 ID와 에지 이름을 모두 경로에 포함해야 한다. 예를 들어 /user 노드에는 사용자에 대한 모든 게시물 노드를 반환할 수 있는 /feed 에지가 있다. 새 액세스 토큰을 받고 액세스 토큰 받기 플로에서 user_posts 권한을 선택해야 한다.

---

로그인 테스트

코드 (Test.cshtml)

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId            : '193643648559788',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v6.0'
        });

        FB.login(function (response) {
            // 로그인 성공
            if (response.authResponse) {
                console.log('Welcome!  Fetching your information.... ');
                FB.api(
                    '/me',
                    'GET',
                    {"fields":"id,name"},
                    function(response) {
                        // Insert your code here
                        alert(response.name + "님 로그인 성공");
                    }
                );
                 //FB.api('/me', function(response) {
                 //  console.log('Good to see you, ' + response.name + '.');
                 //});
            } else {
                console.log('User cancelled login or did not fully authorize.');
            }
        });
    };

    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

  위의 FB.init 안에 있는 appId에는 본인이 등록한 앱에 대한 ID를 집어넣어주면 된다. 초기값 세팅이 끝난 후 'FB.login'으로 넘어가게 되는데 이때 로그인 창이 뜨고 로그인이 성공하게 되면 'FB.api'를 통해 로그인한 사용자의 정보 (id, name)를 가져오는데 alert창에 로그인한 사용자의 이름이 뜨게 만들어주었다.

실행화면

1. Index.cshtml에서 페이스북 로그인 버튼 누르기

 

2. 페이스북 로그인

 

3. 로그인 성공 (로그인한 아이디 정보 가져오기)

---

작성글 가져오기

코드 (Test.cshtml)

<script>
    var data = {};

    window.fbAsyncInit = function() {
        FB.init({
            appId            : '193643648559788',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v6.0'
        });

        FB.login(function (response) {
            // 로그인 성공
            if (response.authResponse) {
                console.log('Welcome!  Fetching your information.... ');
                FB.api(
                    '/me/feed',
                    'GET',
                    {},
                    function(response) {
                        // Insert your code here
                        data = response.data;

                        alert("작성글 가져오기 성공");
                        console.log(data);
                    }
                );
            } else {
                console.log('User cancelled login or did not fully authorize.');
            }
        });
    };

    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

  다른 부분은 위의 로그인 테스트와 동일하고 'FB.api' 부분만 달라졌다. '/me/feed'를 통해 로그인한 사용자의 게시글을 가져오고 따로 화면에 뿌려줘도 되지만... 귀찮았기 때문에 data라는 json 변수에 가져온 글을 담아주고 console창에 로그를 찍어서 확인하려 한다.

실행화면

로그인 성공 후 data 변수에 작성글 저장 및 로그에 출력

  로그인이 성공하고 data 변수에 작성글이 저장되면 alert 창이 뜨도록 만들어 놓았다.

  받아온 작성글이 제대로 로그에 출력된 것을 확인할 수 있다.

  위의 화면은 실제 페이스북 글과 비교를 위해 첨부해놓았다.