我正在尝试在我的网站上启用使用谷歌登录。该按钮有效，与我的帐户同步，但我无法从谷歌访问 userId。这就是我的想法。
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://plus.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
这是我尝试获取用户 ID 的地方。在控制台中，我收到错误消息 Uncaught ReferenceError: gapi is not defined. 我以为我在上面的源代码中调用了 gapi。任何帮助或建议将不胜感激。
$('document').ready(function(){
var request = gapi.client.plus.people.get({
'userId' : 'me'
});
request.execute(function(resp) {
console.log('ID: ' + resp.id);
console.log('Display Name: ' + resp.displayName);
console.log('Image URL: ' + resp.image.url);
console.log('Profile URL: ' + resp.url);
});
});
最佳答案
您的代码在加载 google api 库之前调用 gapi.client.plus.people.get 方法 https://plus.google.com/js/client:plusone.js 。因此你得到 gapi is not defined 错误。
工作态度-
- 为什么它不起作用？
我们正在异步(非阻塞)调用 https://plus.google.com/js/client:plusone.js 以提高性能。使用异步 javascript 文件加载，您无法在正文加载时调用 gapi 方法。
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://plus.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
</script>
- 要进行 api 调用，您首先必须知道 javascript 文件已成功加载。
为此，您必须使用回调来调用方法。
https://apis.google.com/js/client:plusone.js?onload=makeAPICall写一个api请求，在回调方法中执行获取数据。
检查下面的例子-
<html>
<head></head>
<body>
<span id="signinButton">
<span
class="g-signin"
data-callback="signinCallback"
data-clientid="YOUR CLIENT ID.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-scope="https://www.googleapis.com/auth/plus.login">
</span>
</span>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js?onload=signinCallback';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function signinCallback(authResult) {
if (authResult['status']['signed_in']) {
document.getElementById('signinButton').setAttribute('style', 'display: none');
makeAPICall();
} else {
console.log('Sign-in state: ' + authResult['error']);
}
}
function makeAPICall(){
gapi.client.load('plus', 'v1', function() {
var request = gapi.client.plus.people.get({
'userId': 'me'
});
request.execute(function (resp){
console.log(resp);
if(resp.id){
console.log('ID: ' + resp.id);
}
if(resp.displayName){
console.log('Display Name: ' + resp.displayName);
}
if(resp.image && resp.image.url){
console.log('Image URL: ' + resp.image.url);
}
if(resp.url){
console.log('Profile URL: ' + resp.url);
}
});
});
}
</script>
</body>
</html>
结论:在加载异步客户端库之前调用javascript API。
避免“超出未经身份验证使用的每日限制。继续使用需要注册。”。仅在用户登录时调用 makeAPICall() 方法，而不是在每次请求时调用。
关于javascript - Google 登录 gapi undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25665865/