blocks|key|4488406|text|这是因为您的脚本标记上有async和defer属性。用gapi.auth2.init在你的脚本标签之后加载gapi+...|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4488407|要在执行此代码之前等待gapi，您可以在脚本标记中使用onload查询参数，如下所示：|4488408|<script+src="https://apis.google.com/js/platform.js?onload=onLoadCallback"+async+defer></script>
<script>
window.onLoadCallback+=+function(){
++gapi.auth2.init({
++++++client_id:+'filler_text_for_client_id.apps.googleusercontent.com'
++++});
}
</script>|code-block|syntax|javascript|4488409|或者，当你在很多地方需要它的时候，你可以使用promises来更好地组织它：|4488410|//+promise+that+would+be+resolved+when+gapi+would+be+loaded
var+gapiPromise+=+(function(){
++var+deferred+=+$.Deferred();
++window.onLoadCallback+=+function(){
++++deferred.resolve(gapi);
++};
++return+deferred.promise()
}());

var+authInited+=+gapiPromise.then(function(){
++gapi.auth2.init({
++++++client_id:+'filler_text_for_client_id.apps.googleusercontent.com'
++++});
})


$('#btn').click(function(){
++gapiPromise.then(function(){
++++//+will+be+executed+after+gapi+is+loaded
++});

++authInited.then(function(){
++++//+will+be+executed+after+gapi+is+loaded,+and+gapi.auth2.init+was+called
++});
});|4488411|entityMap^0|C|5|I|5|R|F|1H|4|0|B|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|R|$]]

<p>It happens because you have <code>async</code> and <code>defer</code> attributes on your script tag. <code>gapi</code> would be loaded after your script tag with <code>gapi.auth2.init</code>...</p>

<p>To wait for <code>gapi</code> before executing this code you can use onload query param in script tag, like following:</p>

<pre><code>&lt;script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer&gt;&lt;/script&gt;
&lt;script&gt;
window.onLoadCallback = function(){
  gapi.auth2.init({
      client_id: 'filler_text_for_client_id.apps.googleusercontent.com'
    });
}
&lt;/script&gt;
</code></pre>

<p>Or for case when you need it in many places, you can use promises to better structure it:</p>

<pre><code>// promise that would be resolved when gapi would be loaded
var gapiPromise = (function(){
  var deferred = $.Deferred();
  window.onLoadCallback = function(){
    deferred.resolve(gapi);
  };
  return deferred.promise()
}());

var authInited = gapiPromise.then(function(){
  gapi.auth2.init({
      client_id: 'filler_text_for_client_id.apps.googleusercontent.com'
    });
})


$('#btn').click(function(){
  gapiPromise.then(function(){
    // will be executed after gapi is loaded
  });

  authInited.then(function(){
    // will be executed after gapi is loaded, and gapi.auth2.init was called
  });
});
</code></pre>


blocks|key|4489583|text|我想你在上面的例子中也会发现这是行不通的，因为gapi.auth2还没有被定义(我知道这一点，因为今天我自己也犯了同样的错误)，你首先需要调用gapi.load('auth2',+callback)并传递一个回调，然后回调再调用gapi.auth2.init。下面是我的_onGoogleLoad函数的一个示例，它是加载第一个platform.js脚本的回调函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4489584|var+_auth2

var+_onGoogleLoad+=+function+()+{
++gapi.load('auth2',+function+()+{
++++_auth2+=+gapi.auth2.init({
++++++client_id:+'OUR_REAL_ID_GOES_HERE',
++++++scope:+'email',
++++++fetch_basic_profile:+false
++++})
++++_enableGoogleButton()
++})
}|code-block|syntax|javascript|4489585|在此之后，您可以使用_auth2变量来实际登录用户。|4489586|entityMap^0|N|A|1Z|S|36|F|3R|D|4J|B|0|0|A|6|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|N|$]]

<p>I think you'll find with the above example that this won't work either, as <code>gapi.auth2</code> will not yet be defined (I know this because I made the same mistake myself, today) You first need to call <code>gapi.load('auth2', callback)</code> and pass THAT a callback which then calls <code>gapi.auth2.init</code>. Here is an example of my <code>_onGoogleLoad</code> function, which is the callback for loading the first <code>platform.js</code> script.</p>

<pre><code>var _auth2

var _onGoogleLoad = function () {
  gapi.load('auth2', function () {
    _auth2 = gapi.auth2.init({
      client_id: 'OUR_REAL_ID_GOES_HERE',
      scope: 'email',
      fetch_basic_profile: false
    })
    _enableGoogleButton()
  })
}
</code></pre>

<p>After that, you can use the <code>_auth2</code> variable to actually sign users in.</p>


blocks|key|4489629|text|虽然这些答案对我很有帮助，但我相信在官方文档中有更好的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4489630|请参阅Integrating+Google+Sign-In+using+listeners|offset|length|4489631|var+auth2;+//+The+Sign-In+object.
var+googleUser;+//+The+current+user.

/**
+*+Calls+startAuth+after+Sign+in+V2+finishes+setting+up.
+*/
var+appStart+=+function()+{
++gapi.load('auth2',+initSigninV2);
};

/**
+*+Initializes+Signin+v2+and+sets+up+listeners.
+*/
var+initSigninV2+=+function()+{
++auth2+=+gapi.auth2.init({
++++++client_id:+'CLIENT_ID.apps.googleusercontent.com',
++++++scope:+'profile'
++});

++//+Listen+for+sign-in+state+changes.
++auth2.isSignedIn.listen(signinChanged);

++//+Listen+for+changes+to+current+user.
++auth2.currentUser.listen(userChanged);

++//+Sign+in+the+user+if+they+are+currently+signed+in.
++if+(auth2.isSignedIn.get()+==+true)+{
++++auth2.signIn();
++}

++//+Start+with+the+current+live+values.
++refreshValues();
};

/**
+*+Listener+method+for+sign-out+live+value.
+*
+*+@param+{boolean}+val+the+updated+signed+out+state.
+*/
var+signinChanged+=+function+(val)+{
++console.log('Signin+state+changed+to+',+val);
++document.getElementById('signed-in-cell').innerText+=+val;
};

/**
+*+Listener+method+for+when+the+user+changes.
+*
+*+@param+{GoogleUser}+user+the+updated+user.
+*/
var+userChanged+=+function+(user)+{
++console.log('User+now:+',+user);
++googleUser+=+user;
++updateGoogleUser();
++document.getElementById('curr-user-cell').innerText+=
++++JSON.stringify(user,+undefined,+2);
};

/**
+*+Updates+the+properties+in+the+Google+User+table+using+the+current+user.
+*/
var+updateGoogleUser+=+function+()+{
++if+(googleUser)+{
++++document.getElementById('user-id').innerText+=+googleUser.getId();
++++document.getElementById('user-scopes').innerText+=
++++++googleUser.getGrantedScopes();
++++document.getElementById('auth-response').innerText+=
++++++JSON.stringify(googleUser.getAuthResponse(),+undefined,+2);
++}+else+{
++++document.getElementById('user-id').innerText+=+'--';
++++document.getElementById('user-scopes').innerText+=+'--';
++++document.getElementById('auth-response').innerText+=+'--';
++}
};

/**
+*+Retrieves+the+current+user+and+signed+in+states+from+the+GoogleAuth
+*+object.
+*/
var+refreshValues+=+function()+{
++if+(auth2){
++++console.log('Refreshing+values...');

++++googleUser+=+auth2.currentUser.get();

++++document.getElementById('curr-user-cell').innerText+=
++++++JSON.stringify(googleUser,+undefined,+2);
++++document.getElementById('signed-in-cell').innerText+=
++++++auth2.isSignedIn.get();

++++updateGoogleUser();
++}
}|code-block|syntax|javascript|4489632|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/identity/sign-in/web/listeners^0|0|3|16|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>While these answers helped me, I believe there is better answer in official docs.</p>

<p>See <a href="https://developers.google.com/identity/sign-in/web/listeners" rel="noreferrer">Integrating Google Sign-In using listeners</a></p>

<pre><code>var auth2; // The Sign-In object.
var googleUser; // The current user.

/**
 * Calls startAuth after Sign in V2 finishes setting up.
 */
var appStart = function() {
  gapi.load('auth2', initSigninV2);
};

/**
 * Initializes Signin v2 and sets up listeners.
 */
var initSigninV2 = function() {
  auth2 = gapi.auth2.init({
      client_id: 'CLIENT_ID.apps.googleusercontent.com',
      scope: 'profile'
  });

  // Listen for sign-in state changes.
  auth2.isSignedIn.listen(signinChanged);

  // Listen for changes to current user.
  auth2.currentUser.listen(userChanged);

  // Sign in the user if they are currently signed in.
  if (auth2.isSignedIn.get() == true) {
    auth2.signIn();
  }

  // Start with the current live values.
  refreshValues();
};

/**
 * Listener method for sign-out live value.
 *
 * @param {boolean} val the updated signed out state.
 */
var signinChanged = function (val) {
  console.log('Signin state changed to ', val);
  document.getElementById('signed-in-cell').innerText = val;
};

/**
 * Listener method for when the user changes.
 *
 * @param {GoogleUser} user the updated user.
 */
var userChanged = function (user) {
  console.log('User now: ', user);
  googleUser = user;
  updateGoogleUser();
  document.getElementById('curr-user-cell').innerText =
    JSON.stringify(user, undefined, 2);
};

/**
 * Updates the properties in the Google User table using the current user.
 */
var updateGoogleUser = function () {
  if (googleUser) {
    document.getElementById('user-id').innerText = googleUser.getId();
    document.getElementById('user-scopes').innerText =
      googleUser.getGrantedScopes();
    document.getElementById('auth-response').innerText =
      JSON.stringify(googleUser.getAuthResponse(), undefined, 2);
  } else {
    document.getElementById('user-id').innerText = '--';
    document.getElementById('user-scopes').innerText = '--';
    document.getElementById('auth-response').innerText = '--';
  }
};

/**
 * Retrieves the current user and signed in states from the GoogleAuth
 * object.
 */
var refreshValues = function() {
  if (auth2){
    console.log('Refreshing values...');

    googleUser = auth2.currentUser.get();

    document.getElementById('curr-user-cell').innerText =
      JSON.stringify(googleUser, undefined, 2);
    document.getElementById('signed-in-cell').innerText =
      auth2.isSignedIn.get();

    updateGoogleUser();
  }
}
</code></pre>


blocks|key|4488562|text|问题不仅仅出在gapi上。要调用init方法-必须初始化auth2对象。一旦google+auth对象在完全初始化的GoogleAuth.then(onInit,+onFailure)中，就会有一个承诺|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4488563|gapi.load('auth2',+initSigninV2);

function+initSigninV2()+{
++++gapi.auth2.init({
++++++++client_id:+'CLIENT_ID.apps.googleusercontent.com'
++++}).then(function+(authInstance)+{
++++++++//+now+auth2+is+fully+initialized
++++});
}|code-block|syntax|javascript|4488564|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/identity/sign-in/web/reference#googleauththenwzxhzdk60oninitwzxhzdk61_wzxhzdk62onfailurewzxhzdk63^0|7|4|G|4|1M|Y|1M|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>The problem is not only in <code>gapi</code>. To call <code>init</code> method - auth2 object must be initialized.
There is a promise once a google auth object is in fully initialized <a href="https://developers.google.com/identity/sign-in/web/reference#googleauththenwzxhzdk60oninitwzxhzdk61_wzxhzdk62onfailurewzxhzdk63" rel="noreferrer"><code>GoogleAuth.then(onInit, onFailure)</code></a></p>

<pre><code>gapi.load('auth2', initSigninV2);

function initSigninV2() {
    gapi.auth2.init({
        client_id: 'CLIENT_ID.apps.googleusercontent.com'
    }).then(function (authInstance) {
        // now auth2 is fully initialized
    });
}
</code></pre>


blocks|key|4488588|text|这对我来说很有效：https://stackoverflow.com/a/55314602/1034622|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4488589|包括此脚本标记|4488590|<script+src="https://apis.google.com/js/platform.js"></script>|code-block|syntax|javascript|4488591|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/55314602/1034622^0|9|18|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>This worked for me:
<a href="https://stackoverflow.com/a/55314602/1034622">https://stackoverflow.com/a/55314602/1034622</a></p>

<p>Include this script tag</p>

<pre><code>&lt;script src="https://apis.google.com/js/platform.js"&gt;&lt;/script&gt;
</code></pre>


blocks|key|4489739|text|简单的解决办法是:通过使用/*+global+gapi+*/告诉Eslint这是一个全局变量|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4489740|entityMap^0|D|H|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Cheap Fix is:
To tell Eslint that this is a global variable by using
<code>/* global gapi */</code></p>


<p>I'm trying to implement Google Sign In and retrieve the profile information of the user. 
The error is: Uncaught ReferenceError: gapi is not defined. Why is that?</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;      
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://apis.google.com/js/platform.js" async defer&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    $(function(){
        gapi.auth2.init({
            client_id: 'filler_text_for_client_id.apps.googleusercontent.com'
        });
    });
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


gapi is not defined - Google sign in issue with gapi.auth2.init

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试实现谷歌登录和检索用户的个人资料信息。错误是:未定义ReferenceError: gapi。为什么会这样呢？<!doctype html><html><head>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jqu...

问未定义gapi - Google登录gapi.auth2.init的问题
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未定义gapi - Google登录gapi.auth2.init的问题EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未定义gapi - Google登录gapi.auth2.init的问题
EN