How to extract full information of the users using google one tap signin?

Question

I am trying to create a platform for google my business and i have implemented one tap signin and in that i am getting the credentials but not the full information.here are my tried code

 <script>
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "clientid.apps.googleusercontent.com",
          callback: handleCredentialResponse,
        });
        google.accounts.id.prompt((notification) => {
          if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
            console.log("opted out");
          }
        });
        function handleCredentialResponse(response) {
           console.log(response)
          // window.location = "https://github.com/";
        }
      };
    </script>

here is the response i am getting

{
  clientId:
    "clientid.apps.googleusercontent.com",
  credential:
    "eyJhbGciOiJSUzI1NiIsImtpZCI6ImYwNTQxNWIxM2FjYjk1OT…40Jk8v3LcOvtopFD_tI2HMlFjg0dK96XrqNiOD0H3Akl",
  select_by: "user",
};

score 17 · Answer 1 · answered Apr 03 '21 at 06:23

17

You can use this function to parse the JWT token:

function parseJwt (token) {
   var base64Url = token.split('.')[1];
   var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
  var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));

  return JSON.parse(jsonPayload);
};

and then you can do :

    function handleCredentialResponse(response) {
       //console.log(response)
      
        console.log(JSON.stringify(parseJwt(response.credential)));
    }

Result:

answered Apr 03 '21 at 06:23

Julien

3,743
9
38
67

Fantastic. Worked perfectly. Could you explain why the "replace" and "charCodeAt" steps are needed? I understand basically what they do, but not why they are needed. Are they Google specific, or an artifact of some required pre-transmition encoding? – cdehaan Jul 01 '21 at 08:17
Of course it is not secure. see [this](https://stackoverflow.com/questions/27301557/if-you-can-decode-jwt-how-are-they-secure). google has documentation to do it securely. tokeninfo endpoint for debugging and outh2 library. – Amin Mir Jul 26 '21 at 10:33

score 1 · Answer 2 · answered Sep 01 '20 at 10:20

What do you mean by "full information"?

An ID token is returned in the credential field. The id token contains some user's profile information, as defined in https://openid.net/specs/openid-connect-core-1_0.html#IDToken. To parse the ID token, you can find a library at https://openid.net/developers/jwt/ or https://jwt.io/.
Google One Tap doesn't support to 1) return more profile information in the ID token; 2) load an access token so as to access more user profile data. You need to look at Google OAuth 2.0 documentation to find a way for loading access tokens.

In summary, Google One Tap is service optimized for basic 3P authentication scenarios (say, sign-in and sign-up, etc.). It doesn't cover, and doesn't want to cover, all possible OAuth 2.0 scenarios.

How to extract full information of the users using google one tap signin?

2 Answers2