Basic Authorization Header für oauth/Token Anfrage abgestreift

Question

Ich habe ein ernstes Problem mit meiner Autorisierung Oauth2 und ich gebe langsam nach vier Abenden auf, so hoffe ich, dass mir jemand helfen kann.

Client: Ich habe einen Angular2-Client als separates Front-End-Projekt. Ich weiß wie oauth/token Post gefallen soll, denn ich habe es bereits mit Postman getestet. Die Sache ist, dass der Autorisierungsheader entfernt wird und den Server nicht erreicht. Hinweis: Ich habe diese Access-Control-Header in einem verzweifelten Versuch hinzugefügt, damit es funktioniert. Ich bin nicht sicher, ob es einen Unterschied macht ...

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) 
); 

}

Server: Ich habe Spring MVC-Anwendung mit "WebApplicationInitializer" gestartet, mit springSecurityFilterChain direkt in dem Initializer registriert. Die gesamte Konfiguration erfolgt über Annotationen, überhaupt keinen WebApp-Inhalt. Begann in einem eingebetteten Steg.

Ich habe sowohl AuthorizationServer als auch ResourceServer in der gleichen Anwendung konfiguriert, ich konfigurierte CorsFilter in SecurityConfiguration über http.addFilterBefore und ich kann es funktioniert sehen.

Problem: Nun, meine Autorisierung Header wird immer noch abgestreift, so dass grundlegende Authentifizierung nicht ausgeführt wird, und ich bekomme nicht dieses Access Token. Ich glaube jedoch, dass CORS richtig im Augenblick arbeiten, ich bin nicht CORS Fehler in Browser bekommen, und ich kann dies als Antwort-Header sehen:

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) 

Dies ist, was in Anfrage gesendet wird:

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

Sie setzen headers nicht ordnungsgemäß in der Methode.

Sie können das Problem beheben, indem Sie diese:

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

Sie können auch Ihre Formulardaten in einem URLSearchParams-Objekt erstellen und es als den Körper so eingestellt, dass Angular den Inhaltstyp application/x-www-form-urlencoded für Sie automatisch eingestellt.

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));