Mise en œuvre de Google Oauth en utilisant la pile MEAN

Question

Je doute de l'architecture d'une application simple que je désigme.

serveur api basé Mon repos est dans le nœud qui est à http://localhost:3000 Mon client est écrit dans angulaire 2 à http://localhost:4200

Tout en développant mon noeud reste serveur api j'ai réussi à mettre en œuvre l'authentification de Google passeport que je testé à l'aide http://localhost:3000/auth/google et Je suis redirigé vers la page de connexion google et puis après m'être connecté je suis redirigé vers mon/mon profil servi par mon noeud de repos api

Maintenant j'essaye de faire la même chose mais le point de départ est mon client angulaire qui appelle le serveur api de noeud pour appeler google auth. donc ma demande initiale commence à http://localhost:4200 qui fait un http.get à http://localhost:3000/auth/google. en espérant que la page auth Google montre pour moi d'authentifier, mais j'obtenir l'erreur ci-dessous

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.

J'ai inclus de l'URL avec les deux ports dans la page google auth en JavaScript autorisés origines http://localhost:3000 http://localhost:4200 et dans le autorisé redirect URIs j'ai inclus http://localhost:3000/auth/google/callback

Ci-dessous le code dans le serveur api noeud

app.get ('/ Auto h/google, passport.authenticate ('google', {scope: ['profile', 'email']})); app.get ('/ auth/google/rappel', passport.authenticate ('google', { successRedirect: '/ profile', failureRedirect: '/' utilisateurs }), );

Toute aide appréciée

Answer 1

Deux choses: parce que le back-end et frontend sont sur différents ports que vous aurez besoin d'avoir votre back-end comprennent les CORS header 'Access-Control-Allow-Origin' vos réponses. Quelque chose comme cela si vous utilisez express:

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

Aussi, assurez-vous que l'adresse dans le navigateur est constamment http: // localhost et non fichier: // localhost

Answer 2

Tout ce que vous avez à faire est envoyer $window.location.href="URL"

Hope it helps