C# WebApi Login Verification

1 answer

I am using React Js as my front-end and C# WebApi with my back-end. I am try to use a token at my back-end here.

So here is my code:

React JS

Login JS

import React, { Component } from 'react'; import './App.css'; import logo from './logo.svg'; import {Button, Card, CardBody, CardGroup, Col, Container, Form, Input, InputGroup, Row} from 'reactstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; import axios from 'axios';  class Login extends Component{   constructor(){     super();      this.state = {       UserRole: '',       UserName: '',       UserPassword: '',     }      this.UserPassword = this.UserPassword.bind(this);     this.UserName = this.UserName.bind(this);     this.Login = this.Login.bind(this);   }    UserName(event) {     this.setState ({ UserName: event.target.value})   }    UserPassword(event){     this.setState ({ UserPassword: event.target.value})   }    Login(event){     debugger;     axios.post('http://localhost:60111/Api/login', {       UserName: this.state.UserName,       UserPassword: this.state.UserPassword})     .then(result => {       if(result.data.Status === 'Success'){         console.log(result.data.Status);         alert("User login Successfully");         this.props.history.push("/Dashboard");       }else       {         alert('Invalid User');         this.props.history.push('/Login');       }       debugger;     })   } 

So as you can see from here, I am trying to pass my UserName and UserPassword to my backend C# WebApi.

However, at my C# WebApi Login Controller, I try to perform verification action, as below:

namespace mylogin.Controllers {     [RoutePrefix("Api")]     public class LoginController : ApiController     {         DBSecurityTestEntities DBSE = new DBSecurityTestEntities();         [Route("login")]         [HttpPost]         public HttpResponseMessage Login(User user)         //public object Login(User user)         {             bool status = false;              using (DBSE)             {                 var obj = DBSE.UserLogins.Where(x => x.UserName.Equals(user.UserName) && x.UserPassword.Equals(user.UserPassword)).FirstOrDefault();                 if (obj != null)                 //UserLogin ul = new UserLogin();                 //if (user.UserName == ul.UserName && user.UserPassword == ul.UserPassword)                 {                     status = true;                 }                 else                 {                     status = false;                 }             }              if (status == true)             {                 //do something here... perform login and send token             } } 

However the way I declare this went some error. I tried to put a breakpoint and I checked with the value here enter image description here

So it seems like my data had been successfully pass from front end, however my C# WebApi is unable to perform verification (as my obj is equals to null).

Can someone point out my mistake or omission?

All answers to this question, which has the identifier 60646673

The best answer:

After I customize my Login.js in React, I successfully pass my data to my C# Backend

Login.js

import React, { Component } from 'react'; import {Button, Card, CardBody, CardGroup, Col, Container, Form, Input, InputGroup, Row} from 'reactstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; import axios from 'axios';  class Login extends Component{   constructor(){     super();      this.state = {       UserRole: '',       UserName: '',       Password: '',     }      this.Password = this.Password.bind(this);     this.UserName = this.UserName.bind(this);     this.Login = this.Login.bind(this);   }     UserName(event) {     this.setState ({ UserName: event.target.value})   }    Password(event){     this.setState ({ Password: event.target.value})   }    Login(event){     debugger;     axios.post('http://localhost:60111/Api/login', {       UserName: this.state.UserName,       Password: this.state.Password})     .then(result => {       if(result.data.Status === 'Success'){         console.log(result.data.Status);         alert("User login Successfully");         this.props.history.push("/");       }else       {         alert('Invalid User');         this.props.history.push('/Login');       }       debugger;     })   }    render() {     return(       <div className="app flex-row align-items-center">         <Container>           <Row className="justify-content-center">             <Col md="9" lg="7" xl="6">               <CardGroup>                 <Card className="p-2">                   <CardBody>                     <Form>                       <div className="mb-2 pageheading">                           Login                       </div>                       <InputGroup className="mb-3">                         <Input type="text" onChange={this.UserName} placeholder="Enter UserName" />                       </InputGroup>                       <InputGroup className="mb-4">                         <Input type="password" onChange={this.Password} placeholder="Enter Password" />                       </InputGroup>                     <Button onClick={this.Login} color="success" block>Login</Button>                     </Form>                   </CardBody>                 </Card>               </CardGroup>             </Col>           </Row>         </Container>       </div>     );   }  }  export default Login; 

Turns out is my Attribute Naming error: UserPassword should be Password

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data