Mit Google Anmelden Schaltfläche mit reagieren 2

Question

Dies ist im Wesentlichen die gleiche Frage wie Using google sign in button with react, aber die angenommene Antwort löst es nicht in meinem Fall.

Ich habe eine Komponente reagieren:

var LoginButton = React.createClass({ 

onSignIn: function(googleUser) { 
    console.error(" user signed in");                                        
}, 

componentDidMount: function() { 
    console.log('component has mounted'); 
    gapi.signin2.render('g-signin2', { 
     'scope': 'https://www.googleapis.com/auth/plus.login', 
     'width': 200, 
     'height': 200, 
     'longtitle': true, 
     'theme': 'dark', 
     'onsuccess': this.onSignIn 
    }) 
}, 

render: function() { 
    return (
    <div className="g-signin2"/> 
); 
} 
} 

Aber während die Anmelde-erfolgreich arbeitet, wird die onSignIn Funktion nie aufgerufen. Tatsächlich gibt es keine der Optionen, die ich für das Rendern der benutzerdefinierten Signin-Schaltfläche angegeben habe (d. H. Die quadratische Form und das dunkle Thema). Daher rate ich aufgrund der <div>-Klasse eine Standardschaltfläche.

Ich lade gerade die Bibliothek synchron, weil sonst gapi nicht im Bereich ist, wenn componentDidMount ausgelöst wird.

Die andere Option, die ich sehe, wäre Googles Empfehlung, <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script> zu verwenden und mein Rendering in eine Funktion zu verpacken. Aber dann muss entweder dieses Skript in die Komponente geladen werden, oder ich muss einen Weg finden, dass diese Funktion als Callback in index.html übergeben wird, von denen keine wie eine gute Lösung scheint.

Wie kann ich die benutzerdefinierte Login-Schaltfläche anstelle der Standardanmeldung gerendert werden?

Answer 1

Dieser Hack funktioniert den Trick jetzt ...

In meinem index.html ich ein benutzerdefiniertes Ereignis auslösen, wenn die Bibliothek lädt:

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script> 
<script type="text/javascript"> 
    function triggerGoogleLoaded() { 
    window.dispatchEvent(new Event('google-loaded')); 
    } 
</script> 

und mein reagieren Komponente nun wie folgt aussieht:

var LoginButton = React.createClass({ 

    onSignIn: function(googleUser) { 
     console.log("user signed in"); // plus any other logic here 
    }, 

    renderGoogleLoginButton: function() { 
    console.log('rendering google signin button') 
    gapi.signin2.render('my-signin2', { 
     'scope': 'https://www.googleapis.com/auth/plus.login', 
     'width': 200, 
     'height': 50, 
     'longtitle': true, 
     'theme': 'light', 
     'onsuccess': this.onSignIn 
    }) 
    }, 

    componentDidMount: function() { 
    window.addEventListener('google-loaded',this.renderGoogleLoginButton); 
    }, 

    render: function() { 
    let displayText = "Sign in with Google"; 
    return (
     <div id="my-signin2"></div> 
    ); 
    } 

}); 

beachten Sie, dass das gerenderte <div> hat "my-signin2" als id nicht ein class.

Answer 2

I JQuery verwendet haben, um das Skript über das componentDidMount Methode zu laden ...

componentDidMount: function() { 
    $.getScript('https://apis.google.com/js/platform.js') 
     .done(() => { 
      // execute any gapi calls here... 
      gapi.signin2.render('g-signin2', { 
       // ... options here ... 
      }); 
     }); 
}, 

Wie f13ts sagte, sollte die gerenderte <div> haben "my-signin2" als id, im Gegensatz zu einem Klasse.