採用了棱角分明2彈簧安全的oauth2 REST

我創建使用例如Spring Security中的OAuth2服務器從https://github.com/royclarkson/spring-rest-service-oauth 採用了棱角分明2彈簧安全的oauth2 REST

在curl命令的OAuth2用戶認證請求如下如何提出請求。我想要Angular2中的等效語法。

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"

這裏是我的嘗試：

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

但是，當我啓動這個應用程序的谷歌Chrome瀏覽器開發者模式，返回此錯誤：

的XMLHttpRequest無法加載http://localhost:8080/oauth/token。預檢響應具有無效的HTTP狀態碼401

例外：URL 0：與狀態響應空

來源

2016-11-10 Hugo Silva

找到我的問題的原因！

我只需要結束filterchain並立即返回結果，如果一個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() { } 
}

來源

2016-11-12 18:17:23

使用代碼：

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

}

來源

2017-02-08 22:55:46

採用了棱角分明2彈簧安全的oauth2 REST

回答

相關問題