title: How does one show the default Google signin button without using a META tag?
body: <p>The following article shows how to show a default Google sign in button...
  <a href="https://developers.google.com/identity/sign-in/web/sign-in" rel="nofollow noreferrer">https://developers.google.com/identity/sign-in/web/sign-in</a></p>
  
  <p>Using the following code, the signin button shows just fine.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="google-signin-client_id" content="MYCLIENTID.apps.googleusercontent.com"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="g-signin2" data-onsuccess="onSignIn"&gt;&lt;/div&gt;
  
      &lt;script src="https://apis.google.com/js/platform.js" async defer
              onload="this.onload = handleClientLoad()"
              onreadystatechange="if (this.readyState === 'complete') this.onload()"&gt;
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>results in...</p>
  
  <p><a href="https://i.stack.imgur.com/X5M4M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X5M4M.png" alt="enter image description here"></a></p>
  
  <p>The article also mentions the CLIENT_ID can be specified in the gapi.auth2.init() method.  <em>I assume this means the meta tag isn't needed if the CLIENT_ID is passed in this manner?</em></p>
  
  <p><a href="https://i.stack.imgur.com/huJt7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/huJt7.png" alt="enter image description here"></a></p>
  
  <p>So with the following code...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="g-signin2" data-onsuccess="onSignIn"&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          function handleClientLoad() {
              gapi.load('client:auth2', initClient);
          }
  
          function initClient() {
              // Client ID and API key from the Developer Console
              var CLIENT_ID = 'MY_CLIENT_ID.apps.googleusercontent.com';
  
              // Array of API discovery doc URLs for APIs used by the quickstart
              var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
  
              // Authorization scopes required by the API; multiple scopes can be
              // included, separated by spaces.
              var SCOPES = "https://www.googleapis.com/auth/calendar";
  
              gapi.client.init({
                  apiKey: 'MY_API_KEY',
                  discoveryDocs: DISCOVERY_DOCS,
                  clientId: CLIENT_ID,
                  scope: SCOPES
              }).then(function () {
              });
          }
  
      &lt;/script&gt;
      &lt;script src="https://apis.google.com/js/platform.js" async defer
              onload="this.onload = handleClientLoad()"
              onreadystatechange="if (this.readyState === 'complete') this.onload()"&gt;
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The button doesn't show. </p>
  
  <p>How can I show the default Google signin button without using a meta tag with the CLIENT_ID in the header?  Also, is it a security risk to have the CLIENT_ID and API_KEY exposed in the web page?  I suppose Oauth Restrictions and API Key Restrictions mitigate the risk?</p>