We Keep Coding

Django API call from extern Website via AJAX Javascript

i am working for the first time with Django Framework. A service provider is using django i can see the data only with an active Cookie on their API Docs.
We received now an API Token to call for the data on the framework.
I am trying to call the data with the Token via AJAX but i receive everytime the same console log "401 (Unauthorized)".
$.ajax({
type: 'POST',
headers: {
'X-CSRFTOKEN': "XXXXXXXXXXXXXXX",
'Content-Type': 'application/json'
},
url: 'www.service-provider.url/api/...',
success: function () {
console.log("ok");
},
error: function () {
console.log("error");
}
});
Sorry i'm a beginner at this point and have no idea where to begin with. I've searched for solution on the inet but couldn't find anything that would work.

Okay i got it! Before the token api key there must be "Token ...".
$.ajax({
type: 'GET',
url: 'https://my-url.com/api/1.0/?format=json',
headers:{
"Content-Type": 'application/json',
"Authorization": 'Token XXXXXXXXXXXXXXXXXXXXX',
},
success: function(data){
console.log(data);
}
});

New TwitchTV API call

I am a beginner to programming and for a challenge I need to get the status (Streaming live/Off-line) for a given number of channels.
I wrote an ajax request but I am still getting 401 as a response. Below my code and a screen shot of the response.
I have even made the token request as async: falseto make sure the token is back before triggering the API call
$("document").ready(function() {
var aoathToken = $.ajax({
type: "POST",
url: "https://id.twitch.tv/oauth2/token?client_id=MYCLIENTID&client_secret=MYSECRET&grant_type=client_credentials",
error: function() {
console.log("Check your request!!")
},
success: function(token) {
console.log(token);
}
})
$.ajax({
type: "GET",
url: "https://api.twitch.tv/helix/streams?user_id=freecodecamp",
contentType: ('application/x-www-form-urlencoded; charset=UTF-8'),
crossDomain: true,
header: {
"Access-Control-Allow-Origin": "*",
"Client-ID": "MY CLIENT ID",
"Authorization": "Bearer " + aoathToken,
},
data: {"user_login": "myUserID"},
dataType: "json",
success: function(json) {
console.log(JSON.stringify(json, null, 2));
},
error: function(json) {
window.alert(json.status + " " + json.message);
},
})

Javascript with SharePoint 2013 REST Endpoint "INSERT" into List?

Here are what i'm going to use:
SharePoint 2013
Javascript
REST Endpoint
SharePoint List (called: "Announcements")
WebSite (called: "example.com")
Refs:
http://www.plusconsulting.com/blog/2013/05/crud-on-list-items-using-rest-services-jquery/
https://msdn.microsoft.com/EN-US/library/dn292552.aspx
Very simply:
How do i INSERT a new item (row) inside the List please?
I tried:
$.ajax({
url: "https://example.com/_api/web/lists/getbytitle('Announcements')/items",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify( { '__metadata': { 'type': 'SP.Data.AnnouncementListItem' }, "Title": "New Announcement!" } ),
headers: {
"Accept": "application/json;odata=verbose",
"Authorization": "Bearer " + accessToken
"X-RequestDigest": form digest value,
"IF-MATCH": etag,
},
success: function (data) {
console.log(data);
},
error: function (data) {
console.log(data);
}
});
Then i know a lot of things go wrong especially in headers section. But what does it mean by:
Authorization
accessToken
X-RequestDigest
IF-MATCH
.. and then HOW TO get these values (with JavaScript)? So that:
What are always the exact required fields there?
And how/where to get these values from?
I still can not find a simple and complete example about doing this Update / Insert properly.

So there are two ways that I have used to submit an item to a list, the jQuery library SPServices and REST API's. SPServices is really well documented here. Using REST API's is much faster and pretty easy too!
function createListItem(itemProperties, success, failure) {
$.ajax({
url: "https://example.com/_vti_bin/listdata.svc/Announcements",
type: "POST",
processData: false,
contentType: "application/json;odata=verbose",
data: JSON.stringify(itemProperties),
headers: {
"Accept": "application/json;odata=verbose"
},
success: function(data) {
success(data.d);
},
error: function(data) {
// failure(data.responseJSON.error);
alert("error");
}
});
}
First thing I am doing above is creating a function that you can call whenever you want to create a new list item. The parameter itemProperties can be populated with the fields which you need, see below.
var Title = "Title";
var Answer = "Answer";
var userid = _spPageContextInfo.userId;
var taskProperties = {
'Title': Title,
'Answer': Answer,
'UserId': userid
};
Then all we have to do is call this function with the new variable we just declared.
createListItem(taskProperties, function(task) {
alert("Thank you for your input!");
},
function(error) {
console.log(JSON.stringify(error));
}
);

Actually jsfiddle which you have posted in the previous commend is not the REST . you just use the SharePoint client object model. find below the REST API model I hope it will work
var cat = {
"__metadata": { "type": ItemType },
"Title": "GenIT-Issue",
}
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('Tickets')/items",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(cat),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data) {
},
error: function (data) {
}
});
I run this code inside my SharePoint page so there is no authentication required. it will run on current user privilege

how to get access token from bitly using password and username?

$.ajax({
url: 'https://api-ssl.bitly.com/oauth/access_token',
type: 'POST',
contentType: 'application/x-www-form-urlencoded',
dataType: 'json',
data: { Authorization: "Basic " + btoa('myusername' + ":" + 'mypassword#123') },
success: function (result) {
console.log(result);
},
error: function () {
alert("Cannot get data");
}
});
I am trying to get access token from bitly api by providing username and password but it is showing invalid_client_authorization error. Does any one have idea on the same?
Bitly documentation : http://dev.bitly.com/authentication.html#resource_owner_credentials

You are concatenating your username with your authorization header.
Your authorization and content-type should go in the headers object.
There is no 'type' property on jquery ajax method, you probably meant 'method'.
Also, you can't send both dataType:'json' and set the content-type to 'application/x-www-form-urlencoded'
$.ajax({
url: 'https://api-ssl.bitly.com/oauth/access_token',
methdo: 'POST',
contentType: '',
dataType: 'json',
headers: {
'Authorization' : 'Basic ' + [INSERT YOUR HASH HERE],
'Content-Type' : 'application/x-www-form-urlencoded',
}
data: { $.serialize({
username: YOURUSERNAME,
password: YOURPASSWORD
})},
success: function (result) {
console.log(result);
},
error: function () {
alert("Cannot get data");
}
});
This should do it

Fixed #goncalomarques answer:
Removed top level "contentType" and "dataType"
Removed data object (otherwise username and password is sent as clear text, in addition to the hashed username and password in the header)
renamed "methdo" to "method"
Explicitly used btoa() to get Base 64 encoded hash (be aware, does not work in older IE versions)
$.ajax({
url: 'https://api-ssl.bitly.com/oauth/access_token',
method: 'POST',
headers: {
'Authorization': 'Basic ' + btoa(YOURUSERNAME + ':' + YOURPASSWORD),
'Content-Type': 'application/x-www-form-urlencoded',
},
success: function(result) {
console.log("success");
console.log(result);
},
error: function(response) {
console.log("Cannot get data");
console.log(response);
}
});
Note:
I have this example working, but was unable to get it working with the built-in Stackoverflow editor ("Run snippet") due to cross origin exceptions.

jQuery JSONP ajax, authentication header not being set

I'm trying to make an ajax request to the google contacts API with the following setup:
$.ajax({
url: "https://www-opensocial.googleusercontent.com/api/people/#me/#all",
dataType: 'jsonp',
data: {
alt: 'json-in-script'
},
headers: {
'Authorization': 'Bearer ' + token
},
success: function(data, status) {
return console.log("The returned data", data);
}
});
But the Authentication header doesn't seem to get set. Any ideas?

I had the same problem recently. Try this:
$.ajax({
url: "https://www-opensocial.googleusercontent.com/api/people/#me/#all",
dataType: 'jsonp',
data: {
alt: 'json-in-script'
},
success: function(data, status) {
return console.log("The returned data", data);
},
beforeSend: function(xhr, settings) { xhr.setRequestHeader('Authorization','Bearer ' + token); }
});
EDIT: Looks like it can't be done with JSONP. Modify HTTP Headers for a JSONP request

When authentication is needed in a cross domain request, you must use a proxy server of some sort.
Since using dataType: jsonp results in the HTTP request actually being made from the script that gets added to the DOM, the headers set in the $.ajax will not be used.

Is seems that most of the OAUTH2 REST resources accept the access_token parameter as part of the request url
http://self-issued.info/docs/draft-ietf-oauth-v2-bearer.html#query-param
please, try the following code instead:
$.ajax({
dataType: 'jsonp',
url: url,
data: {
'access_token':token.access_token
},
jsonpCallback: 'thecallback',
success: function(data){
_cb(data);
},
error: function(d){
_cb(d);
}
});

Just do this (jquery 2.0, but should work in previous versions)
$.ajax({
url: "/test",
headers: {"Authorization": "Bearer " + $('#myToken').val()}
})
.done(function (data) {
console.log(data);
})
.fail(function (jqXHR, textStatus) {
alert("error: " + textStatus);
});