如何将 angular 2 应用程序连接到 spring-oauth2 服务器？

Question

我有一个使用 'spring-cloud-oauth2' 和 'spring-cloud-security' 保护的 oauth-server，该应用程序是一个 spring-boot 应用程序。我正在尝试从 angular 2 应用程序获取 access_token，即我想从 angular 2 应用程序登录。在我的 oauth 服务器中，我有一个 client-id=microservice 和 client-secret=microservicesecret。我已经从邮递员那里检查了 oauth-server，在授权部分，对于用户名和密码，我分别使用了 client-id 和 client-secret。在正文部分，我使用 grant_type=password，client_id=microservice，username=m@email.com，password=passw0rd，一切正常。

但是，我在使用 angular 2 应用程序中的配置时遇到问题。我使用了以下代码片段。

userLogin(){
    console.log("In the userLogin()");
   var username:string='microservice';
   var password:string='microservicesecret';
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('grant_type','password');
    headers.append('client_id','microservice');
    headers.append('client_secret','microservicesecret');
    headers.append('username',this.user.userEmail);
    headers.append('password',this.userPassword);
    console.log("User");
    console.log(this.user);
    console.log(headers);
    console.log( JSON.stringify({username:username,password:password}));
    var data = "username=" + username + "&password=" + password ;


    this.http
      .post(this.loginUrl,
      JSON.stringify({user,password}),
        {headers}
      )
      .map(res=>res.json())
      .map((res)=>{
        if(res.success){
          console.log("Success");
          localStorage.setItem('access_token',res.access_token);
          console.log("Access token");
          console.log(res.access_token);
        }
      });
  }

此处userEmail 和userPassword 由用户插入。令牌 url 是

loginUrl:string="http://localhost:9000/services/oauth/token";

但是，我遇到了 401 错误。我需要解决方案。

Answer 1

您是否尝试通过 Postman 或类似方式获取令牌。出现 HTTP 401 的原因有很多。如果你 post spring auth server log 和 request details，就会更清楚明白。

我正在分享我的登录功能，通过 Spring Boot Auth Server 运行良好。我将 Authorization Hedar 与 Basic BASE64 Token 一起使用，而不是使用 'client_id' 和 'client_secrete' .

public login(username: string, password: string): Observable<TokenModel> {
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
headers.append('Accept', 'application/json');
headers.append('Authorization', '**Basic BASE64TOKEN!!**');

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

let params = new URLSearchParams();
params.append('username', username.valueOf());
params.append('password', password.valueOf());
params.append('scope', this.scope);
params.append('grant_type', this.grant_type);

return this.http.post(this.accessTokenUri, params.toString(), options)
  .map(response => { return <TokenModel>response.json(); })
  .do(token => {
    this.storageService.setStorage('id_token', token.access_token);
  })
  .catch(error => { return this.handleError(error); });

}

如何将 angular 2 应用程序连接到 spring-oauth2 服务器？

How to connect angular 2 application with spring-oauth2 server?

spring-cloud

spring-oauth2

spring-cloud-security

angular