javascript - 如何使用外部登录从 Web API 2 获取 token

Question

我有网站和 WebAPI 2 ( ASP.NET MVC 5 ) 托管在本地主机上，但端口不同。

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

如何解决？

 <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 事件，因为可以通过以下方式提交表单:用户按下 Enter 键，而焦点位于文本框内，并且没有单击任何按钮，因此错过了 AJAX 调用:

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

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

<小时/>

更新:

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

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