Making OAuth2 request in angularjs - angularjs

I'm trying to make a request in angularjs to retrieve an access token, but I'm not 100% sure how to go about it. Here's the request in curl
curl -X POST -d
"grant_type=password&username=&password=&scope=read"
-u":" http://localhost:8000/o/token/
any and all help is appreciated

I think you need to post with query string parameters
To do that you need to make some modifications in your post request
var request = $http({
method: "POST",
url: "",
transformRequest: transformRequestAsFormPost,
data: {
grant_type: "password",
username: "Kim",
password: "123",
scope: "read"
}
});
Here is explanation in more details https://www.bennadel.com/blog/2615-posting-form-data-with-http-in-angularjs.htm

I figured it out
var data = "grant_type=password" + "&username="+cred.username + "&password="+cred.password +
"&client_id=" + cred.client_id +
"&client_secret=" + cred.client_secret;
$http({
method: 'POST',
url: 'BaseUrl',
data: data,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

Related

Napster API Auth - BAD Request / Unauthorized

I am coding in Reactjs and trying to Auth/Outh into the Napster Web API, followed the information on this page: https://developer.napster.com/api/v2.2#authentication
A sample of my current code:
const API_KEY = 'OWIxMjhlY2MtOTA3Yi00NWJiLThiYTktODc3OTNiYTQ4MGU4';
const API_KEY_SECRET = 'OWIxMjhlY2MtOTA3Yi00NWJiLThiYTktODc3OTNiYTQ4MGU4';
url: 'https://api.napster.com/oauth/access_token',
method: 'post',
params: {
client_id: API_KEY,
client_secret: API_KEY_SECRET
},
headers: {
'Accept':'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer ' + (new Buffer(API_KEY + ':' + API_KEY_SECRET).toString('base64'))
},
data: querystring.stringify({ grant_type: 'authorization_code' })
Response Payload:
{"code":"UnauthorizedError","message":"Authentication code not valid"}
{"code":"BadRequestError","message":"Invalid grant_type parameter"}
According to the documentation and sample below....
curl -v -X POST -d "client_id={api_key}&client_secret={api_secret}&response_type=code&grant_type=authorization_code&redirect_uri={redirect_uri}&code={temporary_code}" "https://api.napster.com/oauth/access_token"
...You don't need to send Authorization headers. It's a normal form post with all the parameters. So If you include the rest of the parameters along with client_id : API_KEY... it should do the trick.

Basic authenticiation in $http Get request

I am trying to access a REST API service with basic authenticiation.
This works perfectly as a curl request:
curl -D- -X GET -H "Authorization: Basic eW**********0NQ==" -H "Content-Type: application/json" "https://api.domain.com/api/users/email/first.last#domain.com"
In angular, I tried this and it does not seem to work as I get a 501 error...
var _url = "https://api.domain.com/api/users/email/first.last#domain.com";
var _authdata = Base64.encode('MyUsername' + ':' + 'MyPassword');
var _headers = {
'Authorization': 'Basic eWd***********0NQ==',
'Content-Type': 'application/json'
};
$http({
method: 'GET',
url: _url,
headers: _headers
}).then(function(request) {
console.log('request');
});
I am trying to understand why this isn't working out properly. CORS are not the problem...
Any suggestions ?
Base64.encode is not understandable by angular-js either you can use javascript "btao" and "atob" or you can include the base64 through npm
Maybe the following code snippet will help you.
var _url = "https://api.domain.com/api/users/email/first.last#domain.com";
var _authdata = btoa('MyUsername' + ':' + 'MyPassword');
var _headers = {
'Authorization': 'Basic' + _authdata,
'Content-Type': 'application/json'
};
$http({
method: 'GET',
url: _url,
json: true,
headers: _headers
}).then(function(request) {
console.log('request');
});
or you can include the Angular-base64 dependency using npm:
https://www.npmjs.com/package/angular-base64

Angular Ajax call being sent as request payload but not formdata after fixing

Ok, I've tried looking at this How can I post data as form data instead of a request payload?
However, I still can't seem to send my request properly. Here are the details.
$scope.myData = {a: 123, b: 456};
$http({
url: 'myfile',
method: "POST",
data: JSON.stringify($scope.myData),
headers: {'Content-Type': 'application/json'}
})
This keeps being sent as request payload. Any ideas?
When I use 'application/x-www-form-urlencoded' The formdata is used however it is not parsed properly and the whole json is just one string when I look in the Chrome console.
$http provides an option : params.
Use params: instead of data:
$http({
url: 'myfile',
method: "POST",
params: JSON.stringify($scope.myData),
headers: {'Content-Type': 'application/json'}
})

Adding content-type header to Angular $http request

I'm trying to send HTTP request using the following code:
var editCompanyUrl = 'http://X.X.X.X:YYYY/editCompany';
var userId = localStorage.getItem("UserId");
var token = localStorage.getItem("Token");
var companyId = localStorage.getItem("companyId");
return $http({
method: 'POST',
url: editCompanyUrl,
params: {
token: token,
userId: userId,
companyId: companyId,
companyName: $scope.companyName,
},
timeout: 500
}).then(function (data) {
console.log(data);
//Store Company ID which is used for saving purposes
//localStorage.setItem("companyId", data.data.Company.id);
return data.data.Company;
}, function (data) {
console.log(data);
})
and handler of the request on the server side accepts requests with Content-Type: multipart/form-data. How can I add this content type to the request? I've tried many advices and tips from tutorials but no success. Could you please help me? In addition to it - what should I do when I will add a file with an image to this request? Can I just add it as additional parameter of the request?
Thank you very much!
Angular POST must be like below code.
var req = {
method: 'POST',
url: 'http://example.com',
headers: {
'Content-Type': undefined
},
data: { test: 'test' }
}
it should have data:{ }
so try to put your params: inside the data and it should work.

AngularJs $http.post -> Error: Unexpected Request POST ; no more request expected

I've got a working curl request here:
curl -u testclient:testpass http://mybackend.somedomain.com/token.php -d 'grant_type=client_credentials'
Now I try to translate this to my angularJs (ionicframework) frontend.
(The php-backend is on a different server, so this might maybe have something to do with CORS, too, though I don't know how)
In my frontend I try:
var username = 'testclient';
var password = 'testpass';
var url = 'http://mybackend.somedomain.com/token.php';
var request = $http({
method: "post",
url: url,
data: {
username: username,
password: password
},
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
This results in something weird, the POST request isn't executed, but instead I get the error message:
Error: Unexpected request: POST http://mybackend.somedomain.com/token.php No more request expected
What am I doing wrong here ?
There is a mistake in your Angular POST, your data is encoded as JSON instead of what you claim in headers application/x-www-form-urlencoded. First you should change your code to below.
$http({
method: 'POST',
url: url,
data: $.param({
username: username,
password: password
}),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})

Resources