BUY FULL SOURCE CODE
Welcome folks today in this blog post we will be integrating one tap
google login and logout project using jwt
and google identity services in browser using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>One-tap Auto Login Example</title> <script src="https://accounts.google.com/gsi/client" async defer></script> <script> function handleCredentialResponse(response) { console.log(response) if (response.credential) { // The user is logged in. // Decode the JWT token and show the user's profile information. var jwt = response.credential; var user = JSON.parse(atob(jwt.split('.')[1])); document.getElementById('profile').innerHTML += `Welcome, ' + ${user.name} with email ${user.email}<br><br>`; document.getElementById('profile').innerHTML += `<img src="${user.picture}"/>` document.getElementById('logout-button').style.display = 'inline'; } else { document.getElementById('login-button').style.display = 'inline'; } } function init() { google.accounts.id.initialize({ client_id: '494419600913-b22ce3maudb4o2fut5n6jvskikgbmf4e.apps.googleusercontent.com', auto_select: true, callback: handleCredentialResponse }); google.accounts.id.prompt(); } function handleLogout() { google.accounts.id.disableAutoSelect(); google.accounts.id.prompt(); document.getElementById('profile').innerHTML = `` document.getElementById('logout-button').style.display = 'none' } </script> </head> <body onload="init()"> <h1>One-tap Auto Login Example</h1> <p id="profile"></p> <button id="logout-button" style="display:none" onclick="handleLogout()">Logout</button> </body> </html> |
Now we need to replace the url
of your application to get the client_id
as shown above.
As you can see we are showing the user profile
information in browser using automatically login the google account. Now we need to replace the client_id
from the google cloud console as shown below
BUY FULL SOURCE CODE