Problem with the build


#1

Hello every body.
I’m building an app using HTTP. get(“url”) to login.
When I use the ionic serve it works but when i compile the app and i set it up on my galaxy A5 2017 I got error
Fail
404 Not found for URL
The URL exist and if i copy it from my mobile browser i get a result .
What’s wrong? thanks per advance.


#2

Hi, @cawebdev01

May be this demo is help you right way to implement login functionality in ionic,

Thanks,


#3

Hi addwebsolution,
First thank you so much for your reactivity.
I try to chage the code following step by step the tuto and I rebuild the app and the problem is the same:
the query works on desktop with the serve --lab command but I always have a 404 error when I’m on a real device.
Should I allowed the device to access web? How?
Do you have another idea?
thanks


#4

Hi, @cawebdev01

Could you check your app in your browser and also put screen shot of your error.
and i hope your API is working fine.
thanks


#5

you just have to know that it is a local server and that you can not acces it from de outdoor.
My wifi is configured to acces it.


#6

Hi, @cawebdev01

could you put your code here show i will check your code. (api and ionic)

thanks


#7

auth-service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
 
export class User {
  password : string;
  email: string;
 
  constructor(password: string, email: string) {
    this.password = password;
    this.email = email;
  }
}

@Injectable()
export class AuthService {
  currentUser: User;
  email;
  password;
  constructor(public http: Http){}
  login(credentials){
    return new Promise((resolve, reject) =>{
      let headers = new Headers();
      headers.append('Content-Type', 'appliction/json');

      this.http.post('http://www1.dc.xandmail.com/ca/testbuild_aruba_staff/authenticate.php?login='+credentials.email+'&password='+credentials.password+'&lang=en&NEWMOBILE=1', JSON.stringify(credentials), {headers:headers})
      .subscribe(res => {
        resolve(res.json());
      }, (err) => { 
        reject(err);
      });
    });
  }
 

login.ts

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, ToastController, Platform } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
import { HomePage } from '../home/home';
import { Storage } from '@ionic/storage';

declare var navigator : any;
declare var Connection : any;
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  loading: Loading;
  email: string;
  mail; data;
  password: string;
  loginData = {email:'', password:''};
  public sessionid;
  constructor(
    public storage: Storage, 
    private nav: NavController, 
    private auth: AuthService, 
    private alertCtrl: AlertController, 
    private loadingCtrl: LoadingController,
    private platform: Platform,
    private Alert : AlertController,
    private toastCtrl : ToastController,
  ) { }
  
  public login() {
    this.showLoading();
    this.auth.login(this.loginData).then((result)=> {
      this.loading.dismiss();
      this.data = result;
      if(this.data.status.err_code == 0){
        //console.log(this.data);
        localStorage.setItem('sessionid', this.data.sessionid);
        localStorage.setItem('url', this.data.url);        
        localStorage.setItem('mail', this.data.resources.mailAddress);
        this.nav.setRoot( HomePage );
      } else if(this.data.status.err_code == 1000) {
        this.showError(this.data.status.err_txt);
      } else {
        this.showError("Access Denied")
      }
    }, (err) =>{
      this.loading.dismiss();
      this.presentToast(err);
    })
  }
 
  showLoading() {
    this.loading = this.loadingCtrl.create({
      content: 'Please wait...',
      dismissOnPageChange: true
    });
    this.loading.present();
  }
  presentToast(msg) {
    let toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom',
      dismissOnPageChange: true
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }
  showError(text) {
    this.loading.dismiss();
 
    let alert = this.alertCtrl.create({
      title: 'Fail',
      subTitle: text,
      buttons: ['OK']
    });
    alert.present(prompt);
  }
}

login.html

<!--
  Generated template for the LoginPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>login</ion-title>
  </ion-navbar>

</ion-header>


<ion-content class="login-content" padding>
  <ion-row class="logo-row">
    <ion-col></ion-col>
    <ion-col width-67>
      <img src="http://placehold.it/300x200"/>
    </ion-col>
    <ion-col></ion-col>
  </ion-row>
  <div class="login-box">
    <form (ngSubmit)="login()" #registerForm="ngForm">
      <ion-row>
        <ion-col>
          <ion-list inset>
            
            <ion-item>
              <ion-input type="text" placeholder="Email" name="email" [(ngModel)]="loginData.email" required></ion-input>
            </ion-item>
            
            <ion-item>
              <ion-input type="password" placeholder="Password" name="password" [(ngModel)]="loginData.password" required></ion-input>
            </ion-item>
            
          </ion-list>
        </ion-col>
      </ion-row>
      
      <ion-row>
        <ion-col class="signup-col">
          <button ion-button class="submit-btn" full type="submit" [disabled]="!registerForm.form.valid">Login</button>
        </ion-col>
      </ion-row>
      
    </form>
  </div>
</ion-content>

#8
Hi, @cawebdev01

` this.http.post('http://www1.dc.xandmail.com/ca/testbuild_aruba_staff/authenticate.php?login='+credentials.email+'&password='+credentials.password+'&lang=en&NEWMOBILE=1', JSON.stringify(credentials), {headers:headers})`

Change this line with

`this.http.post('http://www1.dc.xandmail.com/ca/testbuild_aruba_staff/authenticate.php', JSON.stringify(credentials), {headers:headers})`

Thanks

#9

I need to pass the 4 params and it dont’ work just with the url and the array.
I have an unknown error


#10

Have you added all those 4 params in your data in your post request?


#11

I add them in loginData but I could not add the &paramname for each value:
for exemple &login, &password, &lang, &NEWMOBILE


#12

Could you please send the unknown error that you are receiving now?


#13

I got a XHR status = 200 but as no params has been send , my result is empty.{ status:{ err_code:1, err_text:"Failure during authentication!" }, url:"" }

Request URL:http://www1.dc.xandmail.com/ca/testbuild_aruba_staff/authenticate.php
Request Method:POST
Status Code:200 OK
Remote Address:192.168.50.20:80
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source
Access-Control-Allow-Headers:Content-Type, Authorization, X-Requested-With
Access-Control-Allow-Methods:GET, POST
Access-Control-Allow-Origin:*
Access-Control-Max-Age:1000
Connection:close
Content-Length:90
Content-Type:application/json; charset=utf-8
Date:Thu, 21 Sep 2017 14:06:14 GMT
Server:Apache/2.2.3 (CentOS)
X-Powered-By:PHP/5.1.6
Request Headers
view source
Accept:application/json, text/plain, /
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8,fr-FR;q=0.6,fr;q=0.4
Connection:keep-alive
Content-Length:66
Content-Type:appliction/json
Host:www1.dc.xandmail.com
Origin:http://localhost:8100
Referer:http://localhost:8100/?ionicplatform=android&http://localhost:8100/ionic-lab
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36
Request Payload
view source
{email: “ca01”, password: “password”, lang: “en”, NEWMOBILE: “1”}
NEWMOBILE
:
"1"
email
:
"ca01"
lang
:
"en"
password
:
“password”


#14

My fingers are tiring of typing this.

Don’t explicitly instantiate Promises. There is no need to manually stringify payloads or explicitly declare content types. Simply pass an object (for JSON) or a URLSearchParams (for www-form-encoded). Pass only the format that the backend is expecting. Also, the backend must not return a status 200 for an authentication failure. It must return a 401 in that case.