角度服务不能用作exp

时间:2017-04-24 21:13:22

标签: javascript angularjs angular-services google-authentication

我正在尝试将google登录网络应用程序放入角色服务中,但我无法弄清楚我做错了什么。

这是我的服务

angular.module('sensdogserver.services', [])

.service('AuthenticationService', function ($window,$http) {
    console.log("service started")

    gapi.load('auth2', function() {//load in the auth2 api's, without it gapi.auth2 will be undefined

            gapi.auth2.init(
                    {
                        client_id: 'CLIENT_ID',

                    }
            );
    });


    this.googlelogin = function(){
        var GoogleAuth  = gapi.auth2.getAuthInstance();
        GoogleAuth.signIn().then(function(googleUser){//request to sign in
        var profile = googleUser.getBasicProfile();

        username = profile.getName();
        $window.localStorage['username'] = username;
        googleUser = googleUser;
        googletoken = googleUser.getAuthResponse().id_token;
        console.log("google token: " + googletoken);
        $http.get("/api/auth/google/token",{headers:{'id_token':googletoken}}).success(function(data){console.log(data)}).error(function(data){console.log(data)});
        }

        )};


    this.googlesignout =function() {
        var auth2 = gapi.auth2.getAuthInstance();
        console.log("signing out: ", username);
        auth2.signOut().then(function () {
        googleUser = null;
        googletoken = null;
        username = null;
          console.log('User signed out.');
        });
    }

    var googleUser = null;
    var googletoken = null;
    var username = null;

    this.googlelogin();


});

当我加载页面时,控制台按预期记录service started,但后来出现错误TypeError: Cannot read property 'getAuthInstance' of undefined。如果我将来自谷歌登录的电话注释掉并从控制器中调用googlelogin,则在页面加载后它可以正常工作。我不明白的是,我得到了日志消息,所以看起来服务已经加载并运行,但不是一切。

1 个答案:

答案 0 :(得分:1)

您应该将this.googlelogin();来电置于gapi.load('auth2', ...)回调中。您在初始化之前调用它。

angular
  .module('sensdogserver.services', [])
  .service('AuthenticationService', function ($window,$http) {
    console.log("service started")

    gapi.load('auth2', function() {
      gapi.auth2.init({
        client_id: 'CLIENT_ID',
      });
      console.log('gapi.load callback triggered');
      this.googlelogin(); // call it here in the load callback
    }.bind(this));

    this.googlelogin = function(){
      // ...
    };

    this.googlesignout = function() {
      // ...
    }

    // ...
    console.log('this will be printed before the gapi.load callback');
  });

我添加了日志记录到加载回调以及用于调用googlelogin函数的地方以突出显示问题。

gapi.load()调用是异步的(非阻塞) - 当您调用它时,它将调用所需的API,但不会等待响应。响应将在回调函数中可用,该函数将在另一个事件循环中触发(在主程序块之后,调用gapi.load()函数)。

看看这个:https://developer.mozilla.org/cs/docs/Web/JavaScript/EventLoop,它应该为您提供一些基础知识。调用gapi.load与使用setTimeout的示例非常相似。