如何从 Google OAuth2 获取用户信息

Question

Google 正在强制升级他们的 authentication/authorization 机制，弃用他们现有的机制。

整个“GoogleAuth”对象和所有方法都已弃用。

迁移指南提供了旧的 > 新的指南和示例（其中许多不能像描述的那样工作，但那是另一回事）。

旧的 GoogleAuth 对象有一个特别必要的方法 .getUserInfo()。

文档不提供此对象上大多数方法的迁移路径，也不提供此对象的迁移路径。（迁移文档仅针对此方法说“删除”。）迁移中示例代码的 None 为此提供了指导。

有一组配套文档描述了不同的代码路径，似乎与新的 Google 身份服务不完全兼容，这表明用户数据嵌入在 JWT 中，但是没有提供有关如何解密该 JWT 的指导。

我用于验证、授权和访问 google 的 api 的代码或多或少可以正常使用（仍然会在每次加载新页面时弹出一个对话框，仍在处理中），但是在仔细检查每个迁移文档、代码示例和大量搜索后，获取用户信息让我很沮丧。

有人破解过这个坚果吗？

我非常害怕答案如此简单，以至于我花了一整天的时间来敲自己的脑袋。

我更怕不可能！

Answer 1

是的，这是可能的。我理解您的沮丧，但您的“问题”更多是关于表达您的沮丧，而不是解释您到目前为止所做的事情以便我们可以帮助您。但是，让我尝试提供尽可能多的帮助。

正如您已经发现的那样，“Google 身份服务”将“授权”和“身份验证”分为两个不同的部分。（在我个人看来，这让我们开发人员更难了，尽管他们[google] 声称更安全，但我不这么认为）。

我认为您需要“身份验证”部分，因为您需要用户信息。在这种情况下，您必须遵循指南 documented here.

是否要使用“使用 Google 登录”按钮或“一次点击”提示，由您决定。我决定使用“一次点击”提示。取回凭据响应后，您必须解码响应中的 JWT。您可以使用许多 JWT 库，为了本示例的目的，我使用了这个：https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/8.0.20/jsrsasign-all-min.js，但是您有责任找到一个允许您这样做的安全库，因此 Google不推荐任何。

这是我使用的代码示例：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://accounts.google.com/gsi/client" async defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/8.0.20/jsrsasign-all-min.js"></script>
</head>
<body>

  <h1>Hello World!</h1>

  <div id="signinBox"></div>
  
  <script src="app.js"></script>
</body>
</html>

app.js

window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'blablabla.apps.googleusercontent.com',
    callback: handleCredentialResponse,
    ux_mode: "redirect",
    prompt_parent_id: "signinBox",
    context: "signin",
    cancel_on_tap_outside: false,
    auto_select: true
  });
  google.accounts.id.prompt((notification) => {
    if(notification.isNotDisplayed() || notification.isSkippedMoment()) {
      console.log("Prompt cancelled by user");
    }
  });
};

const handleCredentialResponse = (credsResponse)=>{
  console.log(credsResponse);
  var headerObj  = KJUR.jws.JWS.readSafeJSONString(b64utoutf8(credsResponse.credential.split(".")[0]));
  var payloadObj  = KJUR.jws.JWS.readSafeJSONString(b64utoutf8(credsResponse.credential.split(".")[1]));
  console.log(headerObj);
  console.log(payloadObj);
};

在运行上面的例子之后，你会在“payloadObj”中看到用户信息。它应该包含 explained here.

的所有信息

如何从 Google OAuth2 获取用户信息

How to get user info from Google OAuth2

javascript

google-api

oauth-2.0

google-oauth