How to display Google sign-in button using HTML

html oauth google-api googlesigninapi
Daniele Cappuccio picture Daniele Cappuccio · Oct 9, 2017 · Viewed 52.7k times · Source 
<html>
   <head>      
      <meta name="google-signin-scope" content="profile email">
      <meta name="google-signin-client_id" content="MY_CLIENT_ID_ON_GOOGLE_DEV.apps.googleusercontent.com">
      <!-- To integrate Google Sign-in -->
      <script src="https://apis.google.com/js/api.js"></script>
      <script src="https://apis.google.com/js/platform.js" async defer></script>
   </head>
   <body>
      <div class="g-signin2" data-onsuccess="onSignIn"></div>
   </body>
</html>

It is not displayed. What's wrong with this HTML snippet? Do I have to do something else to display the Google sign-in button?

Answer

Daniele Cappuccio picture Daniele Cappuccio · Nov 30, 2019

If you use Bootstrap v4, you can get a nice-looking button like the one below with something like:enter image description here

<div class="row">
  <div class="col-md-3">
    <a class="btn btn-outline-dark" href="/users/googleauth" role="button" style="text-transform:none">
      <img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
      Login with Google
    </a>
  </div>
</div>

<!-- Minified CSS and JS -->
<link   rel="stylesheet" 
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
        crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
        crossorigin="anonymous">
</script>

Related questions

OAuth not working inside an iframe

I have built a Fiddle on JSFiddle which retrieves an OAuth access token via Foursquare's "token" response type. One or two days ago this was working fine. When "Login with Foursquare" was clicked Foursquare's authorization page appeared and I was …

Read More
How to create an HTML button that acts like a link?

I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible. I would also like it so …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More