Как мне вызвать свой собственный API из View? ASP. NET MVC - PullRequest
Новая
       114

Как мне вызвать свой собственный API из View? ASP. NET MVC

0 голосов
/ 11 апреля 2020

У меня есть API, который я создал для регистрации / аутентификации пользователя и подобных операций. Пример метода записи: 

    [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 из View. Например, скажем, я хочу создать простую страницу входа: 

<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>

Как бы я теперь вызвал метод аутентификации поста для этой формы входа? Поскольку у меня есть контроллер, который является контроллером API, и у меня есть контроллер, который является контроллером действий, для пользователей.

Структура файла, если необходимо: Структура файла

Ответы [ 3 ]

0 голосов
/ 11 апреля 2020

Вызов собственного веб-действия может быть выполнен в основном двумя способами:

  • Собственная 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_ (программирование)

Например: 

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

И будет отображаться имя пользователя, ответившее с сервера.

0 голосов
/ 11 апреля 2020

Поскольку вы используете JwtBearer с WebAPI, предполагается, что вы, вероятно, будете вызывать свой метод аутентификации, используя Ajax. К сожалению, вы не предоставили объявление класса, показывающее соглашение о маршруте для вашего ApiClass, но обычно оно выглядит как "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"> так, чтобы форма не отправлялась. Присоедините событие click к этой функции, чтобы она обрабатывала вызов API.

0 голосов
/ 11 апреля 2020

Вы можете использовать ASP. NET MVC Core Tag Helpers: 

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