使用 Javascript 解码 Google Oauth2 访问令牌答案

【问题标题】：Decode Google Oauth2 Access Token with Javascript使用 Javascript 解码 Google Oauth2 访问令牌
【发布时间】：2015-07-01 23:26:51
【问题描述】：

我想在 google oauth2 使用 javascript 提供的访问令牌（given_name、family_name、email、userid....）中显示所有信息。

有没有一个很好的例子/演示已经完成了？如果没有，解码在 oauth2 上使用 javascript 登录时获得的访问令牌的最佳方法是什么。

我找到了这个显示姓名和个人资料图片的示例，但我不明白他们是如何做到的： (http://www.gethugames.in/blog/2012/04/authentication-and-authorization-for-google-apis-in-javascript-popup-window-tutorial.html)

【问题讨论】：

标签： javascript oauth google-api-client

【解决方案1】：

该信息不在令牌中，它只是用作授权证明的令牌，并且对于大多数或所有 Google API 需要每小时刷新一次。该令牌证明用户已授权 Google 将该信息提供给程序。

在该示例第 5 步中，对 getUserInfo() 的调用将令牌传递回 Google。要调用工作和获取信息，用户必须事先授予该权限：

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

权限与应用程序相关联，授权也是如此。

【讨论】：

在第 5 步中，他们使用它来获取名称和图片： $('#uName').append(user.name); $('#imgHolder').attr('src', user.picture);但是 .append 和 .attr 是什么？
啊，那是 jquery……它只是将用户名附加到一个 id 为 'uName' 的 html 元素，并将一个 id 为 'imgHolder' 的图像的源属性设置为用户的图片链接。 (w3schools.com/jquery/html_append.asp)
仍然很难使用此代码。还有其他更好的只使用 JS 的例子吗？
继续谷歌搜索。他们有大量的文档游乐场和隐藏在 (developers.google.com) 下的示例

【解决方案2】：

你可以通过这个函数解码-

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);

输出是：-

{ iss: 'accounts.google.com',
  azp:
   '89838985845-261g3g9ob1244uvajvvj4fkueehhdfhsj.apps.googleusercontent.com',
  aud:
   '89838985845-261g3g9ob1244uvajvvj4fkueehhdfhsj.apps.googleusercontent.com',
  sub: '1001728418648724577297',
  email: 'rajputankit22@gmail.com',
  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' }

【讨论】：