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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related