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.
Hi, @cawebdev01
May be this demo is help you right way to implement login functionality in ionic,
Thanks,
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
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
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.
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>
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
I need to pass the 4 params and it dont’ work just with the url and the array.
I have an unknown error
Have you added all those 4 params in your data in your post request?
I add them in loginData but I could not add the ¶mname for each value:
for exemple &login, &password, &lang, &NEWMOBILE
Could you please send the unknown error that you are receiving now?
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”
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.