如何将 Google 的 OpenID 连接提供程序与 CORS 结合使用？答案

【问题标题】：How to use Google's OpenID connect provider with CORS?如何将 Google 的 OpenID 连接提供程序与 CORS 结合使用？
【发布时间】：2016-05-28 10:05:02
【问题描述】：

我编写了一个 JavaScript 应用程序来使用 Google 的 OpenID-Connect 提供程序进行身份验证。我已经在 Google 的开发者控制台上注册了该应用程序。

我正在使用 oidc-client-js 库来处理与 Google 的交互，并将我的应用程序的 client_id 传递给配置，以便将其传递给 Google 以验证我的应用程序。

我的配置：

{
  client_id: 'secret',
  redirect_uri: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/callback`,
  response_type: 'token id_token',
  scope: 'openid profile',
  authority: 'https://accounts.google.com/',
  silent_redirect_uri: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/silent_renew.html`,
  automaticSilentRenew: true,
  filterProtocolClaims: true,
  loadUserInfo: true
};

我的开发服务器在https://localhost:8080 上运行（带有自签名开发证书）。我已在 Google 上将此 URL 和重定向 URI 注册为我的应用程序的授权主机，因此 Google 知道我的开发服务器。当我尝试访问 Google 的 OpenID-Provider 时，出现以下错误：

XMLHttpRequest 无法加载 https://accounts.google.com/.well-known/openid-configuration。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'https://localhost:8080'。

编辑：我已将问题缩小到 Google 的端点没有在其响应中设置任何 CORS 标头。如果我禁用 Chrome 的 CORS 安全设置，身份验证将起作用。这无论如何都是不可取的，但这也意味着 CORS 是这里真正的罪魁祸首。

我有什么方法可以将 CORS 与 Google 的 OpenID 发现文档一起使用？我是否必须在 Google 上为我的服务器注册 CORS 源？

【问题讨论】：

标签： cors google-signin google-authentication openid-connect google-openid

【解决方案1】：

Google 已更新 OpenID Connect 发现文档以支持 CORS。可以再试一次吗？

【讨论】：

我刚刚又试了一次，它成功了。谢谢你的回答！

【解决方案2】：

Google 的 OpenID 发现文档似乎不支持 CORS，因此没有 JavaScript 应用可以访问它（这应该在 Google 方面进行修复）。

为了让它与 oidc-client-js 一起工作，您必须按照wiki 中的描述手动设置从发现文档中获取的信息。

编辑（2016 年 7 月 20 日）： 感谢萌成的回答。 Google 的发现文档现在已经完全支持 CORS。不再需要手动设置发现文档中的信息。

【讨论】：