Authenticate UBER API through AngularJS 6 & Node - node.js

Question

I am working on an application, in this application we consume UBER API. I am using NODE as backend and AngularJS 6 as frontend.
Workflow
In NODE part I have access authentication and other UBER API. i have tested through JQuery. It's working perfectly. But when I am trying to access with AngularJS 6. I am getting following error.
SyntaxError: Unexpected token h in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:11697:51) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2743:31) at Object.onInvokeTask (http://localhost:4200/vendor.js:41155:33) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2742:36) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2510:47) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:2818:34) at invokeTask (http://localhost:4200/polyfills.js:3862:14) at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:3888:17)
text: "https://login.uber.com/oauth/v2/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Flogin&scope=profile%20history%20places%20request&client_id=XXXXXXXXXXXXXXXXXXXXXXXXX"
__proto__: Object
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for http://localhost:1455/api/login"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost:1455/api/login"
__proto__: HttpResponseBase
Here is my code
NODE
app.get('/api/login', function(request, response) {
response.header('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
response.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
response.setHeader('Access-Control-Allow-Credentials', true);
var authURL=uber.getAuthorizeUrl(config.uber.scopes);
response.redirect(authURL);
});
AngularJS 6
data.service.ts
UberAuthenticate(){
return this.http.get('http://localhost:1455/api/login');
}
login.components.ts
export class LoginComponent implements OnInit {
constructor(private dataService: DataService) {
}
ngOnInit() {
this.dataService.UberAuthenticate().subscribe((response)=>{
console.log('response is ', response)
},(error) => {
console.log('error is ', error)
})
}
}
My Node application in running on PORT:1455, AngularJS PORT:4200 and callback url http://localhost:1455/api/callback.
I also set some configuration in proxy.config.json
{
"/api/*": {
"target": "http://localhost:1455",
"secure": false,
"changeOrigin": false,
"pathRewrite": {"^/api" : ""}
}
}
I haven't experience on NODE and AngularJS 6. I don't know where I am doing wrong?

Answer 1

Since the authorize endpoint is returning a plain text link, you need to specify it to angular in your service like this:
UberAuthenticate(){
return this.http.get('http://localhost:1455/api/login', { responseType: 'text' });
}
And in the NodeJS part, you will have to return the authorization url, the redirection has to be made in the frontend side.