带有 JSONP 的 Yelp API、OAuth 和 Angular 只能使用一次

Question

所以this question 有been asked 几个times，但我相信我终于总结出了这里出了什么问题。我正在使用带有 Angular 的 Yelp API，它需要 OAuth 1.0a 才能访问。像大多数人做这种类型的实现一样，我使用following code：

.factory('YelpApi', ['$http',
      function ($http) {
        var randomString = function (length, chars) {
          var result = '';
          for (var i = length; i > 0; --i) {
            result += chars[Math.round(Math.random() * (chars.length - 1))];
          }
          return result;
        };

        var retrieveYelp = function (name, callback) {
          var method =  'GET';
          var url =     'http://api.yelp.com/v2/search';
          var params = {
            callback:                 'angular.callbacks._0',
            ll:                       /* hidden */,
            radius_filter:            '3219',
            oauth_consumer_key:       /* hidden */, // consumer key
            oauth_token:              /* hidden */, //Token
            oauth_signature_method:   'HMAC-SHA1',
            oauth_timestamp:          new Date().getTime(),
            oauth_nonce:              randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'),
            term:                     name || 'food', 
            actionlinks:              true
          }; // end params
          var consumerSecret =        /* hidden */; //Consumer Secret
          var tokenSecret =           /* hidden */; //Token Secret
          var signature = 
            oauthSignature.generate(
              method, 
              url, 
              params, 
              consumerSecret, 
              tokenSecret, 
              { encodeSignature: false }
            ); 
            // end signature
          params['oauth_signature'] = signature;
          console.log('inside yelpapi factory');
          console.log('Term searched for: ' + params.term);
          $http.jsonp(url, { params : params })
            .then(callback, function(err) {
              console.log('An error occured: ', err);
            });
            console.log("inside end of yelpapi factory");
        }; // end retrieveYelp

        return {
          retrieveYelp: retrieveYelp      
        };

      } // end function

    ]) // end factory

这是问题：

使用'angular.callbacks._0' 作为回调使其第一次工作，因为它强制它使用第一个回调，但是会中断后续请求。 You are actually supposed to use JSON_CALLBACK 正确增加回调，但这会破坏一切。 Yelp 生成的错误是“无效签名”。我相信这是由于 Angular 没有替换 JSON_CALLBACK 直到 之后 它已经编码，从而导致预期签名与实际签名不同。我正在使用this 签名生成器。

我怎样才能解决这个问题，确保 Angular 正确递增回调，同时确保正确生成签名？

Answer 1

我找到了一个丑陋的方法来解决这个问题。在下面的帖子中，有一个描述如何创建自己的拦截器来增加 jsonp 回调参数（angular.callbacks._0、angular.callbacks._1 等）

how to custom set angularjs jsonp callback name?

这个解决方案对我来说是一对一的。对于必须创建 oauth 签名的 yelp 和查询，参数回调应该分别包含在签名中，然后应该在执行 jsonp 请求之前已经递增。

所以我所做的，在我的服务中，在进行签名和 jsonp 请求之前，我只是调用计数器来生成新的增量。

在您的情况下，我建议您更改您的代码，如下所示：

var retrieveYelp = function (name, callback) {

// GENERATE increment and use it in the params
var callbackId = angular.callbacks.counter.toString(36);

      var method =  'GET';
      var url =     'http://api.yelp.com/v2/search';
      var params = {
        callback:                 'angular.callbacks._' + callbackId,
        ll:                       /* hidden */,
        radius_filter:            '3219',
        oauth_consumer_key:       /* hidden */, // consumer key
        oauth_token:              /* hidden */, //Token
        oauth_signature_method:   'HMAC-SHA1',
        oauth_timestamp:          new Date().getTime(),
        oauth_nonce:              randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'),
        term:                     name || 'food', 
        actionlinks:              true
      };

我同意这个解决方案不是超级骗子，但至少它有效并且似乎没有副作用。