使用Thinktecture的AngularJs ASP.NET WebApi身份验证

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客户端,并使用该客户端从身份服务器获取访问令牌,以允许您访问Web api端点.为此,您的OAuth客户端需要启用隐式流.然后,您通常会通过弹出窗口向Identity Server发出登录请求,以允许您的OAuth客户端登录.
您需要将登录请求的查询字符串中的OAuth客户端详细信息传递给Idsrv,OAuth客户端配置将是您在OAds客户端的Idsrv管理面板中定义的内容,您可以对其进行参数化并将其附加到oauth2 / authorzie url：

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中,您需要指定重定向网址,在我们的示例中：

https://YourAngularAppUrl/AuthCallback.html

这就是您传递给身份服务器的登录请求以及您的OAuth客户端详细信息. AuthCallback.html页面不执行任何操作,只是将idsrv返回的访问令牌提取到查询字符串中的该页面,并将其传递到您的角度应用程序中,如何执行此操作取决于您,但该访问令牌需要放入您的$http标头.

可以在AuthCallback.html页面中提取访问令牌,如下所示：

<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负责将它给出的令牌传递给我的angular应用程序并将其放入$http标头中.

function oAuthCallback(OAUTHTOKEN) {
  angular.element(window.document).scope().setHttpAuthHeaderAndAuthenticate(OAUTHTOKEN);
}

setHttpAuthHeaderAndAuthenticate()函数在我的$rootScope上定义,它将令牌放入$http authorizaiton标头：

$http.defaults.headers.common.Authorization =’Bearer’OAUTHTOKEN [“access_token”];

看看Christian Weyer的this post它正是我们正在做的事情,但它是一个淘汰/ web-api应用程序,同样的概念仍然如此.

下一步是告诉你的web api接受来自idsrv的访问令牌,这很简单;

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资源.同样,这一切都在Christian Weyer的帖子中有所涉及.希望这可以帮助.