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

Question

我正在尝试创建一个将登录名和密码发送到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;
        }   

    }
}

谢谢!

Answer 1

您需要做几件事。创建一个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的帖子中进行了介绍。希望这可以帮助。