【问题标题】：Google OAuth - Where to Store Client IDGoogle OAuth - 存储客户端 ID 的位置
【发布时间】：2020-09-19 05:51:06
【问题描述】：

我点击此链接以允许我的用户通过 google 进行身份验证：
https://dev.to/jorgecf/integrating-google-authentication-with-your-angular-app-4j2a

但是，我的 UI 代码中必须包含我的 Google 客户端 ID：

return pload.then(async () => {
  await gapi.auth2
    .init({ client_id: 'abc123' })  // Put my client ID here. How should I store this?
    .then(auth => {
      this.gapiSetup = true;
      this.authInstance = auth;
    });
});

这是一个安全问题吗？如果是这样，我将在哪里/如何存储它？

【问题讨论】：

标签： angular typescript oauth-2.0 google-oauth

【解决方案1】：

我收到了类似的问题，所以我认为这是一个有效的问题。

Oauth2 流程需要浏览器中的 client_id，因此不是安全问题。

为什么？ : 因为这就是 OAUTH2 SPECIFICATION

的定义方式

https://www.rfc-editor.org/rfc/rfc6749#section-4.1.1

为什么需要client_id？

您的 Angular 代码需要 client_id 来生成 auth url，然后重定向到该 url。无论 oauth2 提供者（google、facebook 等）如何，该 url 都具有以下语法：

https://auth.acme.com/auth?response_type=code&redirect_uri=https://myweb.com/callback&client_id=******

注意 redirect_uri 和 client_id 字段。

这个 auth url 负责显示登录表单、接收凭据并执行重定向到 redirect_uri 发送 code 值

会有什么问题？

在您的前端（角度）中包含秘密将是安全问题。

此密钥必须与客户端 ID 和其他字段一起使用，以从 google 检索您案例中的 access_token。如果您拥有正确的权限，此令牌将允许您使用 google api（驱动器、地图等）。

此流程必须在您的后端

怎么局部隐藏呢？

在您的后端创建 auth url 并使用 302 http 代码将其返回到您的前端。浏览器将执行瞬时重定向。

我说的是部分，因为好奇的朋友可能会停止重定向（esc 键）或使用浏览器控制台并查看包含 client_id 字段的auth url p>

随时使用此聊天室https://chat.stackoverflow.com/rooms/215054/oauth2-budy 提出与 oauth2 相关的其他问题

【讨论】：

【解决方案2】：

我一直使用的选项是使用您的 Web 静态内容部署配置文件，并在其中包含 Public Open Id Connect 设置。

这是来自我的代码示例的example configuration file。当然，任何人都无法根据此信息获取令牌 - 此外您还需要有效的凭据。

UI 和 API 等组件通常被下推到管道中：

开发
质量检查
分期
生产

您的持续交付流程可以处理向管道的每个阶段交付不同的设置。这样您的代码就干净了，并且永远不会包含任何硬编码值。

【讨论】：