0

I am having doubts on the architecture for a simple app i am desiging.

My rest based api server is in Node which is at http://localhost:3000 My client is written in Angular 2 at http://localhost:4200

While developing my rest node api server I was successful in implementing passport google authentication which i tested using http://localhost:3000/auth/google and I get redirected to the google login page and then further after logging in i get redirected to my /profile served by my rest node api

Now i am trying to do the same but starting point is my angular client which calls the node api server to call google auth. so my initial request starts from http://localhost:4200 which does a http.get to http://localhost:3000/auth/google. hoping that the google auth page shows up for me to authenticate but i get the below error

XMLHttpRequest cannot load https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_ur…=1000090953925-p7jof0qa284ihknb5sor3i4iatnqarvo.apps.googleusercontent.com. Redirect from 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_ur…=1000090953925-p7jof0qa284ihknb5sor3i4iatnqarvo.apps.googleusercontent.com' to 'https://accounts.google.com/ServiceLogin?passive=1209600&continue=https://a…sercontent.com%26from_login%3D1%26as%3D60339aeceb428c&oauth=1&sarp=1&scc=1' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I have included the url's with both the ports in google auth page under Authorised JavaScript origins http://localhost:3000 http://localhost:4200 and in the Authorised redirect URIs i have included http://localhost:3000/auth/google/callback

Below code in the node api server

app.get('/auth/google', passport.authenticate('google', { scope : ['profile', 'email'] })); app.get('/auth/google/callback', passport.authenticate('google', { successRedirect : '/profile', failureRedirect : '/users' }), );

Any help appreciated

Vinay Prabhakaran
  • 773
  • 6
  • 18

2 Answers2

0

Two things: because the backend and frontend are on different ports you'll need to have your backend include the CORS header 'Access-Control-Allow-Origin' on your responses. Something like this if you're using express:

res.header('Access-Control-Allow-Origin', '*');

Also, just make sure that the address in the browser is constantly http://localhost and not file://localhost

Roy Reiss
  • 963
  • 9
  • 19
  • hi Roy, i didn't want the api server to be able to be called by any other application except the front end so i have the below in api server allowing only my client app running on port4200 res.header('Access-Control-Allow-Origin', 'http://localhost:4200'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type'); – Vinay Prabhakaran Feb 16 '17 at 08:40
  • Hey Vinay, you should add the protocol too if you're specifying a domain. So add http:// in front of localhost:4200. – Roy Reiss Feb 16 '17 at 15:04
  • not working then i added the * but still issue with redirect XMLHttpRequest cannot load http://localhost:3000/auth/google. Redirect from 'http://localhost:3000/auth/google' to 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_ur…=1000090953925-p7jof0qa284ihknb5sor3i4iatnqarvo.apps.googleusercontent.com' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect. – Vinay Prabhakaran Feb 16 '17 at 15:16
  • Sorry missed that before. Add OPTIONS to your Allow Methods: res.header('Access-Control-Allow-Methods', 'OPTIONS,GET,PUT,POST,DELETE'); – Roy Reiss Feb 16 '17 at 16:31
  • tried that too. would it be possible to communicate via email. if yes, my email is vinaykaran@gmail.com. i can share the angular and node code i have – Vinay Prabhakaran Feb 16 '17 at 16:44
  • Here's a question that handles the redirect error: http://stackoverflow.com/questions/34949492/cors-request-with-preflight-and-redirect-disallowed-workarounds Setting up OAUTH with a REST backend is a little tricky and you're going to run into a lot more of these sort of requirements. – Roy Reiss Feb 16 '17 at 16:51
  • i used a npm module angular2-social-login for angular 2 and got it working without going through the rest api for the social logins. – Vinay Prabhakaran Feb 17 '17 at 00:44
0

All you have to do is send $window.location.href="URL"

Hope it helps

FelixSFD
  • 6,052
  • 10
  • 43
  • 117
sachin yadav
  • 337
  • 1
  • 4
  • 17