-1

私は、純粋な JavaScript を使用して Facebook ページを検索する HTML アプリケーションを持っています。他のライブラリやバックエンドはありません。「ページ」の検索と読み取りを処理する API のほとんどは、ユーザー認証を必要とせず、JSONP をサポートしています (「コールバックを介して」 " パラメータ)。

私の HTML コード、index.html

<!doctype html>
<head>
  <title>FaceBook Page Search API</title>
  <script type="text/javascript" src='js/app.js'></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="container">
    <div class="form-search">
      <h3>Search FaceBook Pages</h3>
      <p class="form-search-row"><input id="searchPages" type="text" placeholder="Enter name">
     <button class="btn btn-medium btn-success" onclick="getData()" type="submit">Search</button>
     </p>
   </div>
  </div>
  <div class="offset1 pull-center page-results">
  </div>
 </body>
</html>

そしてapp.js、

var getData = function(){
var my_JSON_object = {};
var http_request = new XMLHttpRequest();
var str, queryInput = document.getElementById("searchPages");
var searchFormRow = document.getElementsByClassName('form-search-row')[0];
var image=document.createElement('img');

if(!queryInput.value){
    return;
}

str = encodeURIComponent(queryInput.value);
image.setAttribute('src', 'img/ajax-loader.gif');
image.setAttribute('width', '30px');
searchFormRow.appendChild(image);

var url = "https://graph.facebook.com/search?type=page&q="+ str;
http_request.open("GET", url, true);
http_request.onreadystatechange = function () {
    var done = 4, ok = 200;
    if (http_request.readyState == done && http_request.status == ok) {
        my_JSON_object = JSON.parse(http_request.responseText);
        displayResults(my_JSON_object);
        image.parentNode.removeChild(image);
    }
};
http_request.send(null);
};


var displayResults = function(pages){
   var resultDiv = document.getElementsByClassName('page-results')[0];
   if(pages.data.length){
      resultDiv.innerHTML = "";
   }
   else{
      resultDiv.innerHTML = "No results found";
   }
   for(var i=0; i<pages.data.length; i++)
   {
      var name = pages.data[i].name, category = pages.data[i].category, id= pages.data[i].id;
      var page = document.createElement("div");
      var pname = document.createElement("p");
      var findmore = document.createElement("a");
      var pcategory = document.createElement("p");
      pname.innerHTML = name;
      findmore.innerHTML = " find out more";
      findmore.href= "detail.html?id="+id;
      findmore.target = "_blank";
      pname.appendChild(findmore);
      pcategory.innerHTML = "Category: " + category;
      pcategory.setAttribute('class',"small-font");
      page.setAttribute('class','span2 pageDiv');
      page.appendChild(pname);
      page.appendChild(pcategory);
      resultDiv.appendChild(page);
      console.log(pages.data[i].name);
     }
    };


   var getPageDeatil = function(){
   var query = window.location.search.substring(1);
   var vars = query.split("=");
   getDetailsAjax(vars[1]);
 };

 var getDetailsAjax = function(pageId){
 var my_JSON_object = {};
 var http_request = new XMLHttpRequest();
 var str = encodeURIComponent(pageId);

 var url = "https://graph.facebook.com/"+ str;
 http_request.open("GET", url, true);
 http_request.onreadystatechange = function () {
    var done = 4, ok = 200;
    if (http_request.readyState == done && http_request.status == ok) {
        my_JSON_object = JSON.parse(http_request.responseText);
        displayDetailsResult(my_JSON_object);
    }
 };
 http_request.send(null);
};

var displayDetailsResult = function(detail){
  var resultDiv = document.getElementById('details');
  var displayImage;
  for (key in detail) {
    if (detail.hasOwnProperty(key)) {
        if(key=="cover"){
            displayImage =true;
        }
        else{
            var li = document.createElement("li");
            li.setAttribute('class',"removeDecor");
            li.innerHTML = key+ " : " + detail[key];
            resultDiv.appendChild(li);
        }
    }
   }
   if(displayImage){
    var heading = document.getElementById('header');
    var image =  document.createElement('img');
    image.setAttribute('src', detail.cover.source);
    heading.insertBefore(image);
   }
  };

最後に、detail.html

<!doctype html>
<head>
  <title>FaceBook Page Search API - Detail Page</title>
  <script type="text/javascript" src='js/app.js'></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body onload="getPageDeatil()">
  <div class="container">
    <h3 id="header">More about Page</h3>
    <div class="well">
      <ul id="details">
      </ul>
    </div>
  </div>
 </body>
</html>

しかし、コンソールに次のエラーが表示されます。

{
  "error": {
     "message": "(#200) Must have a valid access_token to access this endpoint",
     "type": "OAuthException",
     "code": 200
  }
}

ページ検索 API は認証を必要としませんか? では、どうすればこれを解決できますか?

4

1 に答える 1

2

Facebook Developer Documentation を参照して、最終的に私の問題を解決しました。

最初に、 https: //developers.facebook.com/docs/reference/api/search/#access_tokens で access_token の詳細を取得します。

ページと場所のオブジェクト全体を検索するには、アプリ アクセス トークンが必要です。

app_id と secret_id を取得するには、各アプリケーションをhttps://developers.facebook.com/appsに登録する必要があります。

この詳細を取得したら、この URL を使用して access_token を生成しますhttps://graph.facebook.com/oauth/access_token?client_id=app_id&client_secret=secret_id&grant_type=client_credentials

app_id と secret_id は、生成されたものに変更する必要があります。

app.js ファイルのリクエスト URL を次のように変更しました。

var access_token = ""; // my access token here
var url = "https://graph.facebook.com/search?type=page&q="+ str +"&access_token="+access_token;
于 2013-08-02T10:45:05.503 に答える