如何使用外部登录从Web API 2获取令牌

Question

我在localhost上托管了网站和WebAPI 2（ASP.NET MVC 5），但是有不同的端口。

我尝试使用此javascript获取令牌，但根本没有令牌，它会使用包含用户名和密码的查询字符串重定向到当前网站。

如何解决？

 <form id="userData">
        <input type="text" name="userName" placeholder="UserName" />
        <input type="text" name="password" placeholder="Password" />
        <input type="submit" id="login" value="Login" />
 </form>

var login = function () {

  var loginData= $("#userData").serialize();
  loginData= loginData+ "&grant_type=password";

  $.ajax({
    type: 'POST',
    url: 'http://localhost:57371/Token',
    data: loginData
  }).done(function (data) {
    console.log(data);
    // Cache the access token in session storage.
    sessionStorage.setItem(tokenKey, data.access_token);
  }).fail(showError);

   return false;
};

$("#login").click(login);

var showError = function (XMLHttpRequest, textStatus, errorThrown) {
   var responseText = JSON.parse(XMLHttpRequest.responseText)
   console.log(responseText.Message + " Code: " + XMLHttpRequest.status);
   $("#output").text(JSON.stringify(responseText, null, 4));
};

更新1. Cors已启用确定。

public static void Register(HttpConfiguration config)
{
   EnableCrossSiteRequests(config);
}
private static void EnableCrossSiteRequests(HttpConfiguration config)
        {
            var cors = new EnableCorsAttribute(
                origins: "*",
                headers: "*",
                methods: "*");
            config.EnableCors(cors);
        }

更新2.错误

Answer 1

确保在订阅登录按钮的click事件之前等待加载DOM：

$(function() {
    $("#login").click(login);
});

另外，我建议您订阅表单的submit事件而不是提交按钮的click事件，因为可以提交表单，例如，用户按输入键，同时焦点位于文本框中，而不点击任何按钮，从而错过了您的AJAX调用：

$(function() {
    $('#userData').submit(login);
});

这将保证无论如何提交此表单，您的AJAX调用都将执行，而不是简单地重新加载当前页面并将用户名和密码作为查询字符串参数附加到它（这是您目前正在观察的行为）。

更新：

看起来您的Web API根本不允许CORS，因此请求被阻止。

您可以查看following article以在Web API中启用CORS。

Answer 2

更改类型

    input type="submit"

到

    input type="button"

原因：＆＃34;提交＆＃34;提交整个表单，使其与所需行为冲突。然而＆＃34;按钮＆＃34;定义了一个可点击按钮（主要用于JavaScript来激活脚本），如http://www.w3schools.com/tags/att_input_type.asp中所述。

HTH