使用 Javascript 解碼 Google Oauth2 訪問令牌

Question

我想在 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 )

Answer 1

該信息不在令牌中，它只是用作授權證明的令牌，並且對於大多數或所有 Google API 需要每小時刷新一次。 該令牌證明用戶已授權 Google 將該信息提供給該程序。

在該示例第 5 步中，對 getUserInfo() 的調用將令牌傳遞回 Google。 要使調用正常工作並獲取信息，用戶必須事先授予該權限：

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

權限與應用程序相關聯，授權也是如此。

Answer 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' }