如何将Google Picker与新版Google Identity Services JavaScript库集成

针对你的疑问逐一解答如下： #

• 关于Picker的加载逻辑
  gapi 库本身没有被完全废弃，废弃的只是其中 gapi.auth、GoogleAuth 等登录授权相关的接口。你仍然可以正常引入 apis.google.com/js/api.js 调用 gapi.load('picker', callback) 加载Picker组件，只需要把登录授权的逻辑全部切换到新版GSI即可，两者可以共存互不影响。

• 关于apiKey和scopes的传入
  scopes需要在GSI的授权流程中提前配置，你触发GSI授权时就声明好Picker需要的权限，用户完成授权后再初始化Picker即可。apiKey的传入逻辑和旧版完全一致，直接在 PickerBuilder 中调用 setDeveloperKey() 方法传入即可。

• 关于登录状态的判断
  旧版 GoogleAuth.isSignedIn 确实被移除了，你可以自己在前端维护授权状态：存储获取到的 access_token 及其过期时间，只要token未过期就判定用户处于已授权状态，不用重复触发授权。如果token即将过期，调用GSI授权方法时传入 prompt: 'none' 参数走静默授权，不需要用户操作就能刷新权限，只有静默授权失败时才需要引导用户手动点击登录，完全可以避免每次都弹出登录窗口的问题。

• 关于access_token的获取
  走GSI的token模式授权即可拿到令牌，初始化GSI客户端时配置回调函数，授权成功后回调参数中会直接返回 access_token 字段，示例代码如下：

// 初始化GSI客户端
window.google.accounts.oauth2.initTokenClient({
  client_id: '你的客户端ID',
  scope: '你需要的权限scope，空格分隔多个',
  callback: (tokenResponse) => {
    const accessToken = tokenResponse.access_token
    // 拿到token后就可以初始化Picker了
  }
})
// 手动触发授权的代码
window.google.accounts.oauth2.getToken({ prompt: 'select_account' })

获取新token只需要调用 getToken 传入 prompt: 'none' 走静默刷新即可。

内容的提问来源于stack exchange，提问作者Gabrielle