如何通过一键登录流程使用适用于 JavaScript 的 Google API 客户端?

问题描述

我正在使用 Google One-Tap 登录进行身份验证用户，在用户通过身份验证后，我会得到一个访问令牌.我知道我可以使用此访问令牌来使用 适用于 JavaScript 的 Google API 客户端(GAPI").但是我找不到任何使用此访问令牌使用 GAPI 的方法.

I'm using Google One-Tap sign in to authenticate users, and after the user is authenticated I get an access token. I know that I can use this access token in order to work with the Google API client for JavaScript ("GAPI"). But I can't find any way to work with GAPI using this access token.

假设我已经有一个登录用户，有什么方法可以使用 GAPI?

Is there any way to use GAPI assuming I already have an logged in user?

我想要做的是在简单地通过一键式身份验证进行身份验证并同意日历一次后访问用户日历.

What I'm trying to do is access the user calendar after simply authenticating with One-Tap authentication and giving consent for the calendar once.

推荐答案

首先:
没有办法认证"带有一键登录返回的响应的 google JS api 客户端.

幸运的是，我们不需要使用 gapi JS 客户端进行身份验证，因为我们使用了一个名为 gapi.auth2.authorize 的便捷函数！

Luckily we don't need to authenticate with the gapi JS client because we use a handy function called gapi.auth2.authorize!

请务必先阅读文档 并理解他们的警告:

It's important to first read the docs and understand their warning:

不要将此方法与推荐的 gapi.auth2.init 和 signIn 流程一起使用.这是两种不同的行为(gapi.auth2.authorize 的授权与 gapi.auth2.init/signIn 的身份验证)，如果在同一应用程序中使用，则会出现意外问题.

现在的问题是如何完全避免 init/signIn 方法.

Now the question is how to completely avoid the init/signIn method.

步骤 1
让用户登录 Google One-Tap 登录.

Step 1
Sign the user into the Google One-Tap sign in.

第2步
加载gapi客户端:window.gapi.load('client')

第 3 步
将 Google One-Tap 返回的 credential.id(电子邮件地址)作为 login_hint 参数传入调用授权.这将预先选择帐户，我们可以尝试不显示任何新的登录弹出窗口(提示).

Step 3
Pass the credential.id (the email address) returned by Google One-Tap as the login_hint param in the call to authorize. This will preselect the account and we can try to not show any new login pop-up (prompt).

示例:

gapi.auth2.authorize({
  client_id,
  prompt: 'none',
  response_type: 'permission', // Access Token.
  scope: 'CALENDAR_SCOPE',
  login_hint: credential.id
}, function(result) {})

使用 prompt: 'none'，您可以尝试在没有任何 UI 的情况下获取令牌.这对于检查您是否需要显示授权按钮很有用，并且在调用 Calendar API 以获取新令牌之前也很有用.

Using prompt: 'none', you can try to fetch a token without any UI. This is useful to check whether you need to show an Authorize button, and also useful before making any call to the Calendar API to get a fresh token.

第 4 步
在我们可以对 gapi.client.calendar 进行任何调用之前，我们需要仅使用日历 discoveryDocs.

Step 4
Before we can make any call to gapi.client.calendar we need to initialize the client with just the calendar discoveryDocs.

gapi.client.init({discoveryDocs})

这是最棘手的部分，在任何地方都没有正确记录！我们可以从 api.client.init() 检索的唯一内容 文档 是以下行:

This is the most tricky part and is not properly documented anywhere! The only thing we can retrieve from the api.client.init() documentation is the following line:

如果提供了 OAuth 客户端 ID 和范围，此函数将加载 gapi.auth2 模块以执行 OAuth

这基本上意味着:只要您提供 clientID 或 scope gapi.client.init 将尝试启动传统的身份验证方法.
在我们的例子中:我们不需要传递 clientID 或 scope，因为我们已经在步骤 3 中做到了这一点.

This basically means: as soon as you give either clientID or scope gapi.client.init will try and start the traditional authentication method.
In our case: we don't need to pass the clientID or scope as we've already done this in step 3.

那么客户端怎么知道要初始化哪个模块呢?→ 只传递您要使用的模块的 discoveryDocs！在本例中为日历发现文档.

So how does the client know which module to initialize? → By only passing the discoveryDocs of the module you want to use! In this case the calendar discoveryDocs.

第 5 步
现在你完成了！您可以使用例如提出请求gapi.client.calendar.events.list()

可以在下面找到完整的代码示例:

A full code example can be found here below:

const config =  {
  response_type: 'permission',
  scope: 'CALENDAR_SCOPE',
  client_id: clientId,
  login_hint: credential.id,
  promt: 'none',
}
gapi.auth2.authorize(config, function(response) {
  // No need to `setToken`, it's done for you by auth2.
  let calConfig = {discoveryDocs} // only of google calendar
  window.gapi.client.init(calConfig).then(function() {
    // then execute a calendar call:
    window.gapi.client.calendar.events.list({'calendarId': 'primary'})
  })
})

这篇关于如何通过一键登录流程使用适用于 JavaScript 的 Google API 客户端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！