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

Posted 2023-02-27

【中文标题】如何将 Angular 2 应用程序与 spring-oauth2 服务器连接？

【英文标题】：How to connect angular 2 application with spring-oauth2 server?

【发布时间】：2017-07-09 21:17:21

【问题描述】：

我有一个使用“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=[e-mail]、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 错误。我需要解决方案。

【参考方案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); );