AngularJS 设置 SSL Headers

Question

我开始了一个新的 Yeoman AngularJS 项目，托管在 Apache 中。我正在从启用了 CORS 的 IIS 中托管的 WCF Restful 服务获取数据。我能够毫无问题地获取数据。但是，目前我每次都在 url 上传递用户名和密码，并覆盖 WCF 端的用户验证程序，这是非常糟糕的，无论如何都不安全。不要担心这只是一个开发环境。在调用 SSL 服务之前，如何使用用户凭据设置 header 值？基本上如何在进行服务调用之前在 AngularJS 中设置 Web 请求？

Answer 1

我最终在我的 AngularJS 应用程序上创建了一个名为 "Authorization" 的自定义 header，在应用程序上设置 header 值，然后读取 header WCF 服务上的值。

我能够做到这一点的方法如下：

首先，我必须更改 WCF 服务以允许我获取 Http 上下文。为此，我必须首先在 web.config 上启用 ASP 网络兼容性，如下所示：

<serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />

我必须将 Global.asax 添加到我的 WebService 项目并修改 BeginRequest 事件以允许我的新自定义 header，如下所示：

    protected void Application_BeginRequest(object sender, EventArgs e)
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Authorization");
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE");

            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        }

    }

然后我通过向 class 添加标记来允许 ASP 服务 class 的网络兼容性，如下所示：

[ServiceBehavior(InstanceContextMode = InstanceContextMode.PerCall)]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

此时我能够在 WCF 服务上获得 Http 上下文 headers。下面是我如何在服务代码中检索 header 值：

HttpContext.Current.Request.Headers["Authorization"]

此时，WCF 服务可以使用我的自定义 header。最后一步是从 AngularJS 服务工厂代码设置 header，如下所示：

app.factory('serviceFactory', ['$http', function ($http) {
var urlBase = 'https://domainName.com/MyService.svc/';
var dataFactory = {};
var success = {};

serviceFactory.Login = function (username, password) {
    return $http({
        url: urlBase + "WebServiceLoginMethodName",
        type: 'GET',
        dataType: 'json',
        headers: { 'Authorization': "Basic " + username + ":" + password }
    });
};

这不会触发 Web 服务上的用户验证器，但这确实让我将用户名和密码放入 Http Headers，接下来我将在应用程序和服务上对其进行加密和解密步骤。

AngularJS 设置 SSL Headers

AngularJS Set SSL Headers

ssl

wcf

angularjs