Http Angular2如何通过发送凭据获取令牌

我使用Angular2从Java Spring后端应用程序获取访问令牌。 我可以通过旋度得到标记，但不能通过角度形式

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

我的角度代码如下所示：

 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

---

您应该在带有“基本”方案的授权标头中提供用户名/密码提示。该值必须通过btoa函数用base64编码：

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

此外，在对您的卷曲请求进行alook之后，似乎应该在有效负载中提供您在头中放置的内容。这可以使用UrlSearchParams类完成

有关更多详细信息，请参见rhis问题：

---

您可能有两个问题：

• OPTIONS

  呼叫是飞行前呼叫。CORS标准规定飞行前呼叫不应包括身份验证。如果您的服务器未设置为处理该问题，您将得到

  401

  响应。如果您可以控制服务器，您应该能够添加一些内容，以允许

  选项

  调用。使用NGINX，您可以添加以下内容：

  if（$request_method='OPTIONS'）{return 200；}

  不确定您是否是特定的服务器

• 您确定以正确的方式发送凭据吗？看起来您将所有这些作为单独的头发送，而不是像curl请求那样以表单编码的数据发送。这对我起了作用：

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

---

问题可能在于你的角度服务。我认为您不应该将body作为包含用户名和密码的对象发送，而应该发送包含“grant_type”、“username”和“password”的字符串。 这是我的工作服务方法的示例：

    postAuth(url: string, data?: LoginCredentials){

    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });  
    let options = new RequestOptions({ headers: headers });

    //here I am setting username and password which I got from html form
    var body = "grant_type=password&username="+ data.Email + 
               "&password=" + data.Password; 

    return this.http.post(url, body, options);
  }

---

以下是正在工作的Nginx default.config的代码

upstream book_up {
    server localhost:3002; 
}

server
{

    location /login {
        proxy_pass http://book_up/book/user/login;
    }
    location /health {
        proxy_pass http://book_up/book/health;
    }

    location /book {
        auth_request /auth;
        proxy_pass http://book_up$request_uri;
    }

    location = /auth {
        if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
        proxy_pass http://book_up/book/user/auth/;
        proxy_set_header Content-Length "";
        proxy_set_header   X-Original-URI $request_uri;
    }
}