title: Why isn't clientID enough for using Google APIs?
body: <p>From <a href="https://developers.google.com/apis-explorer/#search/youtube/m/youtube/v3/youtube.channels.list?part=statistics&amp;id=UCE5Au4LfcBHxTQR_yLbncrQ&amp;_h=4&amp;" rel="nofollow noreferrer">Google's API explorer</a> and using <strong>Authorize requests using OAuth 2.0</strong> as I want to on my SPA, I see a <strong>YOUR_API_KEY</strong> is somehow derived from a login and used in subsequent calls to:</p>
  
  <pre><code>https://www.googleapis.com/youtube/v3/channels?part=statistics&amp;id=UCE5Au4LfcBHxTQR_yLbncrQ&amp;key={YOUR_API_KEY}
  </code></pre>
  
  <p>How do I get this key? I am working from <a href="https://github.com/kaihendry/vue-aws/blob/master/src/services/auth.js#L23" rel="nofollow noreferrer">GAPI.auth2.getAuthInstance()</a> in a VueJS app.</p>
  
  <p>I can see <strong>gapi</strong> being used in <a href="https://developers.google.com/api-client-library/javascript/samples/samples#authorizing-and-making-authorized-requests" rel="nofollow noreferrer">Google samples</a>. But I just want to do simple direct <code>fetch</code> calls with this user's API key for the session. I do not want to use <code>gapi.client</code>, or do I have no choice?</p>
  
  <p>Update: On the <a href="https://developers.google.com/oauthplayground/" rel="nofollow noreferrer">Oauth2 playground</a> I see it refers to a client secret <a href="https://i.stack.imgur.com/db9Oq.png" rel="nofollow noreferrer">1</a>. I don't understand this at all, since with a SPA with no backend, you don't want to store a secret! Why isn't the client ID and the <strong>origin</strong> enough?</p>
  
  <p><a href="https://i.stack.imgur.com/db9Oq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/db9Oq.png" alt="Client secret in Oauth token request"></a></p>
  
  <p>Here's <a href="https://github.com/google/google-api-javascript-client/blob/master/samples/authSample.html#L69" rel="nofollow noreferrer">another confusing example</a> (no secret used) where the <strong>apiKey</strong> is used together with the <strong>clientId</strong>. Why isn't <strong>clientId</strong> enough, since it's restricted by origin?!</p>