How to do oAuth2 Basic authentication with angular 2?

Question

I'm doing oauth2 with angular 2.

Here is the POST URL = "http://localhost:8080/OAuth2Example/oauth/token?grant_type=password&username=bill&password=abc123".

how to pass clientId and client secret in frontend with one of validated user and get access token?

If any plugin is available in angular2 or any configuration please suggest me!

I tried like,

private getHeaders(){
    // I included these headers because otherwise FireFox
    // will request text/html
    let headers = new Headers();
    let auth_data = 'username=my-trusted-client&password=secret';
    headers.append('Accept', 'application/json');
    headers.append('Authorization', auth_data);
    return headers;
  }

  testRequest() {
     let data = 'grant_type=password&username=bill&password=abc123';
     let postResponse = this.http
      .post(`${this.baseUrl}/oauth/token?`, data, {headers: 
         this.getHeaders()})
       .toPromise()
      .then(this.mapResult);
     return postResponse;

}

When i execute Post call,

XMLHttpRequest cannot load http://localhost:8080/OAuth2Example/oauth/token?/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 401.

this error I saw at console.

I have a postman collection snaps to quickly identify what i need exactly, I achieved oauth2 from postman like below.

This is exactly i need to get it from angular 2 too.

Thanks,

Is http://localhost:8080/SpringSecurityOAuth2Example/oauth/token?/ the literal path the actually shows? Because the token?/ part looks like a mistake. It also doesn’t at all match the http.get request code shown in the question. And that request code doesn’t match the “POST URL” shown at the beginning of the question. So it’s hard to try to figure out what might be going on here, but regardless, if the server you’re sending that request to responds to the OPTIONS request for that path with a 401, then you’re not going to be able to get the browser to ever even try that POST request — sideshowbarker
Anyway to be clear, because your request adds an Authorization header, it triggers your browser to automatically on its own do a CORS preflight OPTIONS request before ever trying the POST from your code. And the error message indicates that preflight is failing because the response to the OPTIONS request is a 401 rather than the 200 OK or 204 that the browser needs to see in order to consider the preflight a success. — sideshowbarker
Auth0 have a really good step by step documentation to do this and other stuff, definitively you need to read before search a third party plugin: auth0.com/blog/angular-2-authentication , auth0.com/docs/quickstart/spa/angular2/01-login, auth0.com/docs/quickstart/spa/angular2/01-login — xzegga
Try instead .post(`${this.baseUrl}/oauth/token`, data, {headers: this.getHeaders()}). That is, remove the ? from the end of the request URL. — sideshowbarker
Thing is i need a setup of setting Authorization header with client secret and username. Later i need to login with the user's credentials. This is what i need exactly. Doing above doesn't work for me if you read proper oauth2 structure for angular2 share with me. — Jaccs

k11k2 k11k2 · Accepted Answer · 2017-08-31T04:30:43

If any plugin is available in angular2 or any configuration please suggest me!

There are lot of examples for different platform as you asked for angular 2 you could follow this link which work for me LINK

and your exception looks like regarding cors.

How to do oAuth2 Basic authentication with angular 2?

1 Answers