Trying to connect to the Foursquare API and failing because “Callback uri is not valid for this consumer”
Question
I'm going through Foursquare's tutorial and am getting this error message when I try to load the page:
Connecting failed
This app has a configuration problem and was unable to connect to your Foursquare account.
Cause of error: Callback uri is not valid for this consumer
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?
<?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>
1 answers
solution1
1 2013-12-10 19:09:29
Cause of error: Callback uri is not valid for this consumer
A callback url is a webpage loaded after your web app has been verified. 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. 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.