Issue

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

Solution

This is an elegant solution I came up with using materializecss.

Google sign-in button

Code

<div class="col s12 m6 offset-m3 center-align">
    <a class="oauth-container btn darken-4 white black-text" href="/users/google-oauth/" style="text-transform:none">
        <div class="left">
            <img width="20px" style="margin-top:7px; margin-right:8px" 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" />
        </div>
        Login with Google
    </a>
</div>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

Answered By - Daniele Cappuccio

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Saturday, August 6, 2022

[FIXED] How to display Google sign-in button using HTML

Issue

Solution

Code

No comments:

Post a Comment