客户端 JS 函数中 Facebook / Instagram 的访问令牌答案

【问题标题】：Access token for Facebook / Instagram in client side JS function客户端 JS 函数中 Facebook / Instagram 的访问令牌
【发布时间】：2020-04-18 17:21:03
【问题描述】：

我使用一些 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 的服务器端框架，但我没有为这两个问题标记这个问题，因为我希望有一个独立的更简单的解决方案，不需要它们。

【问题讨论】：

标签： javascript facebook-graph-api facebook-javascript-sdk access-token facebook-access-token

【解决方案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 在服务器端是安全的，你会得到想要的结果。

【讨论】：