调用window['gapi'].auth2.authorize时auth2未定义，需提前执行什么操作？

出现这个问题是因为你还没加载并初始化Google Auth2模块，直接调用gapi.auth2.authorize自然会报错，必须先完成以下前置操作：

1. 加载Google API客户端脚本 #

首先要在页面中引入Google的API脚本，这是获取gapi对象的前提：

<script src="https://apis.google.com/js/api.js"></script>

也可以通过动态方式加载，避免阻塞页面：

function loadGapiScript() {
  const script = document.createElement('script');
  script.src = 'https://apis.google.com/js/api.js';
  script.onload = initAuth2; // 加载完成后初始化Auth2
  document.body.appendChild(script);
}

2. 加载并初始化Auth2模块 #

脚本加载完成后，必须先加载auth2模块，确保模块就绪后再调用授权方法：

function initAuth2() {
  gapi.load('auth2', function() {
    // 初始化Auth2实例（如果用新版signIn方法需要这一步）
    gapi.auth2.init({
      client_id: 'xxxxxxxx.apps.googleusercontent.com'
    }).then(() => {
      // 初始化完成后挂载登录方法到全局
      window.gpLogIn = function() {
        // 新版推荐用signIn方法
        gapi.auth2.getAuthInstance().signIn({
          scope: [
            'https://www.googleapis.com/auth/gmail.readonly',
            'https://www.googleapis.com/auth/gmail.send'
          ].join(' '),
          prompt: 'select_account'
        }).then(response => {
          console.log(response);
        }).catch(err => {
          console.error('登录失败:', err);
        });
      };
    });
  });
}

如果一定要沿用你原来的authorize方法，也要确保在auth2模块加载完成后再定义登录方法：

function initAuth2() {
  gapi.load('auth2', function() {
    window.gpLogIn = function() {
      window['gapi'].auth2.authorize({
        client_id: 'xxxxxxxx.apps.googleusercontent.com',
        scope: [
          'https://www.googleapis.com/auth/gmail.readonly',
          'https://www.googleapis.com/auth/gmail.send'
        ].join(' '),
        response_type: 'id_token permission',
        prompt: 'select_account',
      }, function(response) {
        console.log(response);
      });
    };
  });
}

3. 触发流程 #

最后在页面加载完成后调用loadGapiScript()，启动整个授权准备流程，之后再调用gpLogIn()就不会出现auth2未定义的问题了。

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