Hello,
I’m developing an Ionic App for iOS and Android.
My user requests a token with the log in and receives this token (API).
This token is saved in the NativeStorage (checked it with alerts and it returns a valid token).
After the login, I want to get my user data from that API. The only way the api returns that user data is when it has a token in its header. Normally I use AuthHttp for this (automatically contains the token in the header) and it has always worked in development builds and it still works in the Android production build.
The only build that does not send the token is in the App Store build for iOS.
I have tried using the regular this.http.get(…) containing the token, the this.authHttp.get(…) and different storages. But server keeps on asking for a token… If I do a get request in postman (with a token in header) it return the user data I want…
Anybody had any issues with this?
Some code:
// app.module.ts
...
import { Http, RequestOptions } from '@angular/http';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
...
export function getAuthHttp(http) {
let storage = new NativeStorage();
return new AuthHttp(new AuthConfig({
noJwtError: true,
globalHeaders: [{'Accept': 'application/json'}],
/// When I commented this, it was giving proper error responses from server API
/*tokenGetter: (() => storage.getItem('id_token').then(token => {
return token;
})),*/
}), http);
}
@NgModule({
...
providers: [
...
{
provide: AuthHttp,
useFactory: getAuthHttp,
deps: [Http]
},
...
]
})
// user-service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { NativeStorage } from '@ionic-native/native-storage';
import { Platform, App, normalizeURL } from 'ionic-angular';
import { AuthHttp } from 'angular2-jwt';
import { User } from '../../models/user-model';
import 'rxjs/add/operator/map';
@Injectable()
export class UserServiceProvider {
apiUrl;
constructor(
public http: HttpClient,
public app: App,
public platform: Platform,
public authHttp: AuthHttp,
public storage: NativeStorage)
{
this.apiUrl = 'https://api.theAPIuse.be';
}
login(body) {
return new Promise((resolve, reject) => {
this.http.post(this.apiUrl+'/get_token', body)
.toPromise()
.then(data => {
let token = data;
this.storage.setItem('id_token', token);
resolve(token);
})
.catch(err => {
reject(err);
});
});
}
getUser() {
return this.authHttp.get(this.apiUrl + '/user')
.map(res => {
let data = res.json();
let location = data.app_location;
let pushes = data.app_pushes;
let avatar = data.avatar_base64;
let email = data.email;
let firstname = data.firstname;
let id = data.id;
let lastname = data.lastname;
let profile = data.profile;
let username = data.username;
return new User(location, pushes, avatar, email, firstname, id, lastname, profile, username);
});
}
}
// login.ts
import { UserServiceProvider } from './../../providers/user-service/user-service';
import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { OverviewPage } from '../overview/overview';
import { NativeStorage } from '@ionic-native/native-storage';
import { LoadingController } from 'ionic-angular';
import { EmailValidator } from './../../validators/email';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
user: FormGroup;
emailControl;
alertError;
constructor(public navCtrl: NavController,
public userService: UserServiceProvider,
public alertCtrl: AlertController,
private fb: FormBuilder,
public storage: NativeStorage,
public loadingCtrl: LoadingController) {
this.user = this.fb.group({
email: ['', [EmailValidator.isValid]],
password: ['', [Validators.required, Validators.minLength(2)]]
});
}
login() {
this.storage.getItem('device_id').then(device_id => {
this.userService.login({email: this.user['email'], password: this.user['password'], device_id: device_id})
.then( token => {
this.storage.getItem('id_token').then(id_token => {
if(id_token === token) {
this.loadingCtrl.create({
content: 'Logging in...',
duration: 5000,
dismissOnPageChange: true
}).present();
setTimeout(() => {
this.navCtrl.push(OverviewPage).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});
}, 500);
}
});
});
})
}
showError(err) {
let prompt = this.alertCtrl.create({
title: 'Error from login.ts',
message: err,
buttons: [
{
text: 'Ok',
role: 'cancel'
}
]
});
prompt.present();
}
}
export interface User {
email: string;
password: string;
}
// profile.ts
import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { UserServiceProvider } from './../../providers/user-service/user-service';
import { User } from '../../models/user-model';
import { ThemeServiceProvider } from './../../providers/theme-service/theme-service';
import 'rxjs/add/operator/map';
@IonicPage()
@Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class ProfilePage {
user
constructor(public navCtrl: NavController, public userService: UserServiceProvider) { }
ionViewWillEnter() {
this.userService.getUser().then( user => {
this.user = user;
});
}
}