How I make a request using Angular 2 to spring-security-oauth2 REST

Question

I have created a Spring Security OAuth2 server using a example from https://github.com/royclarkson/spring-rest-service-oauth

The OAuth2 authentication request in CURL command is as below. I want the equivalent syntax in Angular2.

curl -X POST -vu clientapp:123456 http://localhost:8080/oauth/token -H "Accept: application/json" -d "password=spring&username=roy&grant_type=password&scope=read%20write&client_secret=123456&client_id=clientapp"

Here is what I tried:

import { Injectable } from '@angular/core';
import {Http, Headers, RequestOptions, RequestMethod} from '@angular/http';
import {Router} from '@angular/router';

@Injectable()
export class AuthService {
    isAuthenticated: boolean = false;
    userId;

    constructor(private http: Http, private router: Router) { }

    login(usercreds){
      let client_id = 'clientapp';
      let client_secret = '123456';
      var basicheader = btoa(client_id + ':' + client_secret);
      console.log(basicheader);
      var headers = new Headers();

      headers.append('Authorization', 'Basic' + basicheader);
      headers.append('Accept', 'application/json');
      headers.append('Content-Type', 'application/json');
      //let options = new RequestOptions( {method: RequestMethod.Post,   headers: headers });

      var creds = 'username=' + usercreds.username + '&password=' +  usercreds.password+'credentials=true&grant_type=password&scope=read%20write&client_secret=123456&client_id=clientapp';
      console.log(creds); 

     return new Promise((resolve) => {
        this.http.post('http://localhost:8080/oauth/token',    JSON.stringify(creds), {headers:headers}).subscribe((data) => {
        if(data.json().success) {
            this.userId = data.json().userId;      
            this.isAuthenticated = true;
        }
            resolve(this.isAuthenticated);
    })
  })
}
}

But when I launch this application the Google Chrome browser returns this error in developer mode:

XMLHttpRequest cannot load http://localhost:8080/oauth/token. Response for preflight has invalid HTTP status code 401

EXCEPTION: Response with status: 0 for URL: null

Hugo Silva · Accepted Answer · 2016-11-12 18:17:23Z

Found the reason for my Problem!

I just needed to end the filterchain and return the result immediatly if a OPTIONS request is processed by the CorsFilter! So, I added this class in the web service developed with spring oauth2 security.

SimpleCorsFilter.java

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class SimpleCorsFilter implements Filter {

   public SimpleCorsFilter() {}

   @Override
   public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
      HttpServletResponse response = (HttpServletResponse) res;
      HttpServletRequest request = (HttpServletRequest) req;
      response.setHeader("Access-Control-Allow-Origin", "*");
      response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
      response.setHeader("Access-Control-Max-Age", "3600");
      response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization");

      if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
          response.setStatus(HttpServletResponse.SC_OK);
      } else {
          chain.doFilter(req, res);
     }
 }

  @Override
  public void init(FilterConfig filterConfig) {}

  @Override
  public void destroy() { }
}

Stefan Falk · Accepted Answer · 2017-11-01 16:10:56Z

Use the code:

let headers = new Headers({
            "Content-Type": "application/x-www-form-urlencoded",
            "Accept": "application/json",
            "Authorization": "Basic " + btoa("yourclientid" + ':' + "yourclientsecret")
        });
let options = new RequestOptions({ headers: headers });

let data = "username=" + yourlogin + "&password=" + encodeURIComponent(yourpass) + "&grant_type=password&" +
            "client_secret=yoursecret&client_id=yourclientid";

return this.http.post("http://localhost:8080/oauth/token", data, options)
            .map(res => res.json());

Follow my file:

import { Injectable } from '@angular/core'
import { Resources } from '../../config/resources';
import { Http } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';

@Injectable()
export class LoginService {
    private urlLogin: string;

    constructor(private http: Http) {
        this.urlLogin = Resources.getUrlBackend() + "oauth/token";
    }

    public login(usuario) {

        let headers = new Headers({
            "Content-Type": "application/x-www-form-urlencoded",
            "Accept": "application/json",
            "Authorization": "Basic " + btoa("clientapp" + ':' + "springSecurity")
        });

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

        let client = "username=" + usuario.email + "&password=" + encodeURIComponent(usuario.senha) + "&grant_type=password&" +
            "client_secret=springSecurity&client_id=clientapp";

        return this.http.post(this.urlLogin, client, options)
            .map(res => res.json());
    }

}

Collectives™ on Stack Overflow

How I make a request using Angular 2 to spring-security-oauth2 REST

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related