Symfony 400 error Необходимо указать ключ «email»

Question

Это security.yaml

    providers:
    # used to reload user from session & other features (e.g. switch_user)
    app_user_provider:
        entity:
            class: App\Entity\User
            property: email
firewalls:
    dev:
        pattern: ^/(_(profiler|wdt)|css|images|js)/
        security: false
    main:
        anonymous: true
        # provider: app_user_provider
        json_login:
            check_path: app_login
            username_path: email
            password_path: password

, который предназначен только для получения POST JSON с использованием электронной почты и пароля для входа

Ниже приведен мой компонент React:

import React, {Component} from 'react';
import ReactDom from "react-dom";
import '../css/app.scss';
import 'bootstrap';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

export class Login extends Component {
    constructor(props){
        super(props);
        this.state={
            email:'',
            password:''
        }
    }

    handleClick(event) {
        console.log(event);
        fetch('/login', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email: this.state.email,
                password: this.state.password,
            })
        })
    }

    render() {
        return (
            <div className="container">
                <div>
                    <TextField
                        type="email"
                        hinttext="Enter your email"
                        floatinglabeltext="email"
                        onChange = {(event,newValue) => this.setState({email:newValue})}
                    />
                    <br/>
                    <TextField
                        type="password"
                        hinttext="Enter your Password"
                        floatinglabeltext="Password"
                        onChange = {(event,newValue) => this.setState({password:newValue})}
                    />
                    <br/>
                    <Button label="Submit" onClick={(event) => this.handleClick(event)}>
                        Submit
                    </Button>
                </div>
            </div>
        );
    }
}

ReactDom.render(<Login />, document.getElementById('Login'));

Вот мой SecurityController:

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;

class SecurityController extends AbstractController
{
    /**
     * @Route("/login", name="app_login", methods={"POST"})
     */
    public function login()
    {
        return $this->json([
            'user' => $this->getUser() ? $this->getUser()->getId() : null]
        );
    }
}

Несмотря на то, что это просто возврат / ответ, я попытался изменить его на следующее, но все равно результат тот же:

 'email' => $this->getEmail() ? $this->getEmail()->getId() : null]

Как указано в теме / заголовке, я получаю сообщение об ошибке 400 - необходимо указать ключ «email»

На вкладке Params отображается только слово «JSON»

Я не понимаю, почему это не работает. Мне удалось понять ошибку аутентификации, но я отправляю письмо

Как обычно, заранее спасибо

Answer 1

Итак, я изменил свой onChange на setState, используя event.currentTarget.value, который отправил JSON с ключом «email»

Я смог обнаружить это, выполнив консольный журнал для newValue - см. предыдущую версию кода - когда он был пуст, я знал, что это то, что мне нужно изменить

import React, {Component} from 'react';
import ReactDom from "react-dom";
import '../css/app.scss';
import 'bootstrap';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

export class Login extends Component {
    constructor(props){
        super(props);
        this.state={
            email:'',
            password:''
        }
    }

    handleClick(event) {
        console.log(event);

        fetch('/login', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                'email' : this.state.email,
                'password' : this.state.password
            })
        })
    }

    render() {
        return (
            <div className="container">
                <div>
                    <TextField
                        type="email"
                        hinttext="Enter your email"
                        floatinglabeltext="email"
                        onChange = {(event) => this.setState({email:event.currentTarget.value})}
                    />
                    <br/>
                    <TextField
                        type="password"
                        hinttext="Enter your Password"
                        floatinglabeltext="Password"
                        onChange = {(event) => this.setState({password:event.currentTarget.value})}
                    />
                    <br/>
                    <Button label="Submit" onClick={(event) => this.handleClick(event)}>
                        Submit
                    </Button>
                </div>
            </div>
        );
    }
}

ReactDom.render(<Login />, document.getElementById('Login'));