为什么 clientID 不足以使用 Google API？答案

【问题标题】：Why isn't clientID enough for using Google APIs?为什么 clientID 不足以使用 Google API？
【发布时间】：2017-10-11 09:04:58
【问题描述】：

从Google's API explorer 并使用 Authorize requests using OAuth 2.0 我想在我的 SPA 上，我看到 YOUR_API_KEY 以某种方式从登录中派生并用于后续调用：

https://www.googleapis.com/youtube/v3/channels?part=statistics&id=UCE5Au4LfcBHxTQR_yLbncrQ&key={YOUR_API_KEY}

我如何获得这把钥匙？我在 VueJS 应用程序中使用 GAPI.auth2.getAuthInstance() 工作。

我可以看到Google samples 中使用了 gapi。但我只想使用此用户的会话 API 密钥进行简单的直接 fetch 调用。我不想用gapi.client，还是别无选择？

更新：在Oauth2 playground 上，我看到它指的是客户端机密1。我根本不明白，因为没有后端的 SPA，你不想存储秘密！为什么客户端 ID 和 origin 不够用？

这里是another confusing example（未使用秘密），其中 apiKey 与 clientId 一起使用。为什么 clientId 还不够，因为它受到来源的限制？！

【问题讨论】：

如果我正确理解了您的问题，您是否正在尝试获取您的 API KEY，它应该在您的 Google Developer's Console 中？这将是您的 API 密钥，如果您有一个随机的 API 密钥并且您正在尝试 Fetch() 数据，它将无法工作，因为此 API 密钥与身份验证凭据不匹配。
我希望 API 密钥以某种方式从 GAPI.auth2 对象中明确派生。 IE。一旦用户通过 Google 登录进行身份验证/授权。我的 App IIUC 的 API 控制台不应该有 API 密钥。

【解决方案1】：

通常，在 Web 上获取 access_token 的 OAuth 流程有 2 种类型。一个叫implicit flow，另一个叫authorization code flow。

对于代码流，您需要 client_secret 才能与 access_token 交换代码。这通常发生在服务器端。
对于隐式流，你可以简单地给一个client_id来获取一个access_token，它被设计为在客户端工作。

您附上的屏幕截图是 OAuth 流程部分，您可以在其中使用 access_token 交换身份验证代码。因为 Playground 使用的是授权码流。

你要找的应该是隐式流。

要在 YouTube 客户端库（或任何 Google javascript 客户端库）中实现此目的，您不需要 client_secret。您可以在此处找到使用 Google Drive 的完整示例： https://github.com/GoogleChrome/google-sign-in/blob/master/static/scripts/authorization_client.js

【讨论】：

谢谢！但是，由于我不喜欢 gapi.client 风格的 API，我如何才能获得 访问令牌？我还在github.com/google/google-api-javascript-client/issues/344 上提交了一个错误
您可以使用 AuthResponse 获取原始 access_token。 developers.google.com/identity/sign-in/web/… 不过最好的办法还是使用客户端库。
还有一个问题：id_token 需要什么？
这是身份验证的证明。您可以使用身份提供者对其进行验证。您还可以从中获取用户的个人资料信息。