Angular OAuth2 integration - spring-boot

Question

I am working on a springboot + angular project. And I am implementing oauth for the same.
My Spring boot Oauth services(oauth/token) works fine as expected and was tested in postman successfully. But as am trying to integrate that url with angular, i am continuously facing some trouble. I am always getting 401 unauthorized.
My Angular code is as below
login(userName:any,password:any){
console.log("logged in");
let params = new URLSearchParams();
 params.set('username','1522856566577');   
  params.set('password','sens!tiveP#ss');    
params.set('grant_type','password');
params.set('client_id','clientIdPassword');
params.set('client_secret','secret');
params.set('scope','read');
let headers = new HttpHeaders().
append('Content-type','application/x-www form-urlencoded;
charset=utf- 8').
append('Authorization','Basic '
+btoa("clientIdPassword:secret"));
let options = {
headers:headers
};
  this.http.post('/api/oauth/token',params.toString(), options).subscribe(data => console.log(data),err => console.log('Invalid Credentials')); }}

Answer 1

When you are sending headers from angular, Api needs to allow origins of requests. Add this code in Spring Boot controller above the class like below. After that Api will be allowed to get headers.
#CrossOrigin(origins = "*", maxAge = 3600)
#RestController
public class AuthenticationController {
//services...
}

Answer 2

You are setting client id and secret twice in headers and url search params.try the following code to generate tokens in the service
getToken()
{
const httpOptions = {
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ' + btoa('your_client_id:your_client_pass')
})
};
var body = "grant_type=client_credentials";
return this.http.post('your_url',body,
httpOptions)
.pipe(map(res=>res.json()));
}