jquery - Oauth 的主干覆盖 collection.sync

Question

我正在尝试将主干用于本地项目，该项目永远不会看到真正的 Web 服务器，并且通过 AJAX 与 Yelp API 进行交互。 Yelp API 要求我们使用 oauth 进行身份验证，并给出 sample code我已经根据它建模了我自己的代码。当我使用示例代码时，我没有遇到任何跨源或任何问题。但是，当我关闭浏览器安全选项时，我只会收到 400 错误响应。

我尝试按如下方式覆盖 fetch 方法:

fetch: function(options) {
  var accessor, message, parameterMap, parameters;
  if (!options) {
    options = {};
  }
  accessor = {
    consumerSecret: LOAF.auth.conserumerSecret,
    tokenSecret: LOAF.auth.accessTokenSecret
  };
  parameters = [];
  parameters.push(['oauth_consumer_key', LOAF.auth.consumerKey]);
  parameters.push(['oauth_consumer_secret', LOAF.auth.consumerSecret]);
  parameters.push(['oauth_token', LOAF.auth.accessToken]);
  parameters.push(['oauth_signature_method', 'HMAC-SHA1']);
  parameters.push(['location', "New York City"]);
  message = {
    'action': this.url,
    'method': 'GET',
    'parameters': parameters
  };
  OAuth.setTimestampAndNonce(message);
  OAuth.SignatureMethod.sign(message, accessor);
  parameterMap = OAuth.getParameterMap(message.parameters);
  parameterMap.oauth_signature = OAuth.percentEncode(parameterMap.oauth_signature);
  options.url = this.url;
  options.data = parameterMap;
  options.cache = true;
  options.dataType = 'json';
  options.success = this.onResponse;
  console.log("Attempting");
  console.log(options);
  return Backbone.Model.prototype.fetch.apply(this, options);
},

但这会生成 400 响应。我有一种感觉，因为我没有正确进行 AJAX 调用，因为主干为我完成了大部分工作，并且可能会覆盖我正在设置的一些选项。我认为我需要做的是覆盖这个集合的“sync”方法，而不是只处理 OAuth 并自己解析响应。有更好的方法吗？

Answer 1

我不确定这是否是正确的处理方式，但它是这样工作的，所以这是我的解决方案。我重写 fetch 并且从不调用默认的 fetch 方法。相反，我在 fetch 方法中进行 ajax 调用，并使用 onResponse 方法来处理响应，为响应创建模型(Yelp Businesses)。希望这对处于相同位置的任何人有所帮助。

LOAF.YelpList = Backbone.Collection.extend({
  model: LOAF.Business,
  url: 'http://api.yelp.com/v2/search?',
  fetch: function(options) {
    var accessor, message, parameterMap, parameters;
    if (!options) {
      options = {};
    }
    accessor = {
      consumerSecret: LOAF.auth.consumerSecret,
      tokenSecret: LOAF.auth.accessTokenSecret
    };
    parameters = [];
    parameters.push(['callback', 'cb']);
    parameters.push(['oauth_consumer_key', LOAF.auth.consumerKey]);
    parameters.push(['oauth_consumer_secret', LOAF.auth.consumerSecret]);
    parameters.push(['oauth_token', LOAF.auth.accessToken]);
    parameters.push(['oauth_signature_method', 'HMAC-SHA1']);
    parameters.push(['location', "New York City"]);
    message = {
      'action': this.url,
      'method': 'GET',
      'parameters': parameters
    };
    OAuth.setTimestampAndNonce(message);
    OAuth.SignatureMethod.sign(message, accessor);
    parameterMap = OAuth.getParameterMap(message.parameters);
    parameterMap.oauth_signature = OAuth.percentEncode(parameterMap.oauth_signature);
    options.url = this.url;
    options.data = parameterMap;
    options.cache = true;
    options.dataType = 'jsonp';
    options.jsonpCallback = 'cb';
    options.success = this._onResponse;
    options.context = this;
    return $.ajax(options);
  },
  _onResponse: function(data, textStats, xhr) {
    debugger;
    var _this = this;
    return _.each(data.businesses, function(business) {
      var busModel;
      if (!_this.get(business.id)) {
        busModel = new LOAF.Business(business);
        return _this.add(busModel);
      }
    });
  }
});

有两点需要注意:

1. 最初的代码本来可以工作，但 ConsumerSecret 拼写错误，导致 OAuth 调用不正确。这就是我收到 400 错误的原因。
2. 即使解决了这个问题，仍然存在跨域调用的问题。切换到我使用的 AJAX 方法缓解了这个问题。然而，可能存在一种方法来修复这个更原生于 Backbone 的问题。对于我的项目的时间框架来说，这是行不通的。