我正在使用Google One-Tap 登录对用户进行身份验证,在用户通过身份验证后,我得到了一个访问令牌。我知道我可以使用此访问令牌来使用适用于 JavaScript 的 Google API 客户端(“GAPI”)。但我找不到使用此访问令牌使用 GAPI 的任何方法。
假设我已经有一个登录用户,有什么方法可以使用 GAPI?
我要做的是在简单地通过一键式身份验证进行身份验证并同意日历一次后访问用户日历。
我正在使用Google One-Tap 登录对用户进行身份验证,在用户通过身份验证后,我得到了一个访问令牌。我知道我可以使用此访问令牌来使用适用于 JavaScript 的 Google API 客户端(“GAPI”)。但我找不到使用此访问令牌使用 GAPI 的任何方法。
假设我已经有一个登录用户,有什么方法可以使用 GAPI?
我要做的是在简单地通过一键式身份验证进行身份验证并同意日历一次后访问用户日历。
首先:
没有办法用一键登录返回的响应来“验证”google JS api客户端。
幸运的是,我们不需要使用 gapi JS 客户端进行身份验证,因为我们使用了一个名为gapi.auth2.authorize!
首先阅读文档并理解他们的警告很重要:
不要将此方法与推荐的 gapi.auth2.init 和登录流程一起使用。这是两种不同的行为(gapi.auth2.authorize 的授权与 gapi.auth2.init/signIn 的身份验证),如果在同一个应用程序中使用,将会出现意想不到的问题。
现在的问题是如何完全避免使用 init/signIn 方法。
步骤 1
让用户登录 Google One-Tap 登录。
步骤 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) {})
使用 prompt: 'none',您可以尝试在没有任何 UI 的情况下获取令牌。这对于检查您是否需要显示授权按钮很有用,并且在调用日历 API 以获取新令牌之前也很有用。
第 4 步
在我们可以进行任何调用之前,gapi.client.calendar我们需要client只使用 calendar初始化discoveryDocs。
gapi.client.init({discoveryDocs})
这是最棘手的部分,并且在任何地方都没有正确记录!api.client.init() 我们可以从文档中检索到的唯一内容是以下行:
如果提供了 OAuth 客户端 ID 和范围,此函数将加载 gapi.auth2 模块以执行 OAuth
这基本上意味着:只要您提供clientID或scope gapi.client.init将尝试启动传统的身份验证方法。
在我们的例子中:我们不需要传递clientIDor scope,因为我们已经在步骤 3中完成了。
那么客户端如何知道要初始化哪个模块呢?→ 只传递你想使用的模块的discoveryDocs!在这种情况下,日历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'})
})
})