Question

我有LogInController：

[HttpGet("[action]")]
        public IActionResult Sample(string email, string password)
        {
            var user = new SystemUser();
            if (user.EmailAddress == email && user.Password == password)
                return View();
            else return null;
        }

我想从Angular调用控制器，类似这样：

@Injectable()
export class Authentification {
  constructor(private http: HttpClient { }


  AuthentificateUser(email: string, password: string) {
  return this.http.get('https://localhost:44348/api/LogIn/Sample?email=' + this.email + '&password=' + this.password).subscribe((res: Response) => {
          const AuthentificateUser = res.json();
        });
  }
}

在视图上我有：

<input ng-model="email" matInput placeholder="Email" formControlName="email">
<input ng-model="password" matInput type="password" placeholder="Password" formControlName="password">

如何使用Angular 5+以简单干净的方式验证用户身份我知道，这是微不足道的，但我必须从某个地方开始。

Answer 1

如果您使用的是.NET Core 2.0，可以尝试

[HttpGet("{email}/{password}")]
        public IActionResult Sample(string email, string password){..}

而且，当打电话给api时

  return this.http.get('https://localhost:44348/api/LogIn/Sample/'+ this.email +"/"+this.password)

显然，我希望它只是一个样本（通过GET发送电子邮件和密码不是一个好主意）

要发送值，您必须制作表格。您可以使用模板驱动形式的反应形式。您可以看到官方文档https://angular.io/guide/forms#forms 它很简单

//Template driven form
//in .ts Define a model
//Usually we use a unique variable type object with the properties we can use
model={email:"",password:""}; //<--declare a variable
//But we can use two variables
email:string="";
password:string="";

onSubmit()
{
  console.log(this.model);
  return this.http.get('https://localhost:44348/api/LogIn/Sample/'+ this.model.email +"/"+this.model.password)
     .subscribe(res=>{
         console.log(res) //<--here you have the answer to the call
       });

}
//in .html
<form (ngSubmit)="onSubmit()">
<input type="text" class="form-control" id="name"
       required  [(ngModel)]="model.email" name="email">

<input type="text" class="form-control" id="name"
       required  [(ngModel)]="model.password" name="email">

<!--or 
<input type="text" class="form-control" id="name"
       required  [(ngModel)]="email" name="email">

<input type="text" class="form-control" id="name"
       required  [(ngModel)]="password" name="email">
-->
</form>

// ReactiveForm是一些更复杂的

//We create a formControl like
import { Component }              from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

//Declare a FormControl
myForm:any;

constructor(private fb: FormBuilder) { // <--- inject FormBuilder
    this.createForm();
  }

  createForm() {
     this.myForm=this.fb.group({
      password: "", 
      email:""
    });
  }
  onSubmit()
  {
     console.log(this.myForm.value);
      return this.http.get('https://localhost:44348/api/LogIn/Sample/'+ 
     this.myForm.value.email +"/"+this.myForm.value.password)

  }

//The .html
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
   <input formControlName="password">
   <input formControlName="email">
</form>

Answer 2

如果您是asp.net（核心？）应用程序是一个API，并且您想在Angular 5应用程序和API之间添加身份验证，我不会看到返回View会如何帮助您。

进行身份验证的一种方法是使用cookie，想法：

客户端应用（角度）将向API发送登录请求。
API检查登录信息，如果它好，那么它会创建一个cookie，保存并返回它。
客户端应用会收到结果，如果找到令牌，则将其另存为Cookie。
在客户端应用的所有下一个请求中使用Cookie。

您可以通过搜索主题来了解更多信息，大部分实施都是使用JWT完成的（例如JWT Authentication with ASP.NET Core 2 Web API, Angular 5, .NET Core Identity）

（编辑）
你必须在你的html部分创建一个表单，然后等待提交事件，取消它然后使用你的身份验证方法（通常应该在服务中）或使用Template-Driven forms。在此之后，您将获得所需的信息（登录/电子邮件和密码），然后您可以使用您已有的“相同”代码向控制器发送POST请求。

带参数的Angular调用API控制器

2 个答案: