Ionic login authentication?


#1

I am trying to do login function in my application but I get this error "response with status 0 URL:Null"
and I was hoping someone can help me to fix the problem and can I retrieve the user ID as token or session so I can pass this infon
between pages?

AuthService

login(credentials) {
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.http.post ('http://localhost:8888/PeopleService/auth/lognin.php', JSON.stringify(credentials), {headers: headers})
          .subscribe(res => {
            resolve(res.json());
          }, (err) => {
            reject(err);
          });
    });
  }

login.ts

loginData = { PHONENUM:'', PASSWORD:'' };

doLogin() {
    this.showLoader();
    this.authService.login(this.loginData).then((result) => {
      this.loading.dismiss();
      this.data = result;
      this.navCtrl.setRoot(HomePage);
    }, (err) => {
      this.loading.dismiss();
      this.presentToast(err);
    });
  }

 showLoader(){
    this.loading = this.loadingCtrl.create({
        content: 'Authenticating...'
    });

    this.loading.present();
  }

login html


    <ion-content padding>
  <h2>Please, Login</h2>
  <form (submit)="doLogin()" name="login" id="login">
    <ion-item>
      <ion-label stacked>Username</ion-label>
      <ion-input [(ngModel)]="loginData.PHONENUM" name="PHONENUM" type="text" placeholder="Username" ></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>Password</ion-label>
      <ion-input [(ngModel)]="loginData.PASSWORD" name="PASSWORD" type="password" placeholder="Password"></ion-input>
    </ion-item>
    <button ion-button block type="submit">
      Login
    </button>
  </form>
</ion-content>

and final the api

 if(isset(($_POST['login'])){
   $password=$_POST['PASSWORD'];
   $phone=$_POST['PHONENUM'];

     $password = $conn->real_escape_string($password);
     $phone = $conn->real_escape_string($phone);
        $arr = array();


 $sql = "SELECT EMPID FROM employee WHERE PASSWORD=$password AND PHONENUM=$phone";
        $select_users = $conn->query($sql);
        if(!$select_users){
            die('Query Failed' . mysqli_error($conn));
        }
        while($row = $select_users->fetch_assoc()) {
               $arr= $row


        } 

echo json_encode($arr);

#2

status 0 is never good. Look at the console and network tab of your dev tools for more information what is going wrong and why. There should be more information.


#3

[Error] Failed to load resource: Preflight response is not successful (Login.php, line 0)
[Error] XMLHttpRequest cannot load http://localhost:8888/PeopleService/auth/lognin.php. Preflight response is not successful

this is the error I get in the console


#4

Two options:

  1. Read and understand this, you will learn a lot about modern browser security: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
  2. Use a CLI Service Proxy: https://github.com/ionic-team/ionic-cli#service-proxies (Problem only exists while testing locally, this is a workaround)

PS: Might be there are more CORS issues later - but you will stumble over them then.