Problem with the build

cawebdev01 · 2017-09-21 09:24:55 UTC

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.

addwebsolution · 2017-09-21 09:52:52 UTC

Hi, @cawebdev01

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

Thanks,

cawebdev01 · 2017-09-21 12:05:29 UTC

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

addwebsolution · 2017-09-21 12:09:45 UTC

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

cawebdev01 · 2017-09-21 12:26:15 UTC

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.

addwebsolution · 2017-09-21 12:44:45 UTC

Hi, @cawebdev01

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

thanks

cawebdev01 · 2017-09-21 13:02:46 UTC

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>

addwebsolution · 2017-09-21 13:14:01 UTC

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

cawebdev01 · 2017-09-21 13:30:45 UTC

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

addwebsolution · 2017-09-21 13:38:10 UTC

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

cawebdev01 · 2017-09-21 13:47:39 UTC

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

addwebsolution · 2017-09-21 13:52:04 UTC

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

cawebdev01 · 2017-09-21 14:12:51 UTC

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”

rapropos · 2017-09-21 21:38:19 UTC

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.