Angular2資格情報を送信してトークンを取得する方法

Question

私はAngular2を使用して、Java Springバックエンドアプリケーションからアクセストークンを取得しています。 CURLでトークンを取得できますが、Angularフォームでは取得できません。

curl localhost:8085/uaa/oauth/token --data "grant_type=password&scope=write&username=MY-USERNAME&password=MY-PASSWORD" --user user:pwd 

私は、JavaにこのようなバックエンドをCORSを有効化：

public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException { 
    final HttpServletResponse response = (HttpServletResponse) servletResponse; 
    response.setHeader("Access-Control-Allow-Origin", "*"); 
    response.setHeader("Access-Control-Allow-Credentials", "true"); 
    response.setHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE, GET, HEAD, OPTIONS"); 
    response.setHeader("Access-Control-Allow-Headers", "Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, If-Modified-Since"); 
    chain.doFilter(servletRequest, servletResponse); 
} 

私の角度のコードは次のようになります。

import {Injectable, Component} from 'angular2/core'; 
import {Observable} from 'rxjs/Rx'; 
import {Http, HTTP_PROVIDERS, Headers} from 'angular2/http'; 

@Component({ 
    viewProviders: [HTTP_PROVIDERS] 
}) 

@Injectable() 
export class Authentication { 
    token:string; 
    http:Http; 

    constructor(http:Http) { 
    this.token = localStorage.getItem('token'); 
    this.http = http; 
    } 

    login(username:String, password:String) { 

    var url = 'http://localhost:8085/uaa/oauth/token', 
     body = JSON.stringify({ 
      username: username, 
      password: password 
     }), 
     options = { 
      headers: new Headers({ 
       'credentials': 'true', 
       'grant_type': 'password', 
       'scope': 'write', 
       'Accept': 'application/json', 
       'Content-Type': 'application/x-www-form-urlencoded' 
      }) 
     }; 

     return this.http.post(url, body, options) 
     .map((res:any) => { 
      let data = res.json(); 
      this.token = data.token; 
      localStorage.setItem('token', this.token); 
     }); 
    } 
} 

サーバーからの応答は次のとおりです。

Request URL:http://localhost:8085/uaa/oauth/token 
Request Method:OPTIONS 
Status Code:401 Unauthorized 
Remote Address:[::1]:8085 

Answer 1

次の2つの問題がある可能性があります：

1. OPTIONS呼び出しはプリフライト呼び出しです。 CORS標準では、プリフライトコールには認証が含まれてはならないと記載されています。サーバーがそれを処理するように設定されていない場合は、401という応答が得られます。サーバーを制御できる場合は、何かを追加してOPTIONSコールスルーを許可する必要があります。あなたが特定のサーバーだについて

   if ($request_method = 'OPTIONS') {return 200;}

   わからない：nginxのではあなたのような何かを追加することができます。

2. 正しい方法でクレデンシャルを送信してもよろしいですか？あなたがカール要求をしているように、フォームエンコードされたデータではなく、すべてを個別のヘッダーとして送信しているようです。これは私のために働いています：

   var headers = new Headers(); 
   headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
   
   var credentials = "grant_type=authorization_code 
          + "&credentials=true" 
          + "&scope=write" 
          /* etc. */ 
   
   
   this.http.post('http://some.url', credentials, { headers: headers }) 
       .subscribe((res) => token = res.json()) 
   

Answer 2

Authorizationヘッダー内の「基本」スキームのユーザー名/パスワードのヒント。値はbtoa機能付きのbase64でエンコードする必要があります。

headers.append('Authorization', 'Basic ' + btoa('username:password'); 

はまた、あなたのカーリングリクエストでalookを持った後、あなたがヘッダに入れたものをペイロードに提供されるべきであると思われます。これは、UrlSearchParamsクラスを使用して行うことができます。詳細は

参照RHISの質問は：

• Angular2 Http post request not binding to ASP.NET 5 controller's action