Ionic rest call cant catch http code 401

Ionic Framework ionic-v3
1

I cant catch HTTP 401 error code:
If the user credentials are incorrect the server returns 401, this is not handled by Ionic 2 on ios and I have not found any solution for how to solve this. I am unable to identify if the user has typed in invalid credentials with the call:

this.mobileAppService.fetchGeneralAppSettings(this.login).subscribe(generalAppSettings => {
    ...
},  err => { console.log("Got Error--> " + err); },
    () => console.log("Finished ? ")  );



Bellow are some code for the rest call:

    import { Injectable } from '@angular/core';
    import { Http, Headers, Response } from '@angular/http';
    import { Observable } from 'rxjs/Rx';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/do';  // debug
    import 'rxjs/add/operator/catch';
    import 'rxjs/add/observable/throw';

    import { GeneralAppSettings } from '../models/general-app-settings';
    import { UserData } from '../providers/user-data';
    import { LastLogin } from '../models/last-login';

    @Injectable()
    export class MobileAppService {

      constructor(public http: Http, public userData: UserData) { }
          createAuthorizationHeader(headers: Headers, lastLogin: LastLogin) {
            headers.append('Accept', 'application/json');
            headers.append('Content-Type', 'application/json');
            headers.append('Authorization', 'Basic ' + btoa(lastLogin.username + ':' + lastLogin.password));
          }

          fetchGeneralAppSettings(lastLogin: LastLogin): Observable<GeneralAppSettings> {
            let headers = new Headers();
            this.createAuthorizationHeader(headers, lastLogin);

            return this.http.get(
              "https://myUrl/secure/json/mobileAppService/fetchGeneralAppSettings?versionCode=48"
              , { headers: headers }
            ).map((res:Response) => <GeneralAppSettings>res.json())
              .do((res:Response) => console.log(" Received Data:', JSON.stringify(res)))  // debug
              .catch(this._serverError);
          }

           _serverError(err: any) {
                console.log('sever error:', err);  
                if(err instanceof Response) {
                    return Observable.throw(err.json().error || 'backend server error');
                }
                return Observable.throw(err || 'backend server error');
           }
    ...
2

@stigwa Did you found any solution? I am also having the same issue to pass the user name & password in GET request. I even tried appending the credentials in URL by encoding it because password contains special char ‘@’ but no success when calling the web service through Mobile App. It works in case of web browser.
e.g. http://username:password@123@example.com/path

3

This is a very bad idea. It results in cleartext passwords being stored in server logs. You should be using authorization HTTP headers for protected GET requests, and credentials like username/password should be passed in the body of POST requests.

4

@rapropos Correct. I am very well aware that this not the right way to implement but I was just trying to confirm whether server really authenticate the user credentials or not. Anyway the issue is resolved now. Thanks you Robert.

5

Yes I have solved this now. IOS did not return http code 401, but it did work on Android. I solved this by changing from basic authentication to form based authentication. This is a more secure solution and the 401 issue is as far as I can see a IOS related problem. I have now enabled form based authentication on my Wildfly server for all REST interfaces.

Bellow are some code from my Ionic 2 project (I have not included any serverside code.)

I perform a login post from my ionic code and if all goes well i parse out the JSESSIONID.

formLogin(lastLogin: LastLogin)  {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('j_username', lastLogin.username);
    urlSearchParams.append('j_password', lastLogin.password);
    let body = urlSearchParams.toString()

    return this.http.post("https://server/projectUrlToSecureArea/j_security_check", body, {headers:headers})
      .map((response: Response) => {
        console.log("************** ************** response = " + JSON.stringify(response));
        return response;
      });
  }

Logout sample, posts the sessionid to my logout.jsp page where I on the serverside invalidates the session :

  formLogout(jSessionId: string)  {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('JSESSIONID', jSessionId);

    return this.http.post(this.userData.getLogoutUrl(), "", {headers:headers})
      .map((response: Response) => {
        return response;
      });
  }

In later REST calls to the server I put the JSESSIONID in the header.

In the example bellow i have implemented the interfaces for GeneralResponse and User and therefore i get a typed response:

getUserInfoCurrentUser(lastLogin: LastLogin): Observable<GeneralResponse<User>> {
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    headers.append('Content-Type', 'application/json');
    headers.append('JSESSIONID', lastLogin.jSessionId);

    let url: string = this.userData.getMobileAppServiceBaseUrl();
    url = url + "getUserInfoCurrentUser";

    return this.http.get(
      url
      , { headers: headers }
    ).map((res:Response) => <GeneralResponse<User>>res.json());
  }
6

@stigwa i used this code but can not catch http code 401 in ios 10.3.3
formLogin(lastLogin: LastLogin) {
let headers = new Headers();
headers.append(‘Content-Type’, ‘application/x-www-form-urlencoded’);

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', lastLogin.username);
urlSearchParams.append('password', lastLogin.password);
let body = urlSearchParams.toString()

return this.http.post(this.base_url +"/login", body, {headers:headers})
  .map((response: Response) => {
    console.log("************** ************** response = " + JSON.stringify(response));
    return response;
  });

}