Google Oauth implementation using MEAN stack
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
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
All you have to do is send $window.location.href="URL"
Hope it helps
链接地址: http://www.djcxy.com/p/83214.html