शून्य की संपत्ति 'शैली' नहीं पढ़ सकता - Google साइन-इन बटन

Question

मैं अपनी वेबसाइट के लिए Google साइन इन को लागू करने का प्रयास कर रहा हूं। साइन-इन बटन शुरुआत में सही ढंग से और संकेत-लोगों को दिखाता है। मेरी समस्या तब होती है जब मैं वेबसाइट का उपयोग करने के बाद लॉग आउट करता हूं और साइन-इन पेज पर जाने का प्रयास करता हूं (मैं प्रतिक्रिया का उपयोग कर रहा हूं, इसलिए यह सब एक पृष्ठ है)। मैं साइन-इन पेज को प्रस्तुत करने के लिए एक ही फ़ंक्शन का उपयोग करता हूं लेकिन यह मुझे "cb = gapi.loaded_0 देता है: 24 9 अनकॉटेड टाइप एरर: नल की संपत्ति 'शैली' नहीं पढ़ सकता है। gapi में त्रुटि यहाँ होता है (कम से कम मुझे लगता है कि):

elements.push(h('div.g-signin2',{'data-onsuccess': 'onSignIn'})) 
     return h('div.page_content',elements) 

जो मैं बाद में एक ReactDOM के साथ प्रस्तुत:

a.El;window.document.getElementById((c?"not_signed_in":"connected" 

यह कैसे मैं शुरू में जोड़ने के प्रवेश करें बटन प्रदान करने की है। कॉल प्रस्तुत करें।

यहाँ मैं कैसे प्रस्थान करें और प्रवेश करने संभाल:

function signOut() { 
    var auth2 = gapi.auth2.getAuthInstance(); 
    auth2.signOut().then(function() { 
     // console.log('User signed out.'); 
     signedin = false; 
     auth2 = null; 
     renderPage() 
    }); 
    } 

var google_idtoken; 
var signedin = false; 

// set auth2 to null to indicate that google api hasn't been loaded yet 
var auth2 = null; 

function onSignIn(googleUser) { 
    auth2 = gapi.auth2.getAuthInstance({ 
     client_id: 'ClientID.apps.googleusercontent.com' 
    }); 
    google_idtoken = googleUser.getAuthResponse().id_token; 
    wrongemail = true; 
    // if(auth2 != null && auth2.isSignedIn.get() == true){ 

    if ((((auth2.currentUser.get()).getBasicProfile()).getEmail()).split("@").pop() == 'domain.com'){ 
     signedin = true 
     wrongemail = false 
    } 
    updateSources() 
    // renderPage() 
} 

Answer 1

मैं हालांकि मुझे यकीन है कि यह वास्तव में आपकी समस्या से संबंधित है नहीं कर रहा हूँ एक ऐसी ही समस्या थी। मैं के रूप में html में बटन जोड़ा था:

<div id="gdbtn" class="g-signin2" data-onsuccess="onSignIn"></div> 

लेकिन मैं गूगल के निर्देशों के अनुसार बटन का प्रतिपादन अनुकूलित करने के लिए करना चाहता था इसलिए मैं के रूप में मंच स्क्रिप्ट कहा: निम्नलिखित ऑनलोड साथ

<script src="https://apis.google.com/js/platform.js?onload=renderGDriveButton"></script> 

समारोह:

function renderGDriveButton() { 
    gapi.signin2.render('gdbtn', { 
    'height': 50 
    }); 
} 

मैं एक ही त्रुटि तुमने किया था मिल गया: "Uncaught TypeError: संपत्ति अशक्त की 'शैली' पढ़ा नहीं जा सकता"। वर्ग = "जी signin2" डेटा-onSuccess = "onSignIn" एक बार जब मैं उन विशेषताओं बाहर ले गई और के रूप में बटन कहा::

<div id="gdbtn"></div> 

तो त्रुटि दूर चला गया मेरी समस्या यह है कि मैं गुण शामिल किया गया था। आपकी समस्या के समान ही लगता है। आप एक ऑनलोड फ़ंक्शन के माध्यम से बटन जोड़ने का प्रयास कर सकते हैं। सिर्फ एक विचार। आपको कम से डॉक्स की जाँच कर सकते हैं: https://developers.google.com/identity/sign-in/web/build-button

Answer 2

यह एक gapi मुद्दा है, कृपया जांच करें https://github.com/google/google-api-javascript-client/issues/281

angular2 साथ एक ही बात है, प्रासंगिक स्रोत कोड:

<app>Loading...</app> 

<script> 
    gapi.load('auth2', function() { 
     // Retrieve the singleton for the GoogleAuth library and set up the client. 
     auth2 = gapi.auth2.init({ 
      client_id: 'YOURCLIENT_ID.apps.googleusercontent.com' 
     }); 
    }); 
</script> 

और घटक:

import { Component, ElementRef, ViewChild } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { AuthService } from '../../services/auth.service'; 

declare var auth2: any; 

@Component({ 
    selector: 'login', 
    template: require('./login.component.html'), 
    styles: [require('./login.component.css')] 
}) 
export class LoginComponent { 
    @ViewChild('googleButton') el: ElementRef; 

    constructor(private router:Router, private authService: AuthService) { } 

    ngAfterViewInit() { 
     let self = this; 

     if (this.authService.isLoggedIn) { 
      self.router.navigate(['home']); 
     } 

     auth2.attachClickHandler(self.el.nativeElement, {}, (googleUser) => { 
      var token = googleUser.getAuthResponse().id_token; 
      self.authService.login(token); 
      self.router.navigate(['home']); 
     }); 
    }; 
} 

Answer 3

मैंने अपने प्रत्येक साइन-इन बटन पर एक अलग आईडी देकर इसे ठीक किया। उदाहरण के लिए, आपके पास अपने रजिस्टर पेज और लॉगिन पेज पर साइन-इन बटन हो सकता है। बटन के प्रत्येक उदाहरण को अपनी आईडी दें।