Angular 5 HTTPClient Basic Authorization not working

Question

I'am trying to implement basic authorization in Angular 5. I'm using HttpClient and HttpHeaders. I'm trying to connect to a tomcat server with a REST service.

This code is in my login function.

this.storage.set('credentials', credentials);
return new Promise((resolve, reject) => {
    let headers = new HttpHeaders();
    //btoa permet d'encoder le username et le mot de passe en base64
    headers = headers.append("Authorization", "Basic " + btoa(credentials.username + ':' + credentials.password));
    headers = headers.append("Content-Type", "application/x-www-form-urlencoded");

    //utilisation de stateless pour ne créer qu'une session http et ne pas créer une session par requete
    this.http.post(apiUrl+'ADUser', JSON.stringify({l: credentials.username, p: credentials.password}),{ headers:headers })
      .subscribe(res => {
        resolve((res: Response) => res.json());
      }, (err) => {
        console.log(err);
        reject();
        let alert = this.alertCtrl.create({
        title: 'L\'authentification a échoué',
        subTitle: 'Le nom d\'utilisateur ou le mot de passe est incorrect',
        buttons: ['OK']
      });
      alert.present();
      });
});

This is from the Chrome tools Network tab

After looking on the forums and on this site, I have not found a solution to my problem. Could someone please help me with this problem ?

Thank you in advance for your response and the time spent helping me

If I'm not mistaken, Angular's `post` requests 2nd param should be an object, not a string, perhaps remove the `JSON.stringify` — Michael Doye, May 24 '18 at 12:59
Thans for your reply. `this.http.post(apiUrl+'ADUser', credentials,{ headers:headers})` If I do like that, it does not work either — Laurent Gander, May 24 '18 at 13:08

Piero · Accepted Answer · 2018-05-24T14:29:44.453

0

Here's a piece of code I use to post data with credentials :

postData(appurl: string, data: string) {

    let body = new URLSearchParams();
    body.set("data", encodeURIComponent(data));

    const opt = {
      headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded'),
      withCredentials: true
    };

    return this.http.post(appurl, body.toString(), opt);

}

I hope this helps...

btw I use the HttpClientModule

import { HttpClientModule } from '@angular/common/http';

Here's a GET example :

getData<T>(func: string) {
    let opts = this.getOptions(func);
    return this.http.get<T>(this.app.url, opts);
}

getOptions(func: string) {
    let opts = {
        params: new HttpParams().set("func", func).set("nodeid", this.app.nodeid),
        headers: new HttpHeaders(),
        withCredentials: true
    };
    return opts;
}

edited May 24 '18 at 14:29

answered May 24 '18 at 13:24

Piero

1,638
1
13
14

Thank you, this work for me in the case of a post. How can i do the same with a get request ? – Laurent Gander May 24 '18 at 13:44
I have a error when i use chrome : _The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8100' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute._ do you know what to do ? – Laurent Gander May 24 '18 at 15:40
you might look at this https://stackoverflow.com/questions/8074665/cross-origin-resource-sharing-with-credentials or create a new question. For this kind of Cross Origin problem I use ng serve with proxy settings, eg ng serve --proxy-config proxy.conf.json. – Piero May 24 '18 at 16:06
If this answers your question can you mark it as an answer please ? thx – Piero May 25 '18 at 07:58

Angular 5 HTTPClient Basic Authorization not working

1 Answers1