gpt4 book ai didi

angularjs - 使用Thinktecture的AngularJs ASP.NET Web Api身份验证

转载 作者:行者123 更新时间:2023-12-04 13:50:18 25 4
gpt4 key购买 nike

我正在尝试创建一个将登录名和密码发送到ASP.NET WebApi后端并使用Thinktecture登录该用户的AngularJs网站。

我让Thinktecture使用WS-Federation与其他项目ASP.NET MVC正常工作。现在,我正在尝试做类似的事情,但是更改了一些组件,但我无法使其正常工作。

如何从ASP.NET WebApi发送用户名和密码到Thinktecture并进行验证?

using System.Collections.Generic;
using System.IdentityModel.Services;
using System.Web.Http;
using WebApi_AngularJs.Model;

namespace WebApi_AngularJs.Controllers
{
public class AuthorizationController : ApiController
{
// POST: api/Authorization
public LoginResponse Post([FromBody]Login data)
{
//HOW TO SEND data.user and data.password to ThinkTecture and get
//response if user valid or not??
var response = new LoginResponse { access_token = "token", data = "data"};
return response;
}

}
}

谢谢!

最佳答案

您需要做几件事。创建一个OAuth客户端,该客户端将发出 token 请求,并使用该客户端从身份服务器获取访问 token ,从而允许您访问Web api端点。为此,您的OAuth客户端需要启用隐式流。然后,您通常通过弹出窗口向Identity Server发出登录请求,以允许您的OAuth客户端登录。
您需要在登录请求的查询字符串中将OAuth客户端详细信息传递给Idsrv,OAuth客户端配置就是您在Idsrv管理面板中为OAuth客户端定义的配置,您需要对其进行参数化并将其附加到oauth2/authorzie网址:

getIdpOauthEndpointUrl: function () {
return "https://192.168.1.9/issue/oauth2/authorize";
},
getOAuthConfig: function () {
return {
client_id: "Your Oauth CLient ID that you specifie din Identity Server",
scope: "The scope of your RP",
response_type: "token",
redirect_uri: "https://..YourAngularAppUrl/AuthCallback.html"
};
}

然后,您打开登录窗口:
var url = authService.getIdpOauthEndpointUrl() + "?" + $.param(authService.getOAuthConfig());
window.open(url, "Login", "height=500,width=350");

在我们的示例中,您需要在OAuth客户端inIdsrv中指定重定向URL:
https://YourAngularAppUrl/AuthCallback.html

这就是您将OAuth客户端详细信息传递给登录到身份服务器的登录请求的内容。 AuthCallback.html页面什么都不做,只是将idsrv返回的访问 token 提取到查询字符串中的该页面,然后将其传递到您的 Angular 应用程序中,具体取决于您的操作,但是该访问 token 需要放入 $http header 中。

可以像下面这样在您的AuthCallback.html页面中提取访问 token :
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery.ba-bbq.min.js"></script>

<script type="text/javascript">
var params = $.deparam.fragment(location.hash.substring(1));

window.opener.oAuthCallback(params);
window.close();
</script>
OAuthCallback函数是在我的shell页,index.html中定义的,并负责将给定的 token 传递到我的angular应用程序中,并将其放入 $http header 中。
function oAuthCallback(OAUTHTOKEN) {
angular.element(window.document).scope().setHttpAuthHeaderAndAuthenticate(OAUTHTOKEN);
}
setHttpAuthHeaderAndAuthenticate()函数是在我的 $rootScope上定义的,它将 token 放入 $http授权 header 中:
$http.defaults.headers.common.Authorization = 'Bearer ' + OAUTHTOKEN["access_token"];
看看Christian Weyer的 this post它确实完成了我们正在做的事情,但这是一个淘汰赛/网络API应用程序,仍然是相同的概念。

下一步是告诉您的Web api接受idsrv的访问 token ,这很简单;
public static void Configure(HttpConfiguration config)
{
var authConfig = new AuthenticationConfiguration();

authConfig.AddJsonWebToken(
YourIdsrvSiteId, YourRpsScope/Relam,YourRpsSymmetricSigningKey
);

config.MessageHandlers.Add(new AuthenticationHandler(authNConfig));
}

您还可以在此处定义ClaimsAuthenticationManager和ClaimsAuthorizationManager,以使您可以转换声明和对Web api资源的Grant/Deny访问。同样,所有这些都在Christian Weyer的帖子中进行了介绍。希望这可以帮助。

关于angularjs - 使用Thinktecture的AngularJs ASP.NET Web Api身份验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24077628/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com