Angular2 Come ottenere token inviando credenziali

Question

Sto utilizzando Angular2 per ottenere token di accesso da un'applicazione back-end Java Spring. Posso ottenere il token tramite CURL ma non via modulo angolare.

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

ho attivato Cors su Java back-end come questo:

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

Il mio codice angolare simile al seguente:

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

La risposta del server è:

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

Answer 1

Si potrebbe avere due problemi:

1. La chiamata OPTIONS è una chiamata di verifica preliminare. Lo standard CORS afferma che le chiamate di preflight non dovrebbero includere l'autenticazione. Se il tuo server non è configurato per gestirlo, riceverai una risposta 401. Se hai il controllo sul server dovresti essere in grado di aggiungere qualcosa per consentire la chiamata tramite OPTIONS. Con Nginx è possibile aggiungere qualcosa di simile:

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

   Non sei sicuro di sei server specifico.

2. Sei sicuro di inviare le credenziali nel modo giusto? Sembra che tu stia inviando tutto questo come intestazioni individuali piuttosto che dati codificati come se fossi con la richiesta di ricciolo. Questo ha funzionato per me:

Answer 2

È necessario fornire il suggerimenti nome utente/password nell'intestazione Autorizzazione con lo schema "Base". Il valore deve codificati con base64 con la funzione btoa:

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

Inoltre, dopo aver alook a richiesta curling, sembra che ciò che si mette nelle intestazioni devono essere fornite nel payload. Questo può essere fatto usando la classe UrlSearchParams.

questione Vedere Rhis per maggiori dettagli:

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