How to use the API Key?

Eriol

I'm trying to use this syntax to make an anonymous login:

http://api.smugmug.com/hack/json/1.2.0/?method=smugmug.login.anonymously&APIKey=XXX

where XXX is the key. According to Firebug, the response is 200 OK, so the request was successful, but the response is empty.

Any idea what I am doing wrong? Thanks.

devbobo

How are you making the request ? Just loading the string in the browser ? It's working fine here.

Eriol

devbobo wrote: »

How are you making the request ? Just loading the string in the browser ? It's working fine here.

Hi, I'm calling it through jQuery's $.getJSON() method.

(function($) {
$(document).ready(function(){
$.getJSON('http://api.smugmug.com/hack/json/1.2.0/?method=smugmug.login.anonymously&APIKey=XXXXX', function(data) {
alert(data);
});
});
})(jQuery);

Something is wrong with the data returned to this method.

devbobo

I'd suggest that there is something wrong with your javascript, try loading the API url directly in your browser...you will see that it's working fine.

Eriol

I loaded the URL into Firefox 3 and it is responding that it is of type application/JSON, and asking me what to do with the file (save or open in an app). In Safari, I directly get the JSON in the browser.

Shouldn't the JSON just be of MIME type text?

I'll check my Javascript.

Eriol

Is anybody else using the JSON rest URL via Javascript?

Hmm, I had expected the SmugMug JSON REST URL to behave like the Flickr REST URL. From what I can tell, Flickr returns text/plain as the MIME type while SmugMug returns application/JSON as the MIME type. I'm wondering if that is throwing things off.

EDIT: The JSON spec says the proper MIME type is application/json. I'm wondering if the jQuery library has issues with application/json.

Eriol

Ok, I switched over to this jQuery syntax, and jQuery reports that the request completed and succeeded, but the returned data is empty. I'm wondering if the API is set up incorrectly.

$.ajax({
url: 'http://api.smugmug.com/services/api/json/1.2.2/?method=smugmug.login.anonymously&APIKey=XXXXX',
type: 'GET',
dataType: 'json',
success: function(data) {
console.log(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
},
complete: function(XMLHttpRequest, textStatus){
console.log(textStatus);
}
});

Eriol

In discussing this with a colleague, it seems the SmugMug JSON REST APIs deliver a pure JSON structure, which cannot be directly read through Ajax methods in jQuery because of cross-domain security in browsers. The JSON Api would need to return JSONP so that the JS has something to hook on to. So, I guess this API was meant for a server-side program to ingest first and then pass it on.

So, it looks like I can't use this API the way I wanted to. Oh well.

devbobo

Hey Eriol,

We support JSONP, you just need to send the Callback parameter defining the local JS function to call on return.

Cheers,

David

SamirD

Check out this thread:
http://www.dgrin.com/showthread.php?t=137990

asozzi

Eriol wrote: »

In discussing this with a colleague, it seems the SmugMug JSON REST APIs deliver a pure JSON structure, which cannot be directly read through Ajax methods in jQuery because of cross-domain security in browsers. The JSON Api would need to return JSONP so that the JS has something to hook on to. So, I guess this API was meant for a server-side program to ingest first and then pass it on.

So, it looks like I can't use this API the way I wanted to. Oh well.

Hello Eriol,

not sure if you moved on to other things in the meantime. Reading your questions I vaguely remember a small bit of hobby code I did about 2 years ago. Using jQuery to pull picture URLs from a Smugmug albumb. All very hard coded for testing. This is How I went about it (and it works).

]

$(document).ready(function(){
				var Smg={};
				Smg.URL = "http://api.smugmug.com/services/api/json/1.2.1/"
				Smg.APIKey = "enter your Key here"
				Smg.Key = null;
				
				jQuery.fn.log = function (msg) {
					console.log("%s: %o", msg, this);
					return this;
				};
				
				function getSmugResource(uri, data_callback){
					$.getJSON(uri+"&JSONCallback=?",
						function(data){
							data_callback(data);
							//console.info(data);
						}
					);	
				};
				
				function processLogin(data){
					Smg.Key=data.Login.Session.id;
				}
				
				function processImages(data){
					var delay = 200;  				// If login key not yet back keep trying at intervalls.
					if (Smg.Key == null) {
						setTimeout(function(){
							processImages(data);
						}, delay);
						return;
					};
					getSmugResource(Smg.URL+"?method=smugmug.images.get&Heavy=1&APIKey="+Smg.APIKey+"&SessionID="+Smg.Key+"&AlbumID=#AlbumID here# ", printSuccess);
				};
				
				function printSuccess(data){
					var html = "";
					$.each(data.Images, function(entryIndex, entry){
						html += '<li><a href="'+entry.LargeURL+'" title="'+entry.Caption+'"><img src="'+entry.ThumbURL+'"/></li></a> ';  //entry['ThumbURL'] seems to work too
					});
					html = '<ul class="imgURL">'+html+'<\/ul>';
					$('#msg').append(html);
					$('#msg').append("<li>Successful Request!</li>");
					$('#msg a').lightbox();
				}
				
				getSmugResource(Smg.URL+"?method=smugmug.login.anonymously&APIKey="+Smg.APIKey, processLogin);
				processImages();
			});

I output the images in a list of thumbnails that link to the larger images for a jquery lightbox. The code could probably we redone a lot nicer, but it works and should give you an idea.