Google 登录 gapi undefined [英] Google Sign In gapi undefined
问题描述
我正在尝试在我的网站上启用 Google 登录.该按钮有效，与我的帐户同步，但我无法从 google 访问 userId.这就是我的想法.
I am trying to enable sign in with google on my site. The button works, syncs with my account, but I can not access the userId from google. This is what's in my head.
<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.任何帮助或建议将不胜感激.
And this is where I'm trying to obtain the user Id. In the console I get the error message Uncaught ReferenceError: gapi is not defined. I thought I was calling gapi in the source above. Any help or suggestions would be much appreciated.
$('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 错误.
Your code is calling gapi.client.plus.people.get method before loading the google api library https://plus.google.com/js/client:plusone.js. Hence you are getting gapi is not defined error.
工作方法-
- 为什么它不起作用?
我们以异步方式(非阻塞)调用 https://plus.google.com/js/client:plusone.js 以提高性能.使用异步 javascript 文件加载，您无法在正文加载时调用 gapi 方法.
We are calling https://plus.google.com/js/client:plusone.js asynchronously(non blocking) to improve the performance. With Async javascript file loading, you are not able to call the gapi method on body load.
<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请求&在回调方法中执行获取数据.
Write an api request & execution it in the callback method to get data.
检查下面的例子-
<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.
Conclusion: Calling javascript API before loading the asynchronously client library.
为了避免超出未经身份验证使用的每日限制.继续使用需要注册.".仅在用户登录时调用 makeAPICall() 方法，而不是每次请求时调用.
这篇关于Google 登录 gapi undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
