Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

Javascript OAuth2 One Tap Auto Google Login & Logout Project Using JWT & Google Identity Services System

Posted on April 18, 2023

 

 

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

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme