尝试连接到Foursquare API并失败，因为“回调uri对此消费者无效”

Question

I'm going through Foursquare's tutorial and am getting this error message when I try to load the page: 我正在阅读Foursquare的教程，并在尝试加载页面时收到以下错误消息：

Connecting failed 连接失败

This app has a configuration problem and was unable to connect to your Foursquare account. 该应用程序存在配置问题，无法连接到您的Foursquare帐户。

Cause of error: Callback uri is not valid for this consumer 错误原因：回调uri对该消费者无效

The code is the exact same as the sample code with my credentials subbed in. Is my Foursquare Client id not the right thing to use as the apiKey under config? 该代码与带有我的凭据的示例代码完全相同。我的Foursquare客户端ID是否不适合用作config下的apiKey？

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>foursquare :: Explore Sample</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" id="jquery"></script>


  <link href="/styles/leaflet.css" type="text/css" rel="stylesheet" />
  <link href="/styles/apisamples.css" type="text/css" rel="stylesheet" />

  <script src="/scripts/apisamples.js" type="text/javascript"></script>
  <script src="/scripts/third_party/jquery.ba-bbq.js" type="text/javascript"></script>
  <script src="/scripts/third_party/leaflet.js" type="text/javascript"></script>
  <script src="/scripts/third_party/wax.leaf.min.js" type="text/javascript"></script>

  <style type="text/css">
    html { height: 100%; }
    body { height: 100%; margin: 0; padding: 0; }
    /* Give our markers a background image */
    .leaflet-marker-icon {
      background: url(https://foursquare.com/img/pin-blue-transparent.png);
      padding: 6px;
      padding-bottom: 17px;
      top: -6px;
      left: -6px;
      }
  </style>

  <script type="text/javascript">

  var config = {
    apiKey: '[my Foursquare Client id]',
    authUrl: 'https://foursquare.com/',
    apiUrl: 'https://api.foursquare.com/'
  };


  //<![CDATA[

  /* Attempt to retrieve access token from URL. */
  function doAuthRedirect() {
    var redirect = window.location.href.replace(window.location.hash, '');
    var url = config.authUrl + 'oauth2/authenticate?response_type=token&client_id=' + config.apiKey +
        '&redirect_uri=' + encodeURIComponent(redirect) +
        '&state=' + encodeURIComponent($.bbq.getState('req') || 'users/self');
    window.location.href = url;
  };

  if ($.bbq.getState('access_token')) {
    // If there is a token in the state, consume it
    var token = $.bbq.getState('access_token');
    $.bbq.pushState({}, 2)
  } else if ($.bbq.getState('error')) {
  } else {
    doAuthRedirect();
  }

  /* HTML 5 geolocation. */
  navigator.geolocation.getCurrentPosition(function(data) {
    var lat = data['coords']['latitude'];
    var lng = data['coords']['longitude'];
    /* Create map. */
    var map = new L.Map('map_canvas')
      .setView(new L.LatLng(lat, lng), 15);
    var mapboxUrl = 'http://a.tiles.mapbox.com/v3/[my Mapbox username].[my map id].jsonp';
    wax.tilejson(mapboxUrl, function(tilejson) {
      map.addLayer(new wax.leaf.connector(tilejson));
    });

    /* Query foursquare API for venue recommendations near the current location. */
    $.getJSON(config.apiUrl + 'v2/venues/explore?ll=' + lat + ',' + lng + '&oauth_token=' + window.token, {}, function(data) {
      venues = data['response']['groups'][0]['items'];
      /* Place marker for each venue. */
      for (var i = 0; i < venues.length; i++) {
        /* Get marker's location */
        var latLng = new L.LatLng(
          venues[i]['venue']['location']['lat'],
          venues[i]['venue']['location']['lng']
        );
        /* Build icon for each icon */
        var leafletIcon = L.Icon.extend({
          iconUrl: venues[i]['venue']['categories'][0]['icon'],
          shadowUrl: null,
          iconSize: new L.Point(32,32),
          iconAnchor: new L.Point(16, 41),
          popupAnchor: new L.Point(0, -51)
        });
        var icon = new leafletIcon();
        var marker = new L.Marker(latLng, {icon: icon})
          .bindPopup(venues[i]['venue']['name'], { closeButton: false })
          .on('mouseover', function(e) { this.openPopup(); })
          .on('mouseout', function(e) { this.closePopup(); });
        map.addLayer(marker);
      }
    })
  })
  //]]>
  </script>


</head>
<body>
  <div style="width: 100%; height: 100%;" id="map_canvas"></div>
</body>
</html>

Answer 1

Cause of error: Callback uri is not valid for this consumer 错误原因：回调uri对该消费者无效

A callback url is a webpage loaded after your web app has been verified. 回调网址是验证您的Web应用程序后加载的网页。 In this case, you need to specify a page for to send data to after authentication. 在这种情况下，您需要指定一个页面，用于在身份验证后将数据发送到该页面。

Double check your Foursquare credentials and update the callback uri to a valid link. 仔细检查您的Foursquare凭据，并将callback uri更新为有效链接。 The tutorial your shared uses https://developer.foursquare.com/docs/samples/explore , but you'll need to specify the url where this page is hosted. 您共享的教程使用https://developer.foursquare.com/docs/samples/explore ，但是您需要指定托管此页面的URL。

尝试连接到Foursquare API并失败，因为“回调uri对此消费者无效”

问题描述

1 个解决方案

解决方案1
1 2013-12-10 19:09:29

尝试连接到Foursquare API并失败，因为“回调uri对此消费者无效”

问题描述

1 个解决方案

解决方案1 1 2013-12-10 19:09:29

解决方案1
1 2013-12-10 19:09:29