CODEWITHSUNDEEP
requesthttpclientangular5
Angel Mora
Angel Mora

Reputation: 43

{error: "unsupported_grant_type"} angular 5

I am using api rest to authenticate. I use HttpClientModule

let url = "https://bms.kaseya.com/api/token"
let headers = new HttpHeaders()
            .set('Accept','application/json')
            .set('Content-Type', 'application/x-www-form-urlencoded');

let params = new HttpParams()
            .set('grant_type','#')
            .set('username','#')
            .set('password','#')
            .set('tenant','#');

return this._httpClient.post(url,{params, headers})

and when I send it, It response {error: "unsupported_grant_type"}

any one can help me?

Upvotes: 4

Views: 3607

Answers (3)

SUMESH S L
SUMESH S L

Reputation: 1

 //setting URL paramters
 let urlParams = new URLSearchParams();
 urlParams.append('username',login.usrNm);
 urlParams.append('password',login.pswd);    
 urlParams.append('grant_type','password');
 urlParams.append('client_id','fooClientIdPassword');

 //setting headers for basic authenication
 let headerObj = new HttpHeaders();
 headerObj.append('Content-Type','application/x-www-form-urlencoded')
 headerObj.append('Authorization','Basic '+btoa(login.usrNm+':'+login.pswd));

 //posting the request with url paramaters and header
 this._http.post('http://localhost:8002/oauth/token', 
  urlParams .toString(), {headers:headerObj})
  .subscribe(
    data => this.saveToken(data),err => alert('Invalid UserName and Password'));

Upvotes: -1

Aakash Thakur
Aakash Thakur

Reputation: 3895

I was also getting this error for the last few days. Resolved it today though. Here's the whole method:

regenerateToken() {
    var headers = new HttpHeaders();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    let urlSearchParams = new URLSearchParams();
    urlSearchParams.set('grant_type', 'password');
    urlSearchParams.set('username', 'mD6sfrFntnE5DqQCjeCpyAh8NrxqZqYCpFTCmLcJEuGin-27X6DlzMqLxMw_x8kI7UnCYYLAy1gaGQT7RR_NFMNCfCa2jPDadLJXpf7Rsmc=');

    let body = urlSearchParams.toString();

    return this.http.post('https://bms.kaseya.com/api/token', body, {
      headers: headers
    })
      .map((data: any) => data.access_token)
      .catch(err => {
        debugger;
        return Observable.throw(err.statusText);
      })
  }

Hope this helps.

Upvotes: 4

jtslugmaster08
jtslugmaster08

Reputation: 192

First you definitly have a CORS issue but you have not posted enough information but I am going to try my best.

As it turns out I also have the same problem as you but after some digging I found this stack overflow site that should help you get started.

Bad Request (400) when using Web API Token Authenticaion from Angualr JS

Secondly after debugging the response and looking at what I was sending to the api. I saw that by default it was sending headers of 

('Accept', 'application/json')

and

 ('Content-Type', 'application/x-www-form-urlencoded');

This may be a property of angular 5 to set this as the default.

So I simply removed the header and only pass in your params like so.

return this.http.post('url', params);

As it turns out if you have duplicate headers it will return unsupported grant type. So only send one.

(PS) be sure to double check that you are receiving a 200 status for the preflight request and that you are receiving the error message(unsupported grant type) on the post. Otherwise the solution will involve different steps. For that you can try the below places.

CORS enabled but response for preflight has invalid HTTP status code 404 when POSTing JSON

and

Angular 2: how to deal with Response for preflight has invalid HTTP status code 400. Bad request

Hope this helps.

Upvotes: 0

Related Questions