使用.net登錄/注冊

我正在嘗試使用 .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();
    }

所以我想傳遞 2 個值來請求：電子郵件和密碼。該方法的路由是：https://localhost:44331/users/Register

這是我的用戶服務在 angular 中的樣子：

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 >Please sign in</h1>
      <div >
      <label for="inputEmail" >Email address</label>
      <input type="email" id="email" formControlName="email"  placeholder="Email address" required autofocus>
      </div>
      <div >
      <label for="inputPassword" >Password</label>
      <input type="password" id="password" formControlName="password"  placeholder="Password" required>
    </div>
    <div >
      <button  type="submit">Sign in</button>
    </div>
    </form>

這就是它在瀏覽器中的樣子。它總是用這個文本自動填充這些輸入。

但真正的問題是我的請求從未到達我的后端。或者至少我是這么認為的。它不會在控制臺中顯示任何錯誤，當我將路由更改為帶有拼寫錯誤的路由（例如 https://localhost:44331/userrsrss/Register）時，它仍然不會引發任何錯誤。這對我來說有點奇怪，因為我從帶有正確值的警報中獲得成功注冊的警報。嘗試除錯它，這就是使用 post 時值的樣子：

說到 angular，我完全是個業余愛好者，剛剛開始學習它。我的代碼有什么問題？

uj5u.com熱心網友回復：

因為您的正文只是電子郵件，這里的密碼被視為選項，
您應該首先為您的登錄模型創建一個界面，并將其用作您的帖子請求中的正文

登錄-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",
      }),
    };
  };  

并且您必須修改后端代碼以接收模型而不是兩個字串。
您還可以查看本文及其其他部分，以正確使用 Angular 實作身份驗證。

標籤：有角的

上一篇：從來自AngularTypeScript的firestore的資料中獲取未定義

下一篇：角度決議器注入路由器