2014-10-01 156 views
0

我有一个显示Google日历数据的应用程序,但它需要初始登录。我知道可以使用OAuth 2.0存储令牌,但我不知道如何去做。以下是我的代码如下。我希望网页在没有登录的情况下使用来自Google日历的JSON数据显示日历。以角度存储OAuth 2.0的令牌

控制器

angular.module('demo', ["googleApi"]) 
.config(function(googleLoginProvider) { 
    googleLoginProvider.configure({ 
     clientId: '239511214798.apps.googleusercontent.com', 
     scopes: ["https://www.googleapis.com/auth/userinfo.email", "https://www.googleapis.com/auth/calendar", "https://www.googleapis.com/auth/plus.login"] 
    }); 
}) 
.controller('DemoCtrl', ['$scope', 'googleLogin', 'googleCalendar', 'googlePlus', function ($scope, googleLogin, googleCalendar, googlePlus) { 

    $scope.login = function() { 
     googleLogin.login(); 
    }; 

    $scope.$on("googlePlus:loaded", function() { 
     googlePlus.getCurrentUser().then(function(user) { 
     $scope.currentUser = user; 
     }); 
    }) 
    $scope.currentUser = googleLogin.currentUser; 

    $scope.loadEvents = function() { 
     this.calendarItems = googleCalendar.listEvents({calendarId: this.selectedCalendar.id}); 
    } 

    $scope.loadCalendars = function() { 
     $scope.calendars = googleCalendar.listCalendars(); 
    } 

}]); 

googleAPi

angular.module('googleApi', []) 
.value('version', '0.1') 

.service("googleApiBuilder", function($q) { 
    this.loadClientCallbacks = []; 

    this.build = function(requestBuilder, responseTransformer) { 
     return function(args) { 
      var deferred = $q.defer(); 
      var response; 
      request = requestBuilder(args); 
      request.execute(function(resp, raw) { 
       if(resp.error) { 
        deferred.reject(resp.error); 
       } else { 
        response = responseTransformer ? responseTransformer(resp) : resp; 
        deferred.resolve(response); 
       } 

      }); 
      return deferred.promise; 

     } 
    }; 

    this.afterClientLoaded = function(callback) { 
     this.loadClientCallbacks.push(callback); 
    }; 

    this.runClientLoadedCallbacks = function() { 
     for(var i=0; i < this.loadClientCallbacks.length; i++) { 
      this.loadClientCallbacks[i](); 
     } 
    }; 
}) 

.provider('googleLogin', function() { 

    this.configure = function(conf) { 
     this.config = conf; 
    }; 

    this.$get = function ($q, googleApiBuilder, $rootScope) { 
     var config = this.config; 
     var deferred = $q.defer(); 
     return { 
      login: function() { 
       gapi.auth.authorize({ client_id: config.clientId, scope: config.scopes, immediate: false}, this.handleAuthResult); 

       return deferred.promise; 
      }, 

      handleClientLoad: function() { 
       gapi.auth.init(function() { }); 
       window.setTimeout(checkAuth, 1); 
      }, 

      checkAuth: function() { 
       gapi.auth.authorize({ client_id: config.clientId, scope: config.scopes, immediate: true }, this.handleAuthResult); 
      }, 

      handleAuthResult: function(authResult) { 
       if (authResult && !authResult.error) { 
        var data = {}; 
        $rootScope.$broadcast("google:authenticated", authResult); 
        googleApiBuilder.runClientLoadedCallbacks(); 
        deferred.resolve(data); 
       } else { 
        deferred.reject(authResult.error); 
       } 
      }, 
     } 
    }; 


}) 

.service("googleCalendar", function(googleApiBuilder, $rootScope) { 

    var self = this; 
    var itemExtractor = function(resp) { return resp.items; }; 

    googleApiBuilder.afterClientLoaded(function() { 
     gapi.client.load('calendar', 'v3', function() { 

      self.listEvents = googleApiBuilder.build(gapi.client.calendar.events.list, itemExtractor); 
      self.listCalendars = googleApiBuilder.build(gapi.client.calendar.calendarList.list, itemExtractor); 
      self.createEvent = googleApiBuilder.build(gapi.client.calendar.events.insert); 

      $rootScope.$broadcast("googleCalendar:loaded") 
     }); 

    }); 

}) 

    .service("googlePlus", function(googleApiBuilder, $rootScope) { 

      var self = this; 
      var itemExtractor = function(resp) { return resp.items; }; 

      googleApiBuilder.afterClientLoaded(function() { 
        gapi.client.load('plus', 'v1', function() { 
         self.getPeople = googleApiBuilder.build(gapi.client.plus.people.get); 
         self.getCurrentUser = function() { 
          return self.getPeople({userId: "me"}); 
         } 
         $rootScope.$broadcast("googlePlus:loaded") 
        }); 

      }); 

    }) 
+0

你问如何使用硬编码的身份验证令牌?或者你想不显示用户登录日历?如果是后者,我不会看到有什么办法可以做到这一点不幸。 – 2014-10-02 00:08:37

+0

从我所做的研究来看,硬编码不适用于OAuth系统。我的理解是有一种方法可以在不使用硬编码的情况下存储令牌。 – byrdr 2014-10-02 00:10:51

+0

这取决于你的意思。存储令牌绝对适用于OAuth 2.0,但OAuth 1.0具有必须在每个请求上生成的令牌。你是这个意思吗? – 2014-10-02 00:14:10

回答

0

什么,你会想要做的就是结果回来后,你将要关闭其保存到localStorage的或一个cookie,然后使用在未来如果存在的话。

从本质上讲,你将需要更新您的handleAuthResult的结果从谷歌API存储:

 handleAuthResult: function (authResult) { 
      if (authResult && !authResult.error) { 
       var data = {}; 
       $rootScope.$broadcast("google:authenticated", authResult); 
       googleApiBuilder.runClientLoadedCallbacks(); 

       // here you will store the auth_token 
       window.localStorage.setItem('auth_token', authResult.token /*I don't know what this response looks like, but it should be similar to this*/); 

       deferred.resolve(data); 
      } else { 
       deferred.reject(authResult.error); 
      } 
     }, 

Live Demo

+0

谢谢。也许我希望完成的事情是不可能的。我希望完全避免登录,以便我可以访问私人Google日历中的数据,并使用发回的JSON数据在网站上构建日历。 – byrdr 2014-10-02 02:06:19

+0

啊好吧是的,我无法想象这是可能的。否则,为什么他们需要登录? :) – 2014-10-02 16:01:43