CODEWITHSUNDEEP
google-signingoogle-identitygoogle-developer-toolsgoogle-one-tap
Ashik72
Ashik72

Reputation: 193

Google One Tap UI Not Showing

I am trying to show Google One Tap UI on a barebone template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://accounts.google.com/gsi/client" async defer></script>

</head>
<body>
    
    <div id="g_id_onload"
     data-client_id="00000-xx000rrr.apps.googleusercontent.com"
     data-context="signin"
     data-login_uri="https://example.com/login/"
     data-auto_select="true">
</div>

</body>
</html>

It showing nothing! I tried on incognito, configured oauth consent screen and whitelisted the localhost domain (with ssl).

What am I missing here?

enter image description here

Upvotes: 1

Views: 2078

Answers (2)

bdid
bdid

Reputation: 565

As a simple first test, you might try using a callback and console.log() to output the credential. Then add your back-end server into the mix once you're happy with the UI and confirm your understanding of the sign-in flow.

Incognito mode is the best way to ensure you've not accidentally triggered the exponential cooldown timer.

Visit https://myaccount.google.com/security, Signing in to other sites to find your app, revoke it's permissions to reset the sign-in flow, and to confirm the global opt-out is enabled.

Removing data-auto_select will display the One Tap popup, including it will instead show the automatic sign-in prompt on return visits.

Upvotes: 1

firewolf006
firewolf006

Reputation: 73

As is this will automatically log in a user that has given consent to your app. If anything you'll see a popup that says signing in. What you need is to include the HTML for the button to show up. Like this

<div class="g_id_signin"
     data-type="standard"
     data-shape="rectangular"
     data-theme="outline"
     data-text="signin_with"
     data-size="large"
     data-logo_alignment="left">
</div>

Also it won't work at all over http, the site has to be https.

you can check here for a generator https://developers.google.com/identity/gsi/web/tools/configurator

Upvotes: 3

Related Questions