[jQuery] Hoe curl voorbeeld API ombouwen naar .ajax()?

[Woudloper]

Vanwege een recente migratie van één van de online diensten die ik gebruikte ben ik bezig mijn website/view op deze dienst (data scraping) te herstellen. Op de nieuwe dienst van Morph.io staat enige documentatie, echter is deze alleen voor 'curl':

code:

curl -H "x-api-key:[api_key]" "https://api.morph.io/planningalerts-scrapers/blue-mountains/data.json?query=select%20*%20from%20swvariables%20limit%2010"

Aangezien mijn huidige oplossing uitgaat van jQuery/Ajax wil ik hierop aansluiten in de nieuwe Morph.io oplossing. Zie huidige code:

JavaScript:

var apiurl = "https://api.scraperwiki.com/api/1.0/datastore/sqlite";
var srcname = "profscraper1314";
var sqlselect = "select vanalles from tabellen where alles=alles";
$.ajax(
    {
        url:apiurl, 
        data:{name:srcname, query:sqlselect, format:"jsonlist"}, 
        dataType:"jsonp", 
        success:ProcessTeamInfo, 
        error: ProcessError 
    }
);

Heeft iemand enig idee hoe ik deze nieuwe API kan uitvragen? Meerdere pogingen ondernomen, echter blijven deze steeds terugkomen in een fout of leeg bericht.

[Zoefff]

En wat staat er in de fout, toevallig een authenticatie error?

Het CURL voorbeeld wat je geeft stuurt de API key in een HTTP header mee, dat moet je dan ook in je AJAX call doen natuurlijk:

JavaScript:

$.ajax({
    url: 'api.morph.io/meh',
    headers: { 'x-api-key': 'joehoe' }
});

[Woudloper]

Zoefff schreef op maandag 24 maart 2014 @ 14:23:
En wat staat er in de fout, toevallig een authenticatie error?

Ik krijg helemaal geen foutmelding. Zie bijvoorbeeld de volgende JSFiddle. De headers had ik inmiddels toegevoegd, maar zonder resultaat.

[Zoefff]

Of het met http vs https te maken heeft weet ik niet, maar je JSFiddle voorbeeld zal in ieder geval niet werken vanwege de access-control restricties. Zie ook wat je console uitpoept:

code:

XMLHttpRequest cannot load https://api.morph.io/rubenwoudsma/profscraper1314/data.json?query=select%20*%20from%20pcteamplayers%20limit%2010&callback=jsonp. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

Kortom, dat lijkt me ook het probleem; tenzij je ze kan overtuigen om jouw domein toe te staan denk ik niet dat het je gaat lukken om dit met Javascript op te lossen.

[ Voor 14% gewijzigd door Zoefff op 24-03-2014 15:29 ]

[Barryvdh]

Oplossing zou kunnen zijn om om een server-side script te maken, dat de cURL request voor je uitvoert en het resultaat teruggeeft. Zo voorkom je cross-domain problemen en hou je ook je bron/key geheim.

[Woudloper]

Bedankt voor jullie reactie. Heb ook nog een ticket aangemaakt op Github voor het Morph project, maar blijkbaar zat er een fout in het voorbeeld en gebruik van de API bij jsonp. Dit is nu als volgt opgelost.

JavaScript:

$.ajax({
    url: 'https://api.morph.io/gebruikersnaam/descraper/data.json?key=APIKEY-SLEUTELDUS&query=select%20*%20from%20dual%20limit%2010',
    dataType: 'jsonp',
    success: function(data) {
        log('received data: ' + JSON.stringify(data, undefined, 2));
    }
});

Enige wat ik nu nog moet oplossen is het feit dat de APIKEY semi versleuteld wordt opgeslagen in javascript of via een stukje server-side code.

[SlaadjeBla]

Woudloper schreef op dinsdag 25 maart 2014 @ 07:53:
Enige wat ik nu nog moet oplossen is het feit dat de APIKEY semi versleuteld wordt opgeslagen in javascript of via een stukje server-side code.

Dat heeft helemaal geen zin, want de gebruiker kan zo zien welke APIKEY zijn browser onversleuteld over de lijn stuurt. Zowel de key in Javascript opslaan als injecteren via een stukje servercode houden je APIKEY niet geheim.

Daarom is de enige veilige oplossing volgens mij de call (evt via curl) server-side uitvoeren en het resultaat naar de gebruiker sturen.

[ Voor 12% gewijzigd door SlaadjeBla op 25-03-2014 08:27 ]

[Woudloper]

SlaadjeBla schreef op dinsdag 25 maart 2014 @ 08:14:
Daarom is de enige veilige oplossing volgens mij de call (evt via curl) server-side uitvoeren en het resultaat naar de gebruiker sturen.

Zal daar eens naar gaan kijken. Enige reden hiervoor is het verbergen van de 'APIKEY'. Verder wil ik wel variabel de queries kunnen meegeven aan de server-side oplossing. Deze zijn namelijk wisselend per API verzoek om de data uit te vragen.

Ga hiervoor nog even op zoek naar goede voorbeelden. Enige die ik nu vond is deze (maar lijkt niet toereikend).

[johnkeates]

Je kan gewoon een proxy maken. Je laat de syntax hetzelfde maar laat de API key weg. Dan kan je dus gewoon dezelfde commando's blijven uitvoeren, terwijl die API key dan server-side geïnjecteerd wordt.