私は春・セキュリティのOAuth2 REST

Question

に角度2を使用して要求を作るにはどうすればcurlコマンドでのOAuth2認証要求は以下の通りですhttps://github.com/royclarkson/spring-rest-service-oauth

からの例を使用して春のセキュリティのOAuth2サーバーを作成しました。私はAngular2で同等の構文が必要です。

import { Injectable } from '@angular/core'; 
import {Http, Headers, RequestOptions, RequestMethod} from '@angular/http'; 
import {Router} from '@angular/router'; 

@Injectable() 
export class AuthService { 
    isAuthenticated: boolean = false; 
    userId; 

    constructor(private http: Http, private router: Router) { } 

    login(usercreds){ 
     let client_id = 'clientapp'; 
     let client_secret = '123456'; 
     var basicheader = btoa(client_id + ':' + client_secret); 
     console.log(basicheader); 
     var headers = new Headers(); 

     headers.append('Authorization', 'Basic' + basicheader); 
     headers.append('Accept', 'application/json'); 
     headers.append('Content-Type', 'application/json'); 
     //let options = new RequestOptions({method: RequestMethod.Post, headers: headers }); 

     var creds = 'username=' + usercreds.username + '&password=' + usercreds.password+'credentials=true&grant_type=password&scope=read%20write&client_secret=123456&client_id=clientapp'; 
     console.log(creds); 

    return new Promise((resolve) => { 
     this.http.post('http://localhost:8080/oauth/token', JSON.stringify(creds), {headers:headers}).subscribe((data) => { 
     if(data.json().success) { 
      this.userId = data.json().userId;  
      this.isAuthenticated = true; 
     } 
      resolve(this.isAuthenticated); 
    }) 
    }) 
} 
} 

しかし、私はこのアプリケーションを起動したときにGoogle Chromeブラウザは、開発者モードでこのエラーを返します：ここで

curl -X POST -vu clientapp:123456 http://localhost:8080/oauth/token -H "Accept: application/json" -d "password=spring&username=roy&grant_type=password&scope=read%20write&client_secret=123456&client_id=clientapp" 

は、私が試したものです

• のXMLHttpRequestがhttp://localhost:8080/oauth/tokenをロードすることはできません。プリフライトのための応答が無効なHTTPステータスコード401
• 例外があります：URL 0：ステータスを持つレスポンスヌル

Answer 1

は私の問題の原因を発見しました！

OPTIONSリクエストがCorsFilterによって処理された場合は、フィルタチェーンを終了して結果をすぐに返すだけでした。 したがって、私はspring oauth2セキュリティで開発されたWebサービスにこのクラスを追加しました。

SimpleCorsFilter.java

@Component 
@Order(Ordered.HIGHEST_PRECEDENCE) 
public class SimpleCorsFilter implements Filter { 

    public SimpleCorsFilter() {} 

    @Override 
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { 
     HttpServletResponse response = (HttpServletResponse) res; 
     HttpServletRequest request = (HttpServletRequest) req; 
     response.setHeader("Access-Control-Allow-Origin", "*"); 
     response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 
     response.setHeader("Access-Control-Max-Age", "3600"); 
     response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization"); 

     if ("OPTIONS".equalsIgnoreCase(request.getMethod())) { 
      response.setStatus(HttpServletResponse.SC_OK); 
     } else { 
      chain.doFilter(req, res); 
    } 
} 

    @Override 
    public void init(FilterConfig filterConfig) {} 

    @Override 
    public void destroy() { } 
} 

Answer 2

利用コード：

let headers = new Headers({ 
      "Content-Type": "application/x-www-form-urlencoded", 
      "Accept": "application/json", 
      "Authorization": "Basic " + btoa("yourclientid" + ':' + "yourclientsecret") 
     }); 
let options = new RequestOptions({ headers: headers }); 

let data = "username=" + yourlogin + "&password=" + encodeURIComponent(yourpass) + "&grant_type=password&" + 
      "client_secret=yoursecret&client_id=yourclientid"; 

return this.http.post("http://localhost:8080/oauth/token", data, options) 
      .map(res => res.json()); 

私のファイルは、次のとおりです。

import { Injectable } from '@angular/core' 
import { Resources } from '../../config/resources'; 
import { Http } from '@angular/http'; 
import { Headers, RequestOptions } from '@angular/http'; 

@Injectable() 
export class LoginService { 
    private urlLogin: string; 

    constructor(private http: Http) { 
     this.urlLogin = Resources.getUrlBackend() + "oauth/token"; 
    } 

    public login(usuario) { 

     let headers = new Headers({ 
      "Content-Type": "application/x-www-form-urlencoded", 
      "Accept": "application/json", 
      "Authorization": "Basic " + btoa("clientapp" + ':' + "springSecurity") 
     }); 

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

     let client = "username=" + usuario.email + "&password=" + encodeURIComponent(usuario.senha) + "&grant_type=password&" + 
      "client_secret=springSecurity&client_id=clientapp"; 

     return this.http.post(this.urlLogin, client, options) 
      .map(res => res.json()); 
    } 

} 

を