使用.net登录/注册

Question

我正试图使用.net作为后端，使我的登录/注册方法工作起来。

我在c#中的控制器：

    [HttpPost]
    [Route("Register")]
    public async Task<IActionResult> Register(string email, string password)
    {
        if (ModelState.IsValid)
        {
            var user = new User() {UserName = email, Email = email};
            var result = await _userManager.CreateAsync(user, password);
            if (result.Succeeded)
            {
                return Ok();
            }
        }

        return BadRequest();
    }

所以我想传递两个值来请求:电子邮件和密码。到该方法的路由是：https://localhost:44331/users/Register

这就是我的用户服务在角度上的样子：

export class UserService {
  readonly ApiUrl = "https://localhost:44331/users"
  constructor(private http: HttpClient) { }

  LogIn(email:any, password:any){
    return this.http.post(this.ApiUrl + '/Login', email, password);
  }
  Register(email:any, password:any){
    return this.http.post(this.ApiUrl + '/Register', email, password);
  }
}

注册component.ts：

export class RegisterComponent implements OnInit {
  userForm! : FormGroup;
  subbmited = false;
  constructor(private formBuilder: FormBuilder, private userService: UserService) { }

  ngOnInit(){
    this.userForm = this.formBuilder.group({
      email: new FormControl(['', Validators.required, Validators.email]),
      password: new FormControl(['', Validators.required, Validators.minLength(6)])
    })
  }

  get Email(){
    return this.userForm.get('email');
  }
  get Password(){
    return this.userForm.get('password');
  }

  onSubmit(){
    this.subbmited = true;
    if(this.userForm.invalid){
      return;
    }
    this.userService.Register(this.Email?.value, this.Password?.value);
    alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.userForm.value))
  }

}

也是我的寄存器html的一部分：

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
      <div class="form-group">
      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email" id="email" formControlName="email" class="form-control" placeholder="Email address" required autofocus>
      </div>
      <div class="form-group">
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="password" formControlName="password" class="form-control" placeholder="Password" required>
    </div>
    <div class="form-group">
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </div>
    </form>

​

​

这就是浏览器中的样子。它总是用这个文本自动填充这些输入。

但真正的问题是，我的请求永远不会到达我的后端。或者至少我认为是这样。它不会显示控制台中的任何错误，当我将路径更改为带有错误(如https://localhost:44331/userrsrss/Register)的路径时，它仍然不会抛出任何错误。这对我来说有点奇怪，因为我从具有适当价值的警报中获得了对成功注册的警惕。尝试调试它，这就是使用post时值的样子：

​

​

说到角度，我完全是业余爱好者，我才刚开始学习。我的密码怎么了？

Answer 1

因为你的身体只是电子邮件，你的密码在这里被视为选项。

您应该首先为您的登录模型创建一个接口，并将其用作post请求中的主体。

Login-model.ts

export interface LoginModel {
  UserName: string;
  Password: string;
} 

HTTP邮政

LogIn(loginModel: LoginModel){
    return this.http.post(this.ApiUrl + '/Login', loginModel, this.generateHeaders());
  }

private generateHeaders = () => {
    return {
      headers: new HttpHeaders({
        "Content-Type": "application/json",
      }),
    };
  };  

您还必须修改后端代码以接收模型，而不是两个字符串。

您还可以查看此文章及其其他部分，以正确实现具有角的身份验证。