2014-09-04 18 views
9

Tôi đang cố gắng bật đăng nhập bằng google trên trang web của mình. Nút hoạt động, đồng bộ hóa với tài khoản của tôi, nhưng tôi không thể truy cập userId từ google. Đây là những gì trong đầu tôi.Đăng nhập Google gapi undefined

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

Và đây là nơi tôi đang cố gắng lấy Id người dùng. Trong giao diện điều khiển, tôi nhận được thông báo lỗi Uncaught ReferenceError: gapi is not defined. Tôi nghĩ rằng tôi đã gọi số gapi trong nguồn ở trên. Bất kỳ trợ giúp hoặc gợi ý nào sẽ được đánh giá cao.

$('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); 
    }); 
}); 

Trả lời

9

Mã của bạn đang gọi gapi.client.plus.people.get trước khi tải thư viện google api https://plus.google.com/js/client:plusone.js. Do đó bạn đang nhận được gapi không được xác định lỗi.

Tiếp cận work-

  1. Tại sao nó không làm việc?

Chúng tôi đang gọi https://plus.google.com/js/client:plusone.js không đồng bộ (không chặn) để cải thiện hiệu suất. Với việc tải tệp Async javascript, bạn không thể gọi phương thức gapi trên tải nội dung.

<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> 
  1. Để thực hiện các api gọi đầu tiên bạn phải biết javascript tập tin được nạp thành công.
  2. Đối với điều này, bạn phải gọi phương thức bằng cách sử dụng gọi lại. https://apis.google.com/js/client:plusone.js?onload=makeAPICall

  3. Viết yêu cầu api & thực hiện trong phương thức gọi lại để nhận dữ liệu.

Kiểm tra bên dưới ví dụ cho this-

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

Kết luận: Calling javascript API trước khi tải thư viện khách hàng không đồng bộ.

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.

Các vấn đề liên quan