如何将 Angular 2 应用程序与 spring-oauth2 服务器连接？答案

【问题标题】：How to connect angular 2 application with spring-oauth2 server?如何将 Angular 2 应用程序与 spring-oauth2 服务器连接？
【发布时间】：2023-04-04 04:27:01
【问题描述】：

我有一个使用“spring-cloud-oauth2”和“spring-cloud-security”保护的 oauth-server，该应用程序是一个 spring-boot 应用程序。我正在尝试从 Angular 2 应用程序获取 access_token，即我想从 Angular 2 应用程序登录。在我的 oauth-server 中，我有一个 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 应用程序中的配置时遇到了问题。我使用了以下代码-sn-ps。

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 是由用户插入的。令牌网址是

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

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

【问题讨论】：

标签： angular spring-cloud spring-oauth2 spring-cloud-security

【解决方案1】：

您是否尝试通过 Postman 或类似的方式获取令牌。获得 HTTP 401 的原因有很多。如果您发布 spring auth 服务器日志和请求详细信息，就会更清楚地理解。

我正在通过 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); });

}

【讨论】：