如何从 id_token Google Javascript API 客户端 (GAPI) 检索电子邮件地址

Question

我有一个带有 Firebase 后端的 SPA，并且集成了 Google 日历访问权限。

为了能够授权用户使用他/她的 Google 日历，我使用了gapi.auth2.authorize(params, callback) 方法。 （这与常规的 gapi.auth2.init 和 signIn 流程相反，因为我的用户可以链接多个日历帐户）

Docs:gapi.auth2.authorize

我遇到的问题：

有时从authorize 返回的id_token 包含电子邮件地址，有时则不包含。

返回的 id_token 是一个长字符串，可以在前端使用 JavaScript 函数读取，如下所示：

    function parseJwt (token) {
      let base64Url = token.split('.')[1]
      let base64 = base64Url.replace('-', '+').replace('_', '/')
      return JSON.parse(window.atob(base64))
    }

当我解析 id_token 时，我期待一个包含email 地址的对象。但是有时它根本不包括 email 属性.... 如何使用 JavaScript 从此 id_token 中检索用户的谷歌日历电子邮件地址，以便将其保存到用户的 firestore 数据库中？

解析 id_token 时的预期结果示例：

意外结果示例（无电子邮件）：

可能原因：

我认为这可能与未返回电子邮件的帐户是 Google G-Suite 帐户有关？确实返回电子邮件的是普通的 gmail 帐户？但我不知道解决方案。

PS：
我为返回用户重新授权的流程是使用相同的gapi.auth2.authorize，但使用{prompt: 'none', login_hint: 'emailaddress'}，并填写用户保存的电子邮件地址。这很好用。

Answer 1

如果您想使用 gapi.auth2.authorize 授权 JavaScript 客户端，但还需要用户授权的电子邮件地址，请确保在 gapi.auth2.authorize(params, callback) 参数的范围内包含 email ！！

使用JavaScript gapi授权谷歌日历的正确示例：

步骤 1.
包含在主 HTML 头中：

<script type=text/javascript src="https://apis.google.com/js/api.js" async defer=defer></script>

第 2 步。
（一次）加载客户端：
window.gapi.load('client', callbackFunction)
重要提示：仅加载客户端！

第 3 步。
（一次）初始化客户端以使用 Calendar API。
重要提示：仅包含发现文档！

let calDocs = {
    discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest']
}
window.gapi.client.init(calDocs)
    .then(_ => {
      console.log('Calendar client initialised')
    })
  })
},

第 4 步。
（一次）使用
gapi.auth2.authorize(params, callbackFunction)
重要提示：范围是带空格的字符串！在范围中包括电子邮件，授权 gapi 客户端进行 API 调用.不要在此处包含发现文档！

params = {
    client_id: clientId,
    scope: 'https://www.googleapis.com/auth/calendar email',
    response_type: 'permission id_token'
}

您可以在任何带有额外参数的 API 调用之前重复 gapi.auth2.authorize：{prompt: 'none', login_hint: 'emailaddress'} 以刷新用户的访问令牌。如果用户已经为您的域授权过一次，这将不会向用户显示任何提示。