客户端JS功能中Facebook / Instagram的访问令牌

Question

我正在使用一些JS函数作为Html脚本，这些脚本从用户FB / Instagram帐户加载图像。它们可以正常工作，但恐怕它们并不安全：秘密用户访问令牌（每个函数的第一行）在js客户端可见。

function LoadIntagramContent(event){
  var token = XXXXXXXXXXXXXX;
  event.preventDefault();
  var userid = instagram_user_id;
  var num_photos = 20; 
  var data_imgs_srcs = [];

  $.ajax({
    url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent', 
    async: false,
    dataType: 'jsonp',
    type: 'GET',
    data: {access_token: token, count: num_photos},
    success: function(data){
      $(".social-img-wrapper").remove();
        for( x in data.data ){ //The images come as numerated JSON
        var insta_extra_info = JSON.stringify( {'digsrc': 'instagram', 'url': data.data[x].link } )
            $('#social-uploads .modal-body').append('<div class="social-img-wrapper"><img class="social-img img-fluid" src="'+ data.data[x].images.standard_resolution.url+'" onclick=" $(this).toggleClass(\'social-img-selected\');" ></div>');
        $('#social-uploads').modal()
        }
    },
    error: function(data){
        console.log(data); // send the error notifications to console
    }
  });
}

function LoadFacebookContent(event){
  var token = XXXXXXXXXXX;
  event.preventDefault();
  FB.api(
  '/me',
  'GET', {
    "fields": "id,name,photos{album,alt_text,created_time,id,picture,webp_images,link}",
    "access_token" : token,
  },
  function(response) {
    console.log("FB DATA ES: ")
    console.log(response)
    $(".social-img-wrapper").remove();
    var fb_data = response.photos.data;
    for( let x of fb_data ){ //The images come as array
      var fb_extra_info = JSON.stringify( {'digsrc': 'facebook', 'url': x.link } )
      $('#social-uploads .modal-body').append('<div class="social-img-wrapper"><img class="social-img img-fluid" src="'+ x.picture + '" onclick=" $(this).toggleClass(\'social-img-selected\');" ></div>');
      $('#social-uploads').modal()
    }
  });
}

我想知道如何解决此问题，因为Facebook API文档明确警告了此问题：

注意的一个参数是access_token，您可以使用它来进行具有页面访问令牌的API调用。在此SDK中，永远不要在客户端使用应用程序访问令牌，因为它会暴露您的应用程序机密。

我希望有一个最小的简单解决方案，不需要在客户端进行重大更改。我将Django作为Heroku的服务器端框架使用，但是我没有为这两个问题都加上标签，因为我希望有一个独立的更简单的解决方案，不需要它们。

Answer 1

考虑到Facebook API文档的警告或我们的常识，最好不要在客户端脚本语言上使用访问令牌。

解决此问题..

1）创建一个服务器端函数来访问Facebook / Instagram数据（您可以为此使用后端语言的Facebook SDK）

PHP示例

function getInsta($username)
{
     /*
        Some codes
      */
        $instaResult = file_get_contents('https://www.instagram.com/'.$username.'/media/');
    $insta = json_decode($instaResult);
    /*
       some code if required
    */

    return $formated_results_from_insta;
}

2）创建到此函数的路由（API URL）（我不知道您使用的是哪种bakcend语言）

3）从您的ajax调用此创建的URL，而不是直接访问instagram。

因此，access_token在服务器端将是安全的，您将获得所需的结果。