如何从视图中调用我自己的 API？ ASP.NETMVC

Question

我创建了一个 API 用于用户注册/身份验证和类似操作。 post 方法示例：

    [AllowAnonymous]
    [HttpPost("authenticate")]
    public IActionResult Authenticate([FromBody]AuthenticateModel model)
    {
        var user = _userService.Authenticate(model.Username, model.Password);

        if (user == null)
            return BadRequest(new { message = "Username or password is incorrect" });

        var tokenHandler = new JwtSecurityTokenHandler();
        var key = Encoding.ASCII.GetBytes(_appSettings.Secret);
        var tokenDescriptor = new SecurityTokenDescriptor
        {
            Subject = new ClaimsIdentity(new Claim[]
            {
                new Claim(ClaimTypes.Name, user.Id.ToString()),
                new Claim(ClaimTypes.Role, user.Role)
            }),
            Expires = DateTime.UtcNow.AddDays(7),
            SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(key), SecurityAlgorithms.HmacSha256Signature)
        };
        var token = tokenHandler.CreateToken(tokenDescriptor);
        var tokenString = tokenHandler.WriteToken(token);

        // return basic user info and authentication token
        return Ok(new
        {
            user.Id,
            user.Username,
            Token = tokenString,

        });

我现在需要我的前端来实现我的 API。所以我想从视图中调用此 API。例如，假设我想创建一个简单的登录页面：

<div class="row">
<div class="col-md-12">
    <form method="post" action="">
        <div asp-validation-summary="All" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Username"></label>
            <input asp-for="Username" class="form-control" />
            <span asp-validation-for="Username" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Password"></label>
            <input asp-for="Password" class="form-control" />
            <span asp-validation-for="Password" class="text-danger"></span>
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
</div>

我现在如何调用此登录表单的身份验证 post 方法？因为我有一个控制器，它是 API 控制器，我有一个控制器，它是用户的动作控制器。

文件结构（如果需要）： File structure

Answer 1

您可以使用 ASP.NET MVC Core Tag Helpers：

<form asp-controller="MyControllerName" asp-action="Authenticate" method="post">
    <!-- Input and Submit elements -->
</form>

Answer 2

调用自己的网络操作主要有两种方式：

本机 HTML 表单提交。
AJAX

本机提交会重新加载您的整个页面。地址将更改为 URL 或您的网络操作。通常用作搜索功能，例如：

<form asp-controller="Search" asp-action="Blogs" method="get">
    <input type="text" name="question" />
    <input type="submit" />
</form>

当用户单击提交按钮提交表单时，浏览器将重定向到 /search/blogs?question=textHeInput。

为了防止页面刷新，您可以使用纯JavaScript提交请求。哪个叫 AJAX.

https://en.wikipedia.org/wiki/Ajax_(programming)

例如：

// Require jQuery:
$.post('/authenticate', { "yourPropertyName" : "yourPropertyValue" }, function(response) {
    // Do something after the request. Access response like this:
    alert(response.Username);
});

并且将显示服务器响应的用户名。

Answer 3

由于您将 JwtBearer 与 WebAPI 一起使用，因此假设您可能会使用 Ajax 调用身份验证方法。不幸的是，您没有提供显示 ApiClass 路由约定的 class 声明，但通常它会显示为 "api/[Controller]"...如果是这种情况，您可以执行以下操作：

$("submitButton").click( 
  function authenticateUser()
  {
    $.post(
      '/api/[COntrollerName]/authentication', // URL
      $('#form").serialize(), // this is your form data as an object
      function(payload) //Response 
      {
        // do something with payload here
      }
    });
  }
);

<button type="submit" class="btn btn-primary" id="submitButton">Login</button>

您可能想要设置 <button type="button"> 以便不提交表单。将点击事件附加到该函数，以便它处理 api 调用。

如何从视图中调用我自己的 API？ ASP.NETMVC

How do I call my own API from a View? ASP.NET MVC

asp.net

api

model-view-controller

asp.net-apicontroller