Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display Google sign-in button using HTML

<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?

like image 840
Daniele Cappuccio Avatar asked Oct 09 '17 20:10

Daniele Cappuccio


1 Answers

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>
like image 200
Daniele Cappuccio Avatar answered Oct 07 '22 01:10

Daniele Cappuccio