设置使用 0Auth 2.0 的开发环境答案

【问题标题】：Setting up a development environment for working with 0Auth 2.0设置使用 0Auth 2.0 的开发环境
【发布时间】：2021-10-19 00:28:48
【问题描述】：

我很好奇是否有其他人遇到过这个问题。

我正在构建一个应用程序，它将使用 Google 0Auth 2.0 + OpenID 对用户进行身份验证。我用 HTML 和 CSS 构建了一个简单的网站来保存 UI，我正在使用 Vscode 中的实时服务器来查看它。

在 oauth 的 Google 开发者控制台中，您必须为客户端应用程序设置授权的 JavaScript 来源。我以为我只是将其设置为 http://localhost:5500 用于实时服务器使用的端口，但我总是收到以下错误：

授权错误错误 400：invalid_request 为目标域生成登录提示的权限被拒绝。

我已经解决了这个问题，只需获取一个域并托管一个测试站点并将其设置为“授权的 JavaScript 源”。但是，这似乎真的很笨重，每次我想更改我的代码时，我都必须将所有文件 FTP 到我的托管服务提供商。

我还可以在本地计算机上将所有内容托管在 Node.js 服务器上，但这只会导致与以前相同的问题。

我的问题不是如何停止出现此错误，而是使用 OAuth 2.0 进行开发的正确方法是什么，是否有任何方法可以加快流程/创建不会出现相同错误的本地环境.

感谢您的帮助。

【问题讨论】：

对于本地环境...将您的域指向您的公共家庭 IP（即不是 192.168.x 或 10.x 等家庭情况下常见的“私有”IP，您有一个公共在这种情况下的 IP 地址）...如果您的公共家庭 IP 不是静态的，请使用动态 DNS 服务 - 另外，希望您的互联网提供商不使用 CGNAT - 那么这些都无济于事 - 除非您使用 IPv6
另外，看看“谷歌开发者”是否像一个开发选项，你可以避免所有这些并发症

【解决方案1】：

这个 Google 问题here 的答案可能会对您有所帮助。

我一直设置 OAuth 环境的方式是尽量避免使用本地主机并在开发人员 PC 上使用更多真实世界的 URL。我也喜欢这样拆分它们，这有助于我可视化架构：

这种方法还可以让您更有信心，您的代码将在以下领域中运行良好：

默认情况下，您只需要编辑主机文件并添加这样的条目。对于商务人士的演示，它也可以很好地工作。

127.0.0.1 localhost www.example.com api.example.com login.example.com
:1        localhost

高级场景

在 Curity，我们提供了一些非常高级的开发人员设置，并且这种方法可以很好地扩展，如下面的文章所示。其中的第二个还提供了一个脚本，您可以使用它在 SSL 上本地运行，以防万一这有用：

【讨论】：