angular - 为 oauth/token 请求剥离基本授权 header

Question

我的 Oauth2 授权存在严重问题，四个晚上后我慢慢放弃，所以我希望有人可以帮助我。

客户:我有一个 Angular2 客户端作为一个单独的前端项目。我知道 oauth/token post 应该是什么样的，因为我已经用 Postman 测试了它。问题是授权 header 被剥离并且无法到达服务器。注意:我添加了这些访问控制 header ，拼命尝试使其工作。我不确定这是否有什么区别......

let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
headers.append('Accept', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Headers', 'Authorization');
headers.append('Authorization', 'Basic ' + Base64.encode('angularApp:theBiggestSecret'));

let options = new RequestOptions({ headers: headers });

this.http.post(`${this.baseUrl}oauth/token`, "grant_type=password&scope=read&username=test&password=test&client_id=angularApp&client_secret=theBiggestSecret", headers)
  .subscribe(
  response => console.log(response)
);

}

服务器:我有 Spring MVC 应用程序以“WebApplicationInitializer”启动，并在初始化程序中注册了 springSecurityFilterChain。所有配置都是通过注释完成的，根本没有 webapp 内容。从嵌入式码头开始。

我在同一个应用程序中配置了 AuthorizationServer 和 ResourceServer，我通过 http.addFilterBefore 在 SecurityConfiguration 中配置了 CorsFilter，我可以看到它正在工作。

问题:好吧，我的授权 header 仍然被删除，因此基本身份验证无法运行，并且我没有获得该访问 token 。但是，我相信 CORS 现在工作正常，我在浏览器中没有收到与 CORS 相关的错误，我可以将其视为响应 header :

HTTP/1.1 401 Unauthorized
Date: Fri, 23 Sep 2016 21:41:34 GMT
Access-Control-Allow-Origin: *
Vary: Origin
Access-Control-Expose-Headers: Authorization, Content-Type
Cache-Control: no-store
Pragma: no-cache
WWW-Authenticate: Bearer error="unauthorized", error_description="There is no client authentication. Try adding an appropriate authentication filter."
Content-Type: application/json;charset=UTF-8
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Transfer-Encoding: chunked
Server: Jetty(9.3.11.v20160721)

这是在请求中发送的内容:

POST /oauth/token HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 115
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36
content-type: text/plain
Accept: */*
Referer: http://localhost:4200/
Accept-Encoding: gzip, deflate
Accept-Language: cs-CZ,cs;q=0.8,en;q=0.6

Answer 1

您没有在 post() 方法中正确设置 headers。

您可以通过执行以下操作来修复它:

this.http.post(`${this.baseUrl}oauth/token`, '<form data>', { headers: headers })
    .subscribe(response => console.log(response));

您还可以在 URLSearchParams 对象中创建表单数据并将其设置为正文，以便 Angular 会自动将内容类型设置为 application/x-www-form-urlencoded 为您服务。

let body = new URLSearchParams();
body.set('grant_type', 'password');
body.set('scope', 'read');
body.set('username', 'test');
body.set('password', 'test');
body.set('client_id', 'angularApp');
body.set('client_secret', 'theBiggestSecret');

this.http.post(`${this.baseUrl}oauth/token`, body, { headers: headers })
        .subscribe(response => console.log(response));