如何使用外部登錄從Web API 2獲取令牌

我有本地主機託管的網站和WebAPI 2（ASP.NET MVC 5），但具有不同的端口。如何使用外部登錄從Web API 2獲取令牌

我試圖獲得令牌使用此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 OK。

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.錯誤

來源

2017-01-10 Academy of Programmer

服務器代碼是什麼樣的？ –

@ Khnle-Kevin這是默認的ASP.NET WEB API 2項目，它已經實現了MS Identity 2.0並且測試成功。並且'EnableCorsAttribute'已正確啓用。 –

你確定jQuery已正確加載幷包含在你的HTML中嗎？看起來您所連接的點擊處理程序完全不起作用：'$（「＃login」）。click（login）;'並且表單只是重新加載當前頁面。 –

請確保您等待DOM訂閱到click事件的登錄按鈕之前加載：

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

另外我會建議你訂閱submit事件的形式而不是click事件的提交按鈕，因爲可以提交表單，例如，用戶按下輸入鍵，而焦點位於某些文本框的內部並且沒有點擊任何按鈕而丟失您的AJAX調用：

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

這將保證無論怎麼這種形式提交您的AJAX調用將執行，而不是簡單地重新加載當前頁面，並追加作爲查詢字符串參數給它的用戶名和密碼（這是你目前觀察到的行爲）。

UPDATE：

它看起來像你的Web API根本不允許CORS，因此請求被阻止。

您可能會看到在Web API中啓用CORS的following article。

來源

2017-01-10 15:26:58

更改類型

input type="submit"

到

input type="button"

原因：「提交」提交整個表單，因此衝突所需的行爲。而「按鈕」定義了一個可點擊的按鈕（主要用於激活腳本的JavaScript），如http://www.w3schools.com/tags/att_input_type.asp中所述。

HTH

來源

2017-01-10 15:32:21 cham

如何使用外部登錄從Web API 2獲取令牌

回答

相關問題