Issues accessing Facebook profile image - javascript

This is the kind of question that I am sure has a simple answer, but I been with this for days now without finding it.
The issue comes when I try to access the picture via the graph API.
According to the graph API the following URL should return a JSON with is_silhouette and url
https://graph.facebook.com/xxx/picture
When I try that in the Graph Explorer it works fine, but when I test the same URL in the browser I get automatically redirected to the URL attribute of the response instead of getting a JSON.
My problem is that I need to access the contents of that JSON to get the URL attribute in order to display the user profile.
My code looks something like this
var fbimage = "https://graph.facebook.com/" + e.uid + "/picture/";
var xhrFbImage = Ti.Network.createHTTPClient({
onload : function() {
jsonData = '';
jsonData = this.responseText;
Ti.API.info("inside FB response...");
Ti.API.info(jsonData);
}
});
xhrFbImage.open("GET", getFbImage);
xhrFbImage.send();
The response is always null
Any tip in the right direction will be really appreciated.

Found the answer.
By adding ?redirect=false I get the actual JSON without the redirect.
So the correct URL to query is
https://graph.facebook.com/xxx/picture?redirect=false
The answer was more visible than I thought. You can refer to it here
https://developers.facebook.com/docs/graph-api/reference/user/picture/

Related

Easiest way make API call using Javascript + jQuery

I am trying to make an API call to Openweathermap using their API+key. I am unable to parse the data to a CSS ID using $.getJSON in Javascript.
This is the jsfiddle: https://jsfiddle.net/n1Lz3vf0/
Code:
var weatherData = "http://api.openweathermap.org/data/2.5/weather?
q=Endicott,us&appid=API+KEY";
$.getJSON(weatherData, function(data){
var town = data.name;
document.getElementById('town').innerHTML = town;
});
And it outputs to a simple div tag
Obviously the end result will be far more involved and I will be parsing much more data, but in the jsfiddle, it should simply output my city name but it's not.
You have a mixed content error on the jsfiddle page, because it's a https website and you're trying to call a http url in your API call. You can't call an external API using http if you're over https, the request is blocked.
I tried your request with https and it works just as expected.

How to add an API Key to a UrlFetchApp in Google Apps Scripts

Solved
Thanks to Dimu Designs for helping out.
The following works.
function myFunction() {
var url = "https://api.fortnitetracker.com/v1/profile/pc/Ninja"; var apiKey = "xxx-xxx-xxx";
var res = UrlFetchApp.fetch(
url,
{
"headers":{
"TRN-Api-Key":apiKey
}
} ); var content = res.getContentText(); Logger.log(res); Logger.log(content);
}
Problem
I'm trying to use Google App Scripts within Google Sheets to call the external Fortnite API to request player data. The bit I'm stuck on how to add an API Key as a header when passing the request.
This is what I've built so far (please no laughing)!...
function myFunction() {
var res =
UrlFetchApp.fetch("https://api.fortnitetracker.com/v1/profile/PC/Ninja?");
var content = res.getContentText(); Logger.log(res);
Logger.log(content);
}
When I try to run this I get back the following error:
Request failed for
https://api.fortnitetracker.com/v1/profile/PC/Ninja? returned code
401. Truncated server response: {"message":"No API key found in request"} (use muteHttpExceptions option to examine full response
I've tried adding my API key in a number of ways based on a number of different posts, but it doesn't work and just confuses me even more (easily done at this point).
Does anyone have any idea how I could go about completing the script to ensure I get information back? :)
---Edit---
First of all, thanks for the help guys, here's where we are at the moment. I've now tried the following:
var url = "https://api.fortnitetracker.com/v1/profile/pc/Ninja"; var apiKey = "xxx-xxxx-xxx";
var response = UrlFetchApp.fetch(
url,
{
"headers":{
"TRN-Api-Key":apiKey
}
} );
Rather than a 401 error, this time a 403 error is being returned.
Note, I've also tried to authenticate the header using "basic" but that doesn't work".
EDIT
I suspect that the API uses a custom header. When you register for an API key you get a string in the following form:
TRN-Api-Key:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
I'm guessing here, but the text preceding the colon appears to be a custom header and the string of characters after the colon is the API key.
Without proper documentation this is STILL pretty much a shot in the dark but you can try the following:
var url = "[FORTNITE-API-ENDPOINT]";
var apiKey = "[YOUR-API-KEY]"; // sans header and colon
var response = UrlFetchApp.fetch(
url,
{
"headers":{
"TRN-Api-Key":apiKey
}
}
);
Also, make sure to check out the UrlFetchApp documentation for future reference:
https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app

How to set a specific json response object as a js var - Cloudinary

I am using Cloudinary to host my profile images that are set by users.
I'm mostly using PHP for my web application -> Here are the instructions as provided by Cloudinary http://cloudinary.com/documentation/php_image_upload#overview
The problem that I encounter is that I want to display the image directly after upload by parsing the newly created URL for the image that is returned by JSON.
When I do the console.log as provided by Cloudinary:
$(document).ready(function() {
$('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {
console.log(data);
return true;
});
});
This is the console.log response that I receive
Can anyone please help me with a javascript or JQuery function that I can use in order to display the updated image with in my image tag.
You need read the tree...
jqXHR.responseJSON.url
In this case, use
data.result.url
See example of http://cloudinary.com/documentation/php_image_upload#preview_thumbnail_progress_indication_multiple_images
Can you update the src of your image tag based on the json returned?
Something like this in the callback function:
var imgDiv = document.getElementById("profile");
imgDiv.src = data.jqXHR.responseJSON.url;

Retrieving cross-domain JSON data, Javascript/JSON

I did some research on retrieving cross domain JSON data, but when I implemented it, the code didn't work. Doing some more research, I found that browsers don't let websites retrieve data from a different host due to security reasons. I found an answer that said I should use JSONP, but it still wasn't working? This was my code.
function getWeather(location){
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + location + "&appid=/*my usual app id is here*/&callback=?", function(result){
//response data are now in the result variable
alert(result.weather[0].description);
var changeW = document.getElementById("theweathertext");
changeW.innerHTML = "The current weather at your destination: " + result.weather[0].description +".";
});
}
When I test the code, the browser isn't letting me retrieve the data? How would I fix this? Thanks in advance.
UPDATE: This code was working when I was testing it locally, but when I did a live launch preview, it didn't work. Could this be some other problem?
I think this code will work if you provide a valid apikey:
$.getJSON(
'http://api.openweathermap.org/data/2.5/weather?q=lisbon&callback=?',
function(data){
console.log(data);
}
);
EDIT: It currently gives me 401 code which means i have no rights to access this endpoint. That is why i'm suggesting to use a valid api key.

How to retrieve the page title in JavaScript?

I need a way to retrieve the title of a remote webpage. I found this js on the internet but
someone can tell me what does "$.request("fetch_title", { url: c })" do in this function: ?
function fetch_title() {
var a = $("#url-field"),
b = a.find(".NO_URL"),
a = a.find(".title-status"),
c = $("#url").val();
if (c) {
if (!$('form#newlink textarea[name="title"]').val() || confirm("This will replace your existing title, proceed?"))
a.show().text(reddit.status_msg.loading),
b.hide(),
$.request("fetch_title", { url: c })
} else a.hide(), b.show().text("a url is required")
}
There's no jQuery.request() function in core jQuery, so it's likely implemented by a plug-in. The closest I've found on Google is AmplifyJS, which is described as a "component library for jQuery". However, there's no indication from the documentation that using $ in place of amplify would work.
Taken from the page linked above:
amplify.request is an abstraction layer that can be used for any kind of request for data. amplify.request sets out to separate the data retrieval and caching mechanisms from data requestors.
It seems to be a request for the title of a page based on the specified URL from user input, but the exact specifics of the request would be elsewhere in the code.
To get the title of a page, simply use jquery.get and search for the title in the response like so:
$.get('ajax/test.html', function(data) {
var matches = data.match(/<title>(.*?)<\/title>/);
var title = matches[1];
});
The title will no be in the title variable.

Categories

Resources