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

Question

I have an oauth-server secured with 'spring-cloud-oauth2' and 'spring-cloud-security' and the application is a spring-boot application. I am trying to get access_token from an angular 2 app, i.e. I want to login from angular 2 app. In my oauth-server I have a client-id=microservice and client-secret=microservicesecret. I have checked the oauth-server from postman where, in the authorization section, for username and password, I use the client-id and client-secret respectively. And in the body section, I use grant_type=password, client_id=microservice, username=m@email.com, password=passw0rd and everything works great.

But, I am having trouble using the configuration in angular 2 app. I have used the following code-snippets.

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

Here userEmail and userPassword is inserted by the user. The token url is

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

But, I am gettng 401 error. I need solution.

score 1 · Accepted Answer · answered Mar 06 '17 at 21:25

Were you tried to get token via Postman or something similar. There are many reason to get HTTP 401. If you post spring auth server log and request details, it would be more clear to understand.

I'm sharing my login function works well via Spring Boot Auth Server. I use Authorization Hedar with Basic BASE64 Token instead of using 'client_id' and '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); });

}

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

1 Answers1