Login Authentication in ionic 2 with php file

Ionic Framework ionic-v3
1

Hey Guys,

Any help please , i create a simple form for login in ionic 2 and a php file to authenticate this login but i dont how to run the php file from my ionic app i use may i should add some script in the ts file but honsetly i dont how to do it :confused:
this are my html :

    <ion-item>
      <ion-label floating>Username</ion-label>
      <ion-input type="text" [(ngModel)]="username"></ion-input>
    </ion-item>

    <ion-item>
          <ion-label floating>Password</ion-label>
          <ion-input type="password" [(ngModel)]="password"></ion-input>
        </ion-item>

        <button  block [navPush]="HomePage" >
          <ion-icon name="person"></ion-icon> Login </button>

Thank you in advance
image

2

We donā€™t see much of you code here but here how it should normally works. PHP must run on a seperate server, maybe local eg: wamp server. Then in your php you must handle http request like POST, GET depending on your needs. Normally with a login you do a POST request. On Ionic side you must import Http from angular/http and then use it to make your call to your php script file.

Login.ts

this.data = {username: "username", password: "password"}; // this should be replace by your form data
this.http.post('url_to_php_script', JSON.stringify(this.data), {headers: {'Content-Type': 'application/json'}})
.map(
      res => console.log("res", res.json()), // res.json() -> this is your response from your php script
      error => console.log("err", error) // if there's any error with you request
);

PHP

$rawData = file_get_contents("php://input");

$rawData in the PHP script should contain everything about your request sent from your Ionic app. You should read more about it!

You could also take this to another level and create your own providers to make your request inside it and make calls to your provider from your page component instead of calling http.post directly.

Hope this help!

3

@skoff first thx u for your reply :blush:
second : where i should insert this.dataā€¦ inside the constructor???
and i should import the http like this : import {Http} from ā€˜angular/httpā€™;
it give an error : ā€œ[ts] Cannot find module ā€˜angular/httpā€™.ā€

Regards

4

@Gatewayapp in my example this.data represent your form data, the best way to do it is to in fact create an object that will encapsulate all your form data which you can then send to your php script.

login.ts

import {Http} from '@angular/http';
...................................
export class HomePage {
loginData = {};
...................................
login() {
      this.http.post.('url_to_php', JSON.stringify(this.loginData))
         .subscribe(res => {
            // res.json() will contain the response from your php script
          }
      });
  }

login.html

<ion-item>
   <ion-label fixed>Username</ion-label>
   <ion-input type="text" [(ngModel)]="loginData.Username"></ion-input>
</ion-item>
<ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input type="password" [(ngModel)]="loginData.Password"></ion-input>
</ion-item>
<button primary id="login" (click)="login()">Login</button>

The login() method will be called from the Login button. Then in this method it gets this.loginData which contains all your form data. Because in each input of your form you set [(ngModel)]=ā€œloginData.Usernameā€ etc. I think you should more about the basics of Angular 2 and Ionic 2 also it could help you understand better how it works!

5

Hi I am totally new to ionic,
I was wondering, would this still work with all the updates made to ionic 2, and may i have a sample of how the php file would look like.

Thanks.