Rya*_*anY 9 html javascript google-api
我正在尝试在我的网站上启用谷歌登录.该按钮有效,与我的帐户同步,但我无法从谷歌访问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);
});
});
gapi.client.plus.people.get在加载google api库之前,您的代码是调用方法https://plus.google.com/js/client:plusone.js.因此你得到的gapi没有定义错误.
工作方法 -
我们https://plus.google.com/js/client:plusone.js异步调用(非阻塞)来提高性能.使用Async javascript文件加载时,您无法在body load上调用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>
为此,您必须使用回调调用方法.
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.
To avoid "Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup.". Call makeAPICall() method only when user is logged in not on every request.
| 归档时间： |
|
| 查看次数： |
12792 次 |
| 最近记录： |