Javascript 谷歌登录gapi未定义_Javascript_Html_Google Api

Javascript 谷歌登录gapi未定义

javascript html google-api

Javascript 谷歌登录gapi未定义,javascript,html,google-api,Javascript,Html,Google Api,我正在尝试在我的网站上启用google登录。该按钮可以工作，与我的帐户同步，但我无法从谷歌访问用户ID。这就是我脑子里想的 <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https:

我正在尝试在我的网站上启用google登录。该按钮可以工作，与我的帐户同步，但我无法从谷歌访问用户ID。这就是我脑子里想的

 <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>

您的代码正在调用

gapi.client.plus.people.get

方法，然后再加载google api库

https://plus.google.com/js/client:plusone.js

。因此，您得到的gapi不是定义错误

工作方法-

为什么它不起作用

我们正在呼叫

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>

结论：在加载异步客户端库之前调用javascript API

以避免“超出未经验证使用的每日限制。继续使用需要注册。”。仅当用户登录时才调用makeAPICall（）方法，而不是在每次请求时都调用。

    <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>

    <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>