Decode Google Oauth2 Access Token with Javascript

Question

I want to display all the information in an access token (given_name, family_name, email, userid....) given by google oauth2 with javascript.

Is there a good example/demo where this is already done? If not, what is the best way to decode the access token you get when you log in with javascript on oauth2.

I found this example that displays name and profile picture, but I don't understand how they did it: (http://www.gethugames.in/blog/2012/04/authentication-and-authorization-for-google-apis-in-javascript-popup-window-tutorial.html)

HeyHeyJC · Accepted Answer · 2015-07-01 23:38:02Z

1

That information isn't in the token, which is just that, a token used as proof of authorization, and which for most or all Google API's needs to be refreshed hourly. The token is proof that the user has authorized Google to give that information to the program.

In that example step 5, the call to getUserInfo() passes the token back to Google. For the call to work, and to get the info, the user must have previously granted that permission:

USERINFO_SCOPE: 'https://www.googleapis.com/auth/userinfo.profile'

The permission is tied to the application, as is the authorization.

answered Jul 1, 2015 at 23:38

HeyHeyJC

2,9573 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jm874327 Over a year ago

In step 5 they use this to get the name and picture: $('#uName').append(user.name); $('#imgHolder').attr('src', user.picture); But what is .append and .attr?

HeyHeyJC Over a year ago

Ah, that's jquery... it's just appending the user's name to an html element with an id of 'uName', and setting the source attribute of an image that has an id of 'imgHolder' to the user's picture link. (w3schools.com/jquery/html_append.asp)

jm874327 Over a year ago

Still having a hard time with this code. Are there any other better examples that use only JS?

HeyHeyJC Over a year ago

Keep googling. They've got vast quantities of documentation playgrounds and examples hidden under (developers.google.com)

Ankit Kumar Rajpoot · Accepted Answer · 2020-02-01 21:50:14Z

You can Decode via this function-

const {OAuth2Client} = require('google-auth-library');
const client = new OAuth2Client(CLIENT_ID);
async function verify() {
  const ticket = await client.verifyIdToken({
      idToken: token,
      audience: CLIENT_ID,
  });
  const payload = ticket.getPayload();
  const userid = payload['sub'];
  console.log(userid);

}
verify().catch(console.error);

Output is :-

{ iss: 'accounts.google.com',
  azp:
   '89838985845-261g3g9ob1244uvajvvj4fkueehhdfhsj.apps.googleusercontent.com',
  aud:
   '89838985845-261g3g9ob1244uvajvvj4fkueehhdfhsj.apps.googleusercontent.com',
  sub: '1001728418648724577297',
  email: '[email protected]',
  email_verified: true,
  at_hash: 'y0_OmfSbg-iHOq__Km-5kw',
  name: 'Ankit Kumar Rajpoot',
  picture:
   'https://lh3.googleusercontent.com/a-/AAuE7mBrCW_ubLUHpnqwQZ1DvLDb9E4IHxfy43K6amNwt1Q=s96-c',
  given_name: 'Ankit',
  family_name: 'Kumar Rajpoot',
  locale: 'en',
  iat: 1580591026,
  exp: 1580594626,
  jti: 'fbbfca7sghsdhjfghsdfgh74888jhsd88s986d9876b30d' }

Collectives™ on Stack Overflow

Decode Google Oauth2 Access Token with Javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related