Angular 6 and PHP: can't send a parameter via HttpParams to PHP script

Question

I have this API function:

public function login($conn, $user){
    $login = "SELECT username FROM login WHERE username=:user";
    $execLogin = $this->conn->prepare($login);
    $execLogin->bindValue(":user", $user);
    $execLogin->execute();
    $res = $execLogin->rowCount();

    try{
        return $res;
    }
    catch(PDOException $e)
    {
        return $e->getMessage();
    }
}

Here is the php script when a login button is clicked:

<button id="btn-login"  (click)="login()" [disabled]="!loginGroup.valid" class="btn btn-success">Login </button>

A script of the login function will run:

<?php

require_once('../api.php');

//Getting username and password from Angular

$user = $_POST['user'];

$newApi = new api();
$conn = $newApi->connection();
$res = $newApi->login($conn, $user);

?>

Here is the methods used in typescript. In the API service:

login(username, password)
  {
    let headerOptions = new HttpHeaders();
    headerOptions.append('Access-Control-Allow-Origin', '*');
    headerOptions.append('Access-Control-Request-Headers', '*');
    headerOptions.append('Content-Type', 'application/json');
    headerOptions.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS');


    this.credentials = {user: username, pass: password};
    const httpParams = new HttpParams();
    httpParams.set('user', username);
    httpParams.set('pass', password);
    //console.log("hi "+ this.credentials);
    return this.http.post('http://dev.local/scripts/login.php', {username, password},  {
      observe: 'response',
      responseType: 'text',
      headers: headerOptions

    }).pipe(map(
        res=>{

          console.log(res)
        },
        err=>
          console.log(err)
      ))
  }

And on button click:

login(){
    let user = this.loginGroup.get('username').value;
    let pass = this.loginGroup.get('password').value;
    this.auth.login(user, pass).subscribe(
      (data)=>{

        console.log(data)
      },
      (error)=>{
        console.log(error)
      }
    )
  }

The problem is that I always see the following error at the network tab of the console:

call to undefined variable user at line 7

It seems that the user is not send by typescript methods to PHP scripts.

EDIT

David · Answer 1 · 2018-07-13T12:22:42.397

If you use HttpParams, note that the class is immutable (Documentation)

So you would need to do this

const httpParams = new HttpParams().set('user', username).set('pass', password);

Edit: Your PHP script is expecting form encoded values, so you need to do something like this

let headerOptions = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');

return this.http.post('http://dev.local/scripts/login.php',
    httpParams.toString(), {
  observe: 'response',
  responseType: 'text',
  headers: headerOptions

}
);

Method #2

If you want to send data as json, then you need to modify your PHP script to parse the request's body

$jsonInput = file_get_contents('php://input');
$jsonObject = json_decode($jsonInput, true); 
$user = $jsonObject->user;

And you'd need to specify the correct parameter names angular side

return this.http.post('http://dev.local/scripts/login.php',
    {user: username, password: password},
    ...

Also, note that your Access-Control headers are useless in angular, they should be set server side when responding to OPTIONS request

firegloves · Answer 2 · 2018-07-13T12:45:54.437

0

First of all open developer tools of your browser and inspect network calls to see what you are sending.

Then, you are instantiating HttpParams but you are not using it, so you are not sending it.

As suggested by David, you need to communicate in form encoded mode, so you need to set this into HttpHeader:

let headerOptions = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');

Try this:

return this.http.post('http://dev.local/scripts/login.php', 
          {'user': username, 'pass': password}
          { headers: headerOptions }
      )

edited Jul 13 '18 at 12:45

answered Jul 13 '18 at 11:52

firegloves

5,581
2
29
50

you are correctly sending data as you can see into request payload. where do you read user value from request in php? – firegloves Jul 13 '18 at 12:20
Yes. This is the line. – alim1990 Jul 13 '18 at 12:22
try printing all $_POST value to see what it contains var_dump($_POST); – firegloves Jul 13 '18 at 12:23
`C:\wamp64\www\dev\scripts\login.php:12: array (size=0) empty` – alim1990 Jul 13 '18 at 12:32
edited answer. if you still have $_POST empty try also with $_REQUEST – firegloves Jul 13 '18 at 12:46

Angular 6 and PHP: can't send a parameter via HttpParams to PHP script

2 Answers2