如何将适用于 JavaScript 的 Google API 客户端与一键式登录流程结合使用?



我正在使用 Google 一键登录来验证用户,在用户通过身份验证后,我会收到一个访问令牌。我知道我可以使用此访问令牌来与适用于JavaScript的Google API客户端("GAPI")一起使用。但是我找不到任何使用此访问令牌与 GAPI 合作的方法。

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

我正在尝试做的是在简单地使用一键式身份验证进行身份验证并同意日历一次后访问用户日历。

首先:
没有办法用一键登录返回的响应来"验证"谷歌 JS API 客户端。

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

如何授权 gapi 客户端

首先阅读文档并了解其警告非常重要:

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

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

第 1
步 让用户登录谷歌一键登录。

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

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

例:

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

使用提示:"none",您可以尝试在没有任何 UI 的情况下获取令牌。这对于检查是否需要显示"授权"按钮非常有用,在调用日历 API 以获取新令牌之前也很有用。

步骤4
在我们调用gapi.client.calendar之前,我们需要仅使用日历discoveryDocs初始化client

gapi.client.init({discoveryDocs})

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

如果提供了 OAuth 客户端 ID 和作用域,则此函数将加载 gapi.auth2 模块以执行 OAuth

这基本上意味着:只要您给出clientIDscopegapi.client.init就会尝试启动传统的身份验证方法。
在我们的例子中:我们不需要传递clientIDscope,因为我们已经在步骤 3中完成了此操作。

那么客户端如何知道要初始化哪个模块呢? → 仅传递要使用的模块的 discoveryDocs!在本例中为日历发现文档。

第 5 步
现在您完成了!您可以通过以下方式提出请求:gapi.client.calendar.events.list()


完整示例

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

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

最新更新