comment mettre en œuvre google+ sign-in avec angularjs

J'ai une application AngularJS, et je veux implémenter G+ sign-in. Je suis passé par leurs échantillons, et ils fonctionnent comme des applications autonomes.

https://developers.google.com/+/web/signin/

Dans mon Angulaire de l'app, je suis en mesure d'afficher le G+ bouton de connexion. Mais je suis bloqué sur la fonction de rappel. Dois-je mettre la fonction de rappel dans mon contrôleur de fichier js?

Dans ce cas, et compte tenu de ce contrôleur:

app.controller('myController', function ($scope) {
    function signinCallback(authResult) {

Sur mes données de rappel, comment dois-je appeler cela ainsi qu'il va signinCallback à l'intérieur de myController?

    <span id="signinButton">
      <span
        class="g-signin"
        data-callback="signinCallback"
        data-clientid="123456789.apps.googleusercontent.com"
        data-cookiepolicy="single_host_origin"
        data-requestvisibleactions="http://schemas.google.com/AddActivity"
        data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read"
      </span>
    </span>

OriginalL'auteur Gerard | 2013-12-28

  1. 7

    Google+ Photochasse exemple d'application montre une AngularJS intégration avec Google+. L'échantillon est disponible en Ruby, Java, Python, C#/.NET pour le web.
    De note doit être le code suivant dans la AngularJS avant la fin de l':

    De balisage pour rendre le bouton:

    <span id="signin" ng-show="immediateFailed">
  <span id="myGsignin"></span>
</span>

    JavaScript pour coller les balises de code:

    $scope.signIn = function(authResult) {
  $scope.$apply(function() {
    $scope.processAuth(authResult);
  });
}

$scope.processAuth = function(authResult) {
  $scope.immediateFailed = true;
  if ($scope.isSignedIn) {
    return 0;
  }
  if (authResult['access_token']) {
    $scope.immediateFailed = false;
    //Successfully authorized, create session
    PhotoHuntApi.signIn(authResult).then(function(response) {
      $scope.signedIn(response.data);
    });
  } else if (authResult['error']) {
    if (authResult['error'] == 'immediate_failed') {
      $scope.immediateFailed = true;
    } else {
      console.log('Error:' + authResult['error']);
    }
  }
}

$scope.renderSignIn = function() {
  gapi.signin.render('myGsignin', {
    'callback': $scope.signIn,
    'clientid': Conf.clientId,
    'requestvisibleactions': Conf.requestvisibleactions,
    'scope': Conf.scopes,
    'apppackagename': 'your.photohunt.android.package.name',
    'theme': 'dark',
    'cookiepolicy': Conf.cookiepolicy,
    'accesstype': 'offline'
  });
}

    Dans processAuth, vous devriez voir un jeton d'accès et pouvez mettre à jour votre INTERFACE utilisateur pour en tenir compte. Vous pouvez également voir l'intégralité du contrôleur de code JavaScript sur GitHub.

    "De toutes les contrôleurs de code javascript sur github" lien mène à 404. pouvez vous s'il vous plaît mettre à jour?
    Il a obtenu, Photochasse a été tiré, vous pouvez essayer l'une des plus anciennes fourches comme ceci: github.com/gguuss/gplus-photohunt-server-csharp/tree/master/... - mise à jour de réponse.

    OriginalL'auteur class

  2. 2

    Je ne suis pas sûr si cela fonctionne, mais je voudrais l'essayer comme ceci:

    module.factory("GPlusAuthService", function ($q, $window) {
    var signIn;
    signIn = function () {
        var defered = $q.defer();
        $window.signinCallback = function (response) {
            $window.signinCallback = undefined;
            defered.resolve(response);
        };

        gapi.auth.signIn({
            clientid: "123456789.apps.googleusercontent.com"
            cookiepolicy: "single_host_origin"
            requestvisibleactions: "http://schemas.google.com/AddActivity"
            scope: "https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read",
            callback: "signinCallback"

        }) 
        return defered.promise;
    };
    return {
        signIn: signIn;
    }


});
module.controller('myController', function ($scope, GPlusAuthService) {
    $scope.signIn = function() {
        GPlusAuthService.signIn().then(function(response) {

        });    
    }
});


<span id="signinButton" ng-controller="myController">
   <span class="g-signin" ng-click="signIn()"></span>
</span>

    OriginalL'auteur kfis

  3. 0

    Fonction qui va être appelée après que l'utilisateur s'engage à signer en est spécifiée dans les données de rappel, cette fonction doit être accessible à l'échelle mondiale, qui est lié à l'objet window.

    L'accès global de l'objet à partir du contrôleur est un anti-modèle, comme un terrain d'entente, vous pouvez utiliser $fenêtre fournis par Angulaire, vous pouvez fantaisie dans vos tests

    Mieux encore, et en fait l'adresse de la critique, vous pouvez utiliser le gapi.auth.authorize méthode à la place. Il prend presque tout les mêmes paramètres dans le paramètre de l'objet, mais au lieu de passer dans le rappel il y a, vous le passez en tant que son propre paramètre et vous pouvez directement référence à la fonction, vous permettant d'envoyer dans d'autres méthodes de contrôleur, les fonctions locales, ou d'une fonction anonyme comme vous voyez l'ajustement. Vous pourriez même être en mesure de le faire avec le gapi.auth.signIn méthode, mais je suis en utilisant authorize dans mon application.

    OriginalL'auteur TheRusskiy