Anmeldung mit Google-Nutzer in einer AngularJS App

Question

Ich lese this tutorial, um meine AngularJS App mit Google-Anmeldung zu verbinden. Ich habe auf die Schaltfläche Google wie folgt (nur das Tutorial kopier Einfügen):

Im Kopf ich das Meta-Tag hinzugefügt:

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com"> 

Und dann hinzugefügt, um die Schaltfläche selbst:

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

Zuerst kopierte ich einfach die onSignIn Methode (das ist nur ein generischer Handler, also kopiere ich es nicht auf die Frage) aus dem Tutorial und legte es in einen <script>...</script> Tag und es funktionierte. Ich möchte diese Methode nun in einen Angular Controller bringen. Also habe ich einen Controller wie folgt:

app.controller('GoogleCtrl', function() { 
    function onSignIn(googleUser) { 
    var profile = googleUser.getBasicProfile(); 
    console.log('ID: ' + profile.getId()); 
    console.log('Name: ' + profile.getName()); 
    console.log('Image URL: ' + profile.getImageUrl()); 
    console.log('Email: ' + profile.getEmail()); 
    } 
} 

Und wickelte den Knopf mit einem div:

<div ng-controller="GoogleCtrl"> 
    <div class="g-signin2" data-onsuccess="onSignIn"></div> 
</div> 

Mein Code erhalten nicht auf die onSignIn Methode jetzt, und ich versuche, herauszufinden, was Kann ich tun.

Answer 1

Wenn Sie den Anweisungen folgen, was Sie mit ist window. onSignIn am Ende wird - versuchen Sie es in Ihrem Browser JS-Konsole ausführen können, jetzt das gleiche Verhalten haben Sie Kiste benötigt, die von dem Controller funktionieren

app.controller('GoogleCtrl', function() { 
    function onSignIn(googleUser) { 
    var profile = googleUser.getBasicProfile(); 
    console.log('ID: ' + profile.getId()); 
    console.log('Name: ' + profile.getName()); 
    console.log('Image URL: ' + profile.getImageUrl()); 
    console.log('Email: ' + profile.getEmail()); 
    } 


    window.onSignIn = onSignIn; 
} 

diesen Code erinnern von 3rd-Party wie onSignIn ausgeführt wird $scope.$digest so kantig ist sich dessen bewusst Modelländerungen

Answer 2

Wenn Sie Ihren Code betrachten, müssen Sie möglicherweise einen Listener für Ihre Funktion hinzufügen. Um die Dinge einfach zu halten, können Sie Google Login einfach mit diesem Plugin in Ihre App integrieren. https://github.com/sahat/satellizer