使用 MEAN 堆栈的 Google Oauth 实现

Posted 2023-02-19

【中文标题】使用 MEAN 堆栈的 Google Oauth 实现

【英文标题】：Google Oauth implementation using MEAN stack

【发布时间】：2017-07-04 21:56:11

【问题描述】：

我对我正在设计的一个简单应用程序的架构有疑问。

我的基于 rest 的 api 服务器位于 http://localhost:3000 的 Node 中 我的客户是在 http://localhost:4200 使用 Angular 2 编写的

在开发我的 rest 节点 api 服务器时，我成功实现了护照谷歌身份验证，我使用 http://localhost:3000/auth/google 和 我被重定向到谷歌登录页面，然后在登录后进一步重定向到由我的休息节点 api 提供的 /profile

现在我正在尝试做同样的事情，但起点是我的 Angular 客户端，它调用节点 api 服务器来调用 google auth。所以我最初的请求是从 http://localhost:4200 执行 http.get 到 http://localhost:3000/auth/google。希望谷歌身份验证页面出现让我进行身份验证，但我收到以下错误

XMLHttpRequest 无法加载 https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_ur…=1000090953925-p7jof0qa284ihknb5sor3i4iatnqarvo.apps.googleusercontent.com。 重定向自 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_ur…=1000090953925-p7jof0qa284ihknb5sor3i4iatnqarvo.apps.googleusercontent.com' 到 'https://accounts.google.com/ServiceLogin?passive=1209600&continue=https://a…sercontent.com%26from_login%3D1%26as%3D60339aeceb428c&oauth=1&sarp=1&scc=1' 已被 CORS 策略阻止：没有“访问控制允许来源” 请求的资源上存在标头。原点“空”是 因此不允许访问。

我已在授权 javascript 来源下的 google auth 页面中的两个端口中包含 url http://localhost:3000 http://localhost:4200 并在授权重定向 URI 中 我已经包括 http://localhost:3000/auth/google/callback

节点api服务器中的以下代码

app.get('/auth/google', passport.authenticate('google', scope : ['profile', 'email'] )); app.get('/auth/google/callback', 护照。身份验证（“谷歌”， successRedirect : '/profile', 失败重定向：'/用户' ), );

任何帮助表示赞赏

【参考方案1】：

两件事：由于后端和前端位于不同的端口上，您需要让后端在您的回复中包含CORS header 'Access-Control-Allow-Origin'。如果您使用的是 express，则如下所示：

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

另外，只要确保浏览器中的地址始终是 http://localhost 而不是 file强>://localhost

【讨论】：

嗨 Roy，我不希望 api 服务器能够被除前端之外的任何其他应用程序调用，所以我在 api 服务器中有以下内容，只允许我的客户端应用程序在 port4200 res 上运行.header('Access-Control-Allow-Origin', 'localhost:4200'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type');

嘿Vinay，如果你指定一个域，你也应该添加协议。所以在localhost:4200前面加上http://。

不工作然后我添加了 * 但仍然存在重定向 XMLHttpRequest 无法加载 localhost:3000/auth/google 的问题。从“localhost:3000/auth/google”重定向到“accounts.google.com/o/oauth2/v2/…...=1000090953925-p7jof0qa284ihknb5sor3i4iatnqarvo.apps.googleusercontent.com”已被 CORS 政策阻止：请求需要预检，不允许进行跨域重定向。

抱歉之前错过了。将选项添加到您的允许方法： res.header('Access-Control-Allow-Methods', 'OPTIONS,GET,PUT,POST,DELETE');

也试过了。是否可以通过电子邮件进行交流。如果是，我的电子邮件是 [e-mail]。我可以分享我拥有的角度和节点代码

【参考方案2】：

你所要做的就是 发送$window.location.href="URL"

希望对你有帮助