Here is the continued article on my previous post for creating a welcome page with login and logout. Today’s post explains how to implement login authentication system for your AngularJS applications. It will show you how to log in with a user and store the user session, so it deals with token based authentication. Since we are using token based authentication, it protects if any unauthorized request is made and notices for a new login if required. This makes your application’s authentication to be more secured compared with any other authentication system. Every user details will be stored in an external database and a PHP based API is used in the backend for handling this authentication. Hope you’ll find it more easily using this as your authentication system in your AngularJS projects. Let’s look into the live demo and follow the below code.
Live Demo Video Tutorial
Ionic 3 and Angular 4: PHP Token Based Restful API User Authentication Login and Signup.
Database Design
To build the user feed system, you have to create two tables such as Users and Feed. You can check my previous tutorials for creating token-based API system.
Users
User table contains all the users registration details.
CREATE TABLE users(
user_id int AUTO_INCREMENT PRIMARY KEY,
username varchar(50),
password varchar(300),
name varchar(200),
email varchar(300));
user_id int AUTO_INCREMENT PRIMARY KEY,
username varchar(50),
password varchar(300),
name varchar(200),
email varchar(300));
Feed
This table contains user daily updates.
CREATE TABLE feed(
feed_id int PRIMARY KEY AUTO_INCREMENT,
feed text,
user_id_fk int
);
feed_id int PRIMARY KEY AUTO_INCREMENT,
feed text,
user_id_fk int
);
Download PHP Restul Project
$git clone https://github.com/srinivastamada/PHP-Slim-Restful.git
Create an Authenstication Service Provider
You have to create an injectable component for API autentication. The following ionic command help you to create files automatically.
$ionic g provider authService
app.module.ts
Now go to src/app/app.module.ts and import authService provider and HttpModule.
Now got src/app/app.module.ts and import Welcome, Login and Signup pages.
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { MyApp } from './app.component';
import { AuthService } from '../providers/auth-service';
import { Welcome } from '../pages/welcome/welcome';
import { Login } from '../pages/login/login';
import { Signup } from '../pages/signup/signup';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
Welcome,
Login,
Signup,
TabsPage
],
imports: [
BrowserModule, HttpModule
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
Welcome,
Login,
Signup,
TabsPage
],
providers: [
StatusBar,
SplashScreen, AuthService,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { MyApp } from './app.component';
import { AuthService } from '../providers/auth-service';
import { Welcome } from '../pages/welcome/welcome';
import { Login } from '../pages/login/login';
import { Signup } from '../pages/signup/signup';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
Welcome,
Login,
Signup,
TabsPage
],
imports: [
BrowserModule, HttpModule
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
Welcome,
Login,
Signup,
TabsPage
],
providers: [
StatusBar,
SplashScreen, AuthService,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
authService.ts
Include post data function for HTTP post access. You will understand more in the youtube video.
import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
let apiUrl = 'http://yourdomain.com/PHP-Slim-Restful/api/';
@Injectable()
export class AuthService {
constructor(public http : Http) {
console.log('Hello AuthService Provider');
}
postData(credentials, type) {
return new Promise((resolve, reject) => {
let headers = new Headers();
this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
.subscribe(res => {
resolve(res.json());
}, (err) => {
reject(err);
});
});
}
}
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
let apiUrl = 'http://yourdomain.com/PHP-Slim-Restful/api/';
@Injectable()
export class AuthService {
constructor(public http : Http) {
console.log('Hello AuthService Provider');
}
postData(credentials, type) {
return new Promise((resolve, reject) => {
let headers = new Headers();
this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
.subscribe(res => {
resolve(res.json());
}, (err) => {
reject(err);
});
});
}
}
signup.ts
Here you have to import AuthService provider and implement with user signup data. Once the API call is succesful, the user data storing into application local storage with accessing data key call userData.
import { Component } from '@angular/core';
import { NavController} from 'ionic-angular';
import { TabsPage } from '../tabs/tabs';
import { LoginPage } from '../login/login';
import { AuthService } from '../../providers/auth-service';
@Component({
selector: 'page-signup',
templateUrl: 'signup.html',
})
export class SignupPage {
responseData : any;
userData = {"username": "","password": "", "name": "","email": ""};
constructor(public navCtrl: NavController, public authService:AuthService ) {
}
signup(){
this.authService.postData(this.userData,'signup').then((result) => {
this.responseData = result;
if(this.responseData.userData){
console.log(this.responseData);
localStorage.setItem('userData', JSON.stringify(this.responseData));
this.navCtrl.push(TabsPage);
}
else{ console.log("User already exists"); }
}, (err) => {
// Error log
});
}
login(){
//Login page link
this.navCtrl.push(LoginPage);
}
}
import { NavController} from 'ionic-angular';
import { TabsPage } from '../tabs/tabs';
import { LoginPage } from '../login/login';
import { AuthService } from '../../providers/auth-service';
@Component({
selector: 'page-signup',
templateUrl: 'signup.html',
})
export class SignupPage {
responseData : any;
userData = {"username": "","password": "", "name": "","email": ""};
constructor(public navCtrl: NavController, public authService:AuthService ) {
}
signup(){
this.authService.postData(this.userData,'signup').then((result) => {
this.responseData = result;
if(this.responseData.userData){
console.log(this.responseData);
localStorage.setItem('userData', JSON.stringify(this.responseData));
this.navCtrl.push(TabsPage);
}
else{ console.log("User already exists"); }
}, (err) => {
// Error log
});
}
login(){
//Login page link
this.navCtrl.push(LoginPage);
}
}
signup.html
Bind the userDetails object with form inputs.
<ion-content padding class="appBackground">
<ion-card>
<ion-card-header>
Registration
</ion-card-header>
<ion-card-content>
<ion-list>
<ion-item>
<ion-label stacked>Name</ion-label>
<ion-input type="text" [(ngModel)]="userData.name"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Email</ion-label>
<ion-input type="text" [(ngModel)]="userData.email"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Username</ion-label>
<ion-input type="text" [(ngModel)]="userData.username"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input type="password" [(ngModel)]="userData.password"></ion-input>
</ion-item>
<button ion-button full color="success" (click)="signup()">Sign up</button>
<a href="#" (click)="login()">Login Page</a>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>
<ion-card>
<ion-card-header>
Registration
</ion-card-header>
<ion-card-content>
<ion-list>
<ion-item>
<ion-label stacked>Name</ion-label>
<ion-input type="text" [(ngModel)]="userData.name"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Email</ion-label>
<ion-input type="text" [(ngModel)]="userData.email"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Username</ion-label>
<ion-input type="text" [(ngModel)]="userData.username"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input type="password" [(ngModel)]="userData.password"></ion-input>
</ion-item>
<button ion-button full color="success" (click)="signup()">Sign up</button>
<a href="#" (click)="login()">Login Page</a>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>
login.ts
You have to follow the same like signup module.
home.ts
Reading the application local storage data and binding with userDetails. Logout function is clearing the local storage data and redirecting to the welcome page with time deplay option.
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
userDetails : any;
responseData: any;
userPostData = {"user_id":"","token":""};
constructor(public navCtrl: NavController, public authService:AuthService) {
const data = JSON.parse(localStorage.getItem('userData'));
this.userDetails = data.userData;
this.userPostData.user_id = this.userDetails.user_id;
this.userPostData.token = this.userDetails.token;
}
backToWelcome(){
const root = this.app.getRootNav();
root.popToRoot();
}
logout(){
localStorage.clear();
setTimeout(() => this.backToWelcome(), 1000);
}
}
import { NavController } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
userDetails : any;
responseData: any;
userPostData = {"user_id":"","token":""};
constructor(public navCtrl: NavController, public authService:AuthService) {
const data = JSON.parse(localStorage.getItem('userData'));
this.userDetails = data.userData;
this.userPostData.user_id = this.userDetails.user_id;
this.userPostData.token = this.userDetails.token;
}
backToWelcome(){
const root = this.app.getRootNav();
root.popToRoot();
}
logout(){
localStorage.clear();
setTimeout(() => this.backToWelcome(), 1000);
}
}
home.html
Binding the local storage data with HTML template.
<ion-header>
<ion-navbar>
<img ion-right src="assets/imgs/bananalogo.png" class="navbarLogo" />
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to {{userDetails.name}}</h2>
<h3>Email: {{userDetails.email}}</h3>
<button ion-button color="primary" (click)="logout()">Logout</button>
</ion-content>
<ion-navbar>
<img ion-right src="assets/imgs/bananalogo.png" class="navbarLogo" />
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to {{userDetails.name}}</h2>
<h3>Email: {{userDetails.email}}</h3>
<button ion-button color="primary" (click)="logout()">Logout</button>
</ion-content>
Build iOS App
Following commands for executing Xcode build, watch the video tutorial you will understand more.
$ cordova platform add ios
$ ionic build ios
$ ionic build ios
Build Android App
Open Android build using Android SDK>
$ cordova platform add android
$ ionic build android
$ ionic build android
Previous Video Tutorial
Ionic 3 and Angular 4 Create a Welcome Page with Login and Logout.
could you just make upload Ionic 3 and Angular 4 json parsing Example and Push Notification pls.
ReplyDeleteThanks
-Sapan
This is video too much helpfull and work for me
ReplyDeleteThanks
-sapan
Thanks man so helpfull keep i up
ReplyDeleteyour tutorials helping to me lot, thanks
ReplyDeletewhy there is not error message if i use random account
ReplyDeleteGreat tutorial thanks
ReplyDeleteError: this.userDetails is undefined
ReplyDeleteClear your browser local storage. Go to developer tools -> application -> Clear Site Data
DeleteThank you so much. Ok After log in, user can insert some details to other table How can we do ... can you please help me ? like want to insert feed data from ionic.
DeleteHi Srinivas, some how I've done inserting data from ionic.
DeleteOne thing I want to know how to display toast msg when same user signup like "user already existed" ?
{"error":{"text":"Enter valid data"}}
ReplyDeleteam also getting this error {"error":{"text":"Enter valid data"} please help.!
ReplyDeleteThe video is very helpful. Thanks for the share
ReplyDeleteHelp!!
ReplyDeleteXMLHttpRequest cannot load http://192.168.1.10/slimrest/index.php/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
I was error too, u did edit it ? Can u help me?
Delete
Deleteif (isset($_SERVER['HTTP_ORIGIN'])) {
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400'); // cache for 1 day
}
// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
exit(0);
Add these lines to the php file on top
ERROR DOMException [NetworkError: "A network error occurred."
ReplyDeletecode: 19
nsresult: 0x80530013
location: http://localhost:8100/build/polyfills.js:3]
Have an example of registration With SMS code using Restfull API??
ReplyDeletei got this error:
ReplyDeleteProperty 'app' does not exist on type 'HomePage'
please help
yeah, me too
Deleteimport { App, NavController } from 'ionic-angular';
Deleteconstructor(public navCtrl: NavController, public appCtrl: App, public authService:AuthService)
const root = this.appCtrl.getRootNav();
{error: {…}}error: text: "Enter valid data" iam getting error while signup
ReplyDeleteDo you fix it? i am getting the same error!!
DeleteGo to Your index.php on the signup function..look for where it says "echo " and delete it..also just 2-3 lines below it says "echo here"..delete that too..your erroris fixed
Deletehi, when i'm submitting the form using yours api module, then we get an error of "XMLHttpRequest cannot load http://mywebsite.com/Home/Login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access."
ReplyDeletemy api is build in .net , so can you help me, coz im new to ionic
hi
Deleteif you install this plugin, your problem solved
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related
hi , im new to ionic so i'll see your video, then apply same on my project, but when we run the postData function it returns "XMLHttpRequest cannot load http://mywebsite.com/Home/Login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access."
ReplyDeleteand this API is made on .NET
This comment has been removed by the author.
ReplyDeleteWork like Charm, i have learnt a lot from it greatly, thanks
ReplyDeletenever mind my previous comment requesting help on alertbox. i got it working :D
ReplyDelete@CJD, kindly show how you fixed it. Thanks
Deletehello sir. please i am getting this error upon signup. my tabs page is not showing and my signup datas are storing into my database.
ReplyDeleteRuntime Error
Unexpected token < in JSON at position 0
Stack
SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse ()
at Response.Body.json (http://localhost:8100/build/vendor.js:66426:25)
at SafeSubscriber._next (http://localhost:8100/build/main.js:324:29)
at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/vendor.js:36172:16)
at SafeSubscriber.next (http://localhost:8100/build/vendor.js:36119:22)
at Subscriber._next (http://localhost:8100/build/vendor.js:36059:26)
at Subscriber.next (http://localhost:8100/build/vendor.js:36023:18)
at XMLHttpRequest.onLoad (http://localhost:8100/build/vendor.js:66855:38)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9967)
at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4499:37)
Did you solve this problem? Got the same here...
DeleteDo you have any idea? I got the same issue.
DeletePls help.
im having this problem too
Deleteplease help with this problem. i'm having it too
DeleteWhat happens when you start the session in two devices?
ReplyDeleteHi Srinivas i have two errors,
ReplyDeleteone is when i try to register a user and show me a error:
"{error: {…}}error: text: "Enter valid data"
and two, i register a user in mysql and trying to login show me this error
"Bad request wrong username and password"
can you help me please? i'm trying to understand web services
Greetings
Hi, Look like you haven't completed the registration process. Give valid information and try, you will get inserted user information data set.
DeleteSyntaxError: Unexpected end of JSON input
ReplyDeleteHow to get details of user after login using token value.... thanks....
ReplyDeleteTake a look at this link https://www.9lessons.info/2017/07/ionic-angular-JSON-parsing-json-APIs.html
DeleteHai sir, I get error {"error":{"text":"Enter valid data"}} while i try signup function . please help !
ReplyDeleteHi, I am new. Where do I physically store the api files?
ReplyDeleteHi! Where do I store the api files?
ReplyDeleteInstall XAMPP(Apache PHP MySQL) server and copy api file in htdocs folder.
DeleteHi sir,
ReplyDeleteThis code error after i m update cordove to version 7.1.0 :
Typescript Error
Argument of type '{ headers: Headers; }' is not assignable to parameter of type 'RequestOptionsArgs'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'Headers'. Two different types with this name exist, but they are unrelated. Property 'keys' is missing in type 'Headers'.
D:/ionic/ionic-welcome/src/providers/auth-service/auth-service.ts
this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
.subscribe(res => {
Hi Sir,
ReplyDeleteError when build or run on android device
hi sir,
ReplyDeletei like yours lessons. thanks so much.
My question is; what is your text editor software you are using to open projet?
Thanks so much
Visual Code with Atom theme
DeleteThanks
Deletewhen i apply setTimeout function... no action performed :(
ReplyDeletewhen i use setTimeout function .. no action perform :(
ReplyDeleteIf any tutorial available Ionic with C#.net web api code? pls help?
ReplyDeleteI resolved the error " Enter Valid Data". Basically, we have data validity check in our API. So PREG_MATCH does this logic. If you provide valid credentials while you enter the details for Sign-up. it works fine. For example, make sure you have alphanumeric value for password & right input for email & so on. It should work fine!..
ReplyDeleteThank you Srinivas!, very nice tutorial
my first ionic app create using this post...
ReplyDeletevery helpful post..
thanks very much...
Hi Srinivas,
ReplyDeleteThe error is displayed when calling singup in app
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'user_id' of undefined
TypeError: Cannot read property 'user_id' of undefined
at new HomePage (home.ts:21)
What´s wrong?
Modify following code.
DeletelocalStorage.setItem('userData', JSON.stringify(this.responseData));
this.navCtrl.push(TabsPage);
to
if(this.responseData.userData)
{
localStorage.setItem('userData', JSON.stringify(this.responseData));
this.navCtrl.push(TabsPage);
}
console.log(this.responseData.userData) = undefinded ?? why? pls help!
DeleteConsole.log(this.resposeData.userData)is giving undefined result for me too. Anyone has solved the issue...
Deletenice post bro... i really like that... you helping me to learn about ionic...
ReplyDeleteHi Srinivas,
ReplyDeleteat first I want to thank you for this great tuturial.
I have problem when I try to Signup to my Database. The user is created in my Database, but I've get this Error in my Browser:
ERROR
SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 2 of the JSON data
Stack trace:
Body.prototype.json@http://localhost:8100/build/vendor.js:66955:20
[155]/AuthServiceProvider.prototype.postData/</<@http://localhost:8100/build/main.js:143:25
SafeSubscriber.prototype.__tryOrUnsub@http://localhost:8100/build/vendor.js:33683:13
SafeSubscriber.prototype.next@http://localhost:8100/build/vendor.js:33630:17
Subscriber.prototype._next@http://localhost:8100/build/vendor.js:33570:9
Subscriber.prototype.next@http://localhost:8100/build/vendor.js:33534:13
onLoad@http://localhost:8100/build/vendor.js:67448:21
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask@http://localhost:8100/build/vendor.js:4973:24
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10815
F</h</e.invokeTask@http://localhost:8100/build/polyfills.js:3:16787
p@http://localhost:8100/build/polyfills.js:2:27646
v@http://localhost:8100/build/polyfills.js:2:27893
core.js:1350
defaultErrorLogger
core.js:1350
ErrorHandler.prototype.handleError
core.js:1411
IonicErrorHandler.prototype.handleError
ionic-error-handler.js:61
next
core.js:5376:134
EventEmitter.prototype.subscribe/schedulerFn<
core.js:4223:34
SafeSubscriber.prototype.__tryOrUnsub
Subscriber.js:238
SafeSubscriber.prototype.next
Subscriber.js:185
Subscriber.prototype._next
Subscriber.js:125
Subscriber.prototype.next
Subscriber.js:89
Subject.prototype.next
Subject.js:55
EventEmitter.prototype.emit
core.js:4203:22
onHandleError/<
core.js:4651:48
F</l</t.prototype.invoke
http://localhost:8100/build/polyfills.js:3:14974
F</c</r.prototype.run
http://localhost:8100/build/polyfills.js:3:10124
NgZone.prototype.runOutsideAngular
core.js:4577:47
onHandleError
core.js:4651
F</l</t.prototype.handleError
http://localhost:8100/build/polyfills.js:3:15054
F</c</r.prototype.runTask
http://localhost:8100/build/polyfills.js:3:10869
F</h</e.invokeTask
http://localhost:8100/build/polyfills.js:3:16787
p
http://localhost:8100/build/polyfills.js:2:27646
v
http://localhost:8100/build/polyfills.js:2:27893
I can't finde the mistake. Can you help me with this?
Thank you in advance
Check your signup resful api with chrome POSTman
DeleteThank you for your reply. With Postman I get no error. In Chrome I get this error:
DeleteERROR SyntaxError: Unexpected token < in JSON at position 1
at JSON.parse ()
at Response.Body.json (http.js:1063)
at SafeSubscriber._next (auth-service.ts:21)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.next (Subscriber.js:185)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at XMLHttpRequest.onLoad (http.js:1556)
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.js:4620)
Please take the update, fixed the signup part.
Delete$git pull
help sir..
DeleteERROR SyntaxError: Unexpected token < in JSON at position 1
at JSON.parse ()
at Response.Body.json (http.js:1063)
at SafeSubscriber._next (auth-service.ts:28)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.next (Subscriber.js:185)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at XMLHttpRequest.onLoad (http.js:1556)
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.js:4620)
Hello I have the same error how to do? Do you have a last update on which file?
DeleteHi Srinivas,
ReplyDeleteI am new to IONIC
I am getting this error when trying to signup.
polyfills.js:3 POST http://localhost:8100/undefinedsignup 404 (Not Found)
The data is inserting in postman. but not from app.
Please help
Thanks in advance
First i have to thanks for this great article....only i have not been able to get it to work..i get the following error.
ReplyDeleteCan't resolve all parameters for HomePage: ([object Object], ?).
pls help
{"error":{"text":SQLSTATE[HY000] [1049] Unknown database 'banan'}}
ReplyDeletei am getting this error in postman
Please help!
ReplyDeleteI'm getting {"error":{"text":"Enter valid data"}} when i try to test the signup endpoint from fiddler
This is how my request body looks:
{
username: "Tamada",
password: "ade123",
email: "[email protected]",
name: "Srinivas Tamada"
}
I also got tis problem. r u fix it already? can help me?
DeleteI taken the last version but In Chrome I get this error anyways:
ReplyDeleteERROR SyntaxError: Unexpected token < in JSON at position 1
at JSON.parse ()
at Response.Body.json (http.js:1063)
at SafeSubscriber._next (auth-service.ts:21)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.next (Subscriber.js:185)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at XMLHttpRequest.onLoad (http.js:1556)
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.js:4620)
And when i try to login i'm stucked at "Please Wait" pop-up
Help me, thanks
I have error in auth-service this.http.post(apiurl+type, JSON.stringify(credentials), {headers:headers}).subscribe(res =>{
ReplyDeleteresolve(res.json());
Hi Srinivas,
ReplyDeleteThis code error after i m update cordove to version 7.1.0 :
Typescript Error
Argument of type '{ headers: Headers; }' is not assignable to parameter of type 'RequestOptionsArgs'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'Headers'. Two different types with this name exist, but they are unrelated. Property 'keys' is missing in type 'Headers'.
D:/ionic/ionic-welcome/src/providers/auth-service/auth-service.ts
this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
.subscribe(res => {
Im using cordova v8.0.0 and Im getting the same error, can you please tell me how did you solve it. Thanks in advance
Delete404 Page Not Found
ReplyDeletewhen trying to access signup and so as other functions. Please help. Thanks
Please give me solution for this error
ReplyDeleteWhen I submit data at time I get error invalid character and data not inserted into database
Please take the Git code update
Deletehow to get git code update, please give full command line.
DeleteThis is video too much help-full and work for me
ReplyDeleteThanks bro.
tengo este error core.js:1350 ERROR SyntaxError: Unexpected token < in JSON at position 1
ReplyDeleteat JSON.parse ()
at Response.Body.json (http.js:1063)
at SafeSubscriber._next (auth-service.ts:20)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.next (Subscriber.js:185)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at XMLHttpRequest.onLoad (http.js:1556)
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.js:4620)
when click submit button i got
ReplyDeleteTypeError: res.json is not a function
at SafeSubscriber._next (http://localhost:8100/build/main.js:519:29)
at SafeSubscriber.__tryOrUnsub .......
please help,
(i'm using ionic 3 angular 5)
In HttpClientModule, json is a default option and you do not need to parse the res to json.
DeleteChange "resolve(res.json());" to "resolve(res);" and you are good to go.
nice
DeleteI having error.I don't know how to solve
ReplyDeleteRuntime Error Uncaught (in promise): invalid views to insert
These error came when i click signup or login buttons
When I Access "localhost/PHP-SLim-Restful/api" It Shows 404 PAge Not Found Error
ReplyDeleteHow To Solve this?
Hi, I Followed your video tutorials,when users signup,that those datas are stored correctly..but my issue is,when clicking the signup button its not moving to tabs page...but in console there is no issue...have any idea??
ReplyDeletehi, i can't acces to this.responseData.userData, i've follow exactly your tuto but i can't find a solution.
ReplyDeleteHi my developer tools in google chrome, console log shows "no Access at home.ts line 53", while I have already sign up and the page directed me to welcome page with a please wait and a loading circle in the middle of page that goes on for ever please help how to get rid of this "please wait message" . thanks
ReplyDeletehi srinivas, thanks for the tutorials.
ReplyDeleteI want to ask something..
why my signup button is not working, I've done the same thing as you did??
Internal Server Error 500
ReplyDelete500 Internal Server Error
ReplyDeleteI have this error : Uncaught (in promise): [object Object]
ReplyDeleteHii all,
ReplyDeleteThis errors comes from your api index.php file. Error in signup function.
Just do 2things then your app running well. Just remove or comment out this 2 line of code.
1. //echo $email_check.'
'.$email;
2. //echo 'here';
Hello M Srinivas, I want you to help me about something, I followed you tutorial and it help me so much.
ReplyDeleteNow I want to fetch data from a table and displayed it in a view. How do I proccess?
Thanks in advance!
code api plzz
ReplyDeleteHello there everybody, I get the 404 Page Not Found, no matter what I tr to do...
ReplyDeletethis is what i get from the browser:
ReplyDeleteObject not found!
The requested URL was not found on this server. If you entered the URL manually please check your spelling and try again.
If you think this is a server error, please contact the webmaster.
Error 404
localhost
Apache/2.4.23 (Win32) OpenSSL/1.0.2h PHP/5.6.28
404 Page Not Found ?
ReplyDeletein my localhost
Enable mod_rewrite extension for PHP. This will support .htaccess file for redirections.
DeletePossible use XAMPP it comes with better settings
I managed to signup and the data entered the database but at the app display runtime error "unexpected token S in JSON at position 17"
ReplyDeleteHi ,
ReplyDeleteafter testing code , I have an error with http headers give this message :
Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://localhost/PHP-Slim-Restful/api/signup. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.
how can I solve it please
In my signup.ts file
ReplyDeleteresponseData : any;
userData = {
'customer': {
"email":"",
"firstname":"",
"lastname":"",
"storeId":1,
"websiteId":1
},
"password":""
};
signup() {
//REST API connection to Magento 2 for Siging up a new customer
//this.navCtrl.push(HomePage);
this.authServiceProvider.postData(this.userData, "signup").then((result) => {
this.responseData = result;
if(this.responseData.userData){
console.log(this.responseData);
localStorage.setItem('userData', JSON.stringify(this.responseData));
this.navCtrl.setRoot(HomePage);
} else {
console.log("User already exists");
}
}, (err) => {
//connection failed error message
});
}
when i do console.log(this.responseData); it shows NULL what am doing wrong ?
Hi Shrinivas, I've copied he same CLI "ionic g provider authService", afetr ionic serve command i'm getting "Error: Cannot find module "../providers/auth-service" ".
ReplyDeleteThe auth-service.ts code, That i've got ==>
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
/*
Generated class for the AuthServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class AuthServiceProvider {
constructor(public http: HttpClient) {
console.log('Hello AuthServiceProvider Provider');
}
}
Please help me
How to solve this error
ReplyDeleteTypeError: res.json is not a function
at SafeSubscriber._next (http://localhost:8100/build/main.js:135:29)
at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/vendor.js:35277:16)
at SafeSubscriber.next (http://localhost:8100/build/vendor.js:35224:22)
at Subscriber._next (http://localhost:8100/build/vendor.js:35164:26)
at Subscriber.next (http://localhost:8100/build/vendor.js:35128:18)
at MapSubscriber._next (http://localhost:8100/build/vendor.js:117951:26)
at MapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:35128:18)
at FilterSubscriber._next (http://localhost:8100/build/vendor.js:119697:30)
at FilterSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:35128:18)
at MergeMapSubscriber.notifyNext (http://localhost:8100/build/vendor.js:62289:30)
Hi Srinivas, when running in Chrome browser and on device i amd getting the following error
ReplyDeletecore.js:1350 ERROR SyntaxError: Unexpected token < in JSON at position 1
at JSON.parse ()
at Response.Body.json (http.js:1063)
at SafeSubscriber._next (auth-service.ts:26)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.next (Subscriber.js:185)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at XMLHttpRequest.onLoad (http.js:1556)
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.js:4620)
Any ideas ?
i have problem not able to redirect tabpage after successful signin or signup where return status 200.
ReplyDeletethis.navCtrl.push(TabsPage);
Please help
Hi Srinivas, have you considering update the lesson for ionic 4?
ReplyDeleteHi Srinivas, have you considering update the lesson for ionic 4?
ReplyDeletewhere is login page html and calling login function to server on ts???
ReplyDelete