Angular - Unable to send data with POST request to ASP.NET

Question

I'm trying to make an authentication system inside my website. I'm sending a simple POST request with the email and password inside, to my ASP.NET server and for some reason the data (email and password) inside the server is empty. I don't know what I'm doing wrong and I'm a beginner on ASP.NET and Angular.

Angular code: (I tried to show the text from the text boxes inside some elements and it shows the correct text)

  isUserLoggedIn: boolean;
  emailAddress: string;
  password: string;

  constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) {}

  login() {

    const headers = {'Content-Type': 'application/json', };
    const body = { emailAddress: this.emailAddress.toString, password: this.password.toString };
    this.http.post<any>(this.baseUrl + "login", body, { headers }).subscribe(result => {
      this.isUserLoggedIn = result;
      if (this.isUserLoggedIn) console.log("Logged in")
      else console.log("Not logged in")
    }, error => console.error(error));

  }

My ASP.NET controller:

[HttpPost]
[Route("login")]
public bool LoginUser(string emailAddress, string password)
{
    // DOES NOT PRINT ANY VALUE OF EMAIL OR PASSWORD
    Console.WriteLine("1: " + emailAddress);
    Console.WriteLine("2: " + password);
            
    SakilaContext context = HttpContext.RequestServices.GetService(typeof(SakilaContext)) as SakilaContext;
    return context.LoginUser(emailAddress, password);
}

My code for database inside ASP.NET server:

public bool LoginUser(string emailAddress, string password)
{
    bool isUserLoggedIn = false;
    List<UserModel> list = new List<UserModel>();
    using (MySqlConnection conn = GetConnection())
    {
        string query = $"SELECT * FROM users WHERE email = '{emailAddress}'";
        conn.Open();
        MySqlCommand cmd = new MySqlCommand(query, conn);
        using (MySqlDataReader reader = cmd.ExecuteReader())
        {
            while (reader.Read())
            {
                if (reader.HasRows)
                {
                    string db_password = reader.GetString("password");
                    if (db_password == password)
                    {
                        isUserLoggedIn = true;
                    }
                }
            }
        }
    }
    return isUserLoggedIn;
}

Yong Shun · Accepted Answer · 2022-05-19 05:41:15Z

1

Create a LoginModel class.

public class LoginModel
{
    public string EmailAddress { get; set; }
    public string Password { get; set; }
}

Change the Login method signature to read the object value from the request body via [FromBody].

[HttpPost]
[Route("login")]
public bool LoginUser([FromBody] LoginModel model)
{
    Console.WriteLine(model.EmailAddress);
    Console.WriteLine(model.Password);

    ...
}

For Angular, I don't think the below part is correct:

const body = { emailAddress: this.emailAddress.toString, password: this.password.toString };

Change to

const body = { emailAddress: this.emailAddress.toString(), password: this.password.toString() };

Or

const body = { emailAddress: this.emailAddress, password: this.password };

Side note:

Don't concatenate the value in SQL command, use a parameterized query with .AddWithValue("@parameter", value). Check out Why do we always prefer using parameters in SQL statements?.

string query = $"SELECT * FROM users WHERE email = @emailAddress";
conn.Open();
MySqlCommand cmd = new MySqlCommand(query, conn);
cmd.Parameters.AddWithValue("@emailAddress", emailAddress);

Reference

[FromBody] attribute

edited May 19, 2022 at 5:41

answered May 19, 2022 at 0:02

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

George Sepetadelis Over a year ago

Still not working :((

Yong Shun Over a year ago

Hi, did you check the browser DevTools Netwotk tab, did you post the request with value? And in Angular side, I think this is wrong this.emailAddress.toString, use this.emailAddress.toString(). Same goes for password.

George Sepetadelis Over a year ago

ichecked it and it doesn't send any data for some reason, the data inside the payload is empty

George Sepetadelis Over a year ago

i fixed the problem by converting .toString to .toString()

Collectives™ on Stack Overflow

Angular - Unable to send data with POST request to ASP.NET

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related