使用google.accounts.oauth2.initCodeClient弹窗模式的相关技术咨询

相关代码 #

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + code);
  },
});

问题解答 #

1. 弹窗模式且redirect_uri为空时，服务器请求token接口的redirect_uri参数
   当使用ux_mode: 'popup'且未配置redirect_uri时，Google OAuth授权流程会自动使用当前页面的Origin（即协议+域名+端口，比如https://your-app-domain.com）作为授权请求的redirect_uri。因此，服务器调用https://accounts.google.com/o/oauth2/token接口换取令牌时，必须传入完全一致的这个Origin值作为redirect_uri参数，否则会因参数不匹配导致验证失败。

2. code_receiver_uri的定义与作用

   • code_receiver_uri是你后端服务提供的一个接口地址。
   • 作用是接收前端从Google OAuth弹窗拿到的授权码（code），再由后端拿着这个code、客户端密钥（client_secret）等信息，调用Google的令牌接口换取访问令牌（access_token）和刷新令牌（refresh_token）。之所以要通过后端中转，是因为客户端密钥不能暴露在前端代码中，必须由后端安全处理授权码换令牌的流程。

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