0

estoy empezando con Angular, estoy probando llamadas usando get sobre un backend php y no estoy teniendo ningún problema, pero al probar un login usando post me da el siguiente error:

El código es el siguiente tanto la parte de Angular como el controller del backend:

login.component.html

    <div class="wrapper fadeInDown">
    <div id="formContent">
      <!-- Tabs Titles -->

      <!-- Icon -->
      <div class="fadeIn first">
        <img src="#" id="icon" alt="User Icon" />
      </div>

      <!-- Login Form -->
      <form>
        <input type="text" id="alias" [(ngModel)]="alias" class="fadeIn second" name="alias" placeholder="alias">
        <input type="text" id="password" [(ngModel)]="password" class="fadeIn third" name="password" placeholder="password">
        <input type="submit" class="fadeIn fourth" value="Log In" name="login" (click)="doLogin(alias, password, $event)">
      </form>

      <!-- Remind Passowrd -->
      <div id="formFooter">
        <a class="underlineHover" href="#">Forgot Password?</a>
      </div>

    </div>
  </div>

login.component.ts

    import { Component, OnInit } from '@angular/core';
import { AppService } from 'C:/xampp/htdocs/Manager/app/src/app/app.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  data: any;
  constructor(private appService: AppService) { }

  ngOnInit() {
  }

  doLogin(alias : String, password : String, event : Event){
    event.preventDefault();
    var login = this.appService.postLogin(alias, password).subscribe(data =>{this.data = data});
    console.log('data: '+this.data);
  }
}

app.service.ts

 import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';

    @Injectable({
      providedIn: 'root'
    })
    export class AppService {
      login = 'localhost/server/?login';
      constructor(private http: HttpClient) { }

      postLogin(alias : String, password : String){
        return this.http.post(this.login,
        {
            "alias": alias,
            "password": password,
        });
      }
    }

Controller PHP

<?php
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Request-With');
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Allow-Headers: Authorization');
    header('Content-Type application/json; charset=utf-8');
    include_once('model/user.php');


    if(isset($_POST['login'])){
        $data = User::login($_POST['alias'], $_POST['password']);
        echo json_encode($data);
    }
?>

En teoría php debería devolverme un OK o un KO en caso de encontrar o no coincidencias, he probado metiendo todos los encabezados que se me han ocurrido pero no consigo que haga la petición correctamente.

Añado captura desde el Network: introducir la descripción de la imagen aquí

file_get_contents('php://input'), true) me lo devuelve nulo en las llamadas. Por otro lado no consigo que entre en el $_POST['login']

Muchas gracias.

3 respuestas 3

0

Puede hacer de varias maneras. Primero envía los headers, si quieres envía los datos tipo json.

postLogin(datos){
    let headers=new HttpHeaders();
    let body=JSON.stringify({"datos":datos});

    headers.append('Content-Type' , 'application/json');
    return this.http.post(this.myurl+"login.php",body,{headers:headers}).pipe(map(res=>{

       return res;
     }));
   }

Dese angular y ahora en php

$data = json_decode(file_get_contents('php://input'), true);

Desde php, revisa si la variable contiene info. Otra manera que podrías hacer es enviar los datos por la url, login?user=.....&password=....

o en Angular con httpParams, con este puedes declarar las variables tipo url.

Espero que te sirva Un saludo.

3
  • Perfecto, ya no tengo el error, muchas gracias. Lo que ahora no recibo es la respuesta de php :(
    – Dsgg
    Commented el 17 feb. 2020 a las 23:00
  • $data = json_decode(file_get_contents('php://input'), true); echo json_encode($data); // si lo has realizado con json revisar la pestaña de network Commented el 18 feb. 2020 a las 11:31
  • Pero con isset($_POST['login']) en PHP no puedo detectar ya esta request como hago con los get ¿no? Osea si paso la petición a un get sí recivo respuesta pero con post no estoy recibiendo
    – Dsgg
    Commented el 18 feb. 2020 a las 11:55
0

Si puedes adjuntar una captura de la url, conforme la llama, en la pestaña de network, así puede quedar un poco mas. El servicio sería algo así import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AppService {
  login = 'localhost/server/login.php';
  constructor(private http: HttpClient) { }

  postLogin(alias : String, password : String){
    return this.http.get(this.login+'?id='+alias+'&password='+password);
  }
}

He modificado un par de cosas, para que en principio funcione. y en php podrías ver el si

var_dump($_GET);
var_dump($_POST);

Que repuesta muestra

3
  • usando GET sí que me funciona correctamente, quiero que me funcione por POST, he ampliado info en mi pregunta, muchas gracias por la ayuda!
    – Dsgg
    Commented el 18 feb. 2020 a las 23:06
  • Te respondo mañana que me pillas un poco liado Commented el 18 feb. 2020 a las 23:12
  • he avanzado un poco más, estaba pansando mal los datos porque estaba probando las llamadas con Postman, pasandole bien el JSON ya me devuelve datos el file_get_contents('php://input'), me falta solo saber cómo puedo saber a qué hace referencia (osea cómo puedo leer desde php ese ?login para saber que la acción se refiere al login del usuario. Responde cuando puedas, muchas gracias!
    – Dsgg
    Commented el 18 feb. 2020 a las 23:16
0

Te recomiendo que lo hagas mediante json, a la larga es mucho mas cómodo,

enviarLogin(alias, password) {
    let datos ={ alias: alias, password:password };                
        let headers=new HttpHeaders();                                 
        headers.append('Content-Type' , 'application/json');
        return this.http.post(this.myurl+"login.php",body,{headers:headers}).pipe(map(res=>{
          console.log(res)
           return res;
         })); }

en php

$data = json_decode(file_get_contents('php://input'), true);
echo json_encode($data);
die();

Así puedes ver la respuesta del php y conforme le llega, tendría que ser algo así, $data['alias'];// para coger alias. Pero revisa la respuesta y te aseguras, tanto en consola, como en la pestaña de network. Se que puede parecer difícil, pero una vez te cojas seguro que te ayuda. Espero que te sirva. Un saludo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.