Question

我正在Angular中开发一个应用程序，谷歌互动将在我可以在整个应用程序中使用的服务中。出于这个原因，我不能在最后添加函数名称的常用方法，因为我需要为应用程序的其余部分设置服务才能正常工作。

目前我所拥有的是以下

<script src="https://apis.google.com/js/client.js"></script>

<script type="text/javascript">
  var clientId = 'something something dark side.apps.googleusercontent.com';
  //The client ID, NECESSARY
  var apiKey = 'My API KEY';
  //Api Key
  var scopes = ['profile', 'email', 'https://www.googleapis.com/auth/calendar'];
  //The scopes, of which you will need
  (function(gapi) {
    console.log(gapi);
    gapi.auth.authorize({
      'client_id': clientId,
      'scope': scopes.join(' '),
      'immediate': true
    }, handleAuthResult);
  })(gapi);
  // rest of code below here.
</script>

我的问题是我在控制台中得到以下输出，这表明gapi.auth.authorize肯定存在，所以我得到的错误对我来说并没有多大意义。

我很欣赏这方面的任何帮助，因为我已经敲了大约一个星期了。

Answer 1

为了将来有人记录这一点，可能，但这不是一个非常好的工作，我开始。对于任何会看到这一点的人，请记住，代码是一个有效的进展，我确实只是让代码运行起来应该如何。

我发现的是，当你加入脚本时谷歌api（gapi）并没有完全加载（这就是为什么我会随机收到＆＃34; gapi.auth。授权不是函数＆＃34;错误）。大多数混淆最初源于谷歌开发者控制台是一个棘手的小东西 - 它将需要一个对象在给定时间被推出并在其上调用.toString()，给你的字符串输出object 你调用console.log（）的那一刻。但是，如果你像我一样，你会倾向于点击它并做我正在做的事情＆＃34;但是，它就在那里！＆＃34;

gapi所做的是加载一些更多的资源，但是因为在我们的代码出现问题之后，这些资源往往会被添加进去，它会在50％的时间内按预期工作100％。＆＃34;但是，google非常适合添加属性gapi_processed，并在加载数据时将其设置为true。

要重申一下：这段代码是我刚刚开始工作的代码，因此是一个麻烦的混乱。不要评论正确的做你看到的事情的方式，相信我，我正在努力。在忘记

之前，我只想记录下来

var config = {
    templatePath: 'templates/'
};

angular.module('rpiCalendar', ['ngRoute', 'ngAnimate'])
    .service('gapiAuth', function ($http, $document) {
        var clientId = '<YOUR CLIENT ID>.apps.googleusercontent.com';
        //The client ID, NECESSARY
        var apiKey = 'WHAT WAS THIS USED FOR? GOOD QUESTION IDK';
        //Api Key 
        var scopes = ['profile', 'email', 'https://www.googleapis.com/auth/calendar'];
        //The scopes, of which you will need
        var authService = this;
        //this is here just in case we need it later

        var gapi_el = $document.find('#gapi-load');
        //finding the gapi element added in because this needs to load.

        this.isLoggedIn = false;
        //is the current user logged in? this is mostly for ease of use.

        this.gapiProcessed = false;
        //This is used as a quick way to figure out whether or not the gapi is set and ready because Google is a bag of dicks.

        /*
            function ready:
                @params success_cb : function
                    Called when gapi is set and ready.
        */
        this.loadGapiWait = function () {
            console.log(this);
            if (gapi_el.attr('gapi_processed') != "true") {
                console.log('Nope!', gapi_el.attr('gapi_processed'));
                window.setTimeout(this.loadGapiWait.bind(this), 500);
                return;
            }
            gapi.auth.authorize({
                'client_id': clientId,
                'scope': scopes.join(' '),
                'immediate': true
            }, this.handleAuthResult);
        }

        $document.ready(this.loadGapiWait.bind(this));
        // we are using the $document object because... I am lazy. 

        this.initAuth = function (isImmediate) {
            isImmediate = isImmediate || false;
            //If the call is immediate or not (we try for an immediate call first for users who have already authorized us.)

            gapi.auth.authorize({
                'client_id': clientId,
                'scope': scopes.join(' '),
                'immediate': isImmediate
            }, this.handleAuthResult.bind(this));

        }.bind(this); //end gapi.auth.authorize()

        ; //end initAuth;

        this.handleAuthResult = function (authResult) {
            console.log("this is ", this);
            var authorizeDiv = document.getElementById('authorize-div');
            if (authResult && !authResult.error) {
                // Hide auth UI, then load client library.
                authorizeDiv.style.display = 'none';
                this.loadCalendarApi();
            } else {
                // Show auth UI, allowing the user to initiate authorization by
                // clicking authorize button.
                authorizeDiv.style.display = 'inline';
            }
        }.bind(this);

        /**
         * Initiate auth flow in response to user clicking authorize button.
         *
         * @param {Event} event Button click event.
         */
        this.handleAuthClick = function (event) {
            gapi.auth.authorize({
                    client_id: clientId,
                    scope: scopes,
                    immediate: false
                },
                this.handleAuthResult);
            return false;
        }.bind(this);

        /**
         * Load Google Calendar client library. List upcoming events
         * once client library is loaded.
         */

        this.loadCalendarApi = function () {
            gapi.client.load('calendar', 'v3', this.listUpcomingEvents);
        }.bind(this);

        /**
         * Print the summary and start datetime/date of the next ten events in
         * the authorized user's calendar. If no events are found an
         * appropriate message is printed.
         */
        this.listUpcomingEvents = function () {
            var request = gapi.client.calendar.calendarList.list(
                /*{
                            'calendarId': 'primary',
                            'timeMin': (new Date()).toISOString(),
                            'showDeleted': false,
                            'singleEvents': true,
                            'maxResults': 10,
                            'orderBy': 'startTime'
                        }*/
            );

            request.execute(function (resp) {
                var events = resp.items;
                console.log("Response object !!!:", resp);
                appendPre('Upcoming events:');
                if (events.length > 0) {
                    for (i = 0; i < events.length; i++) {
                        var event = events[i];

                        appendPre(event.summary + ' (' + (event.primary || false) + ')')
                    }
                } else {
                    appendPre('No upcoming events found.');
                }

            });
        }.bind(this);


    });

function appendPre(thing){
    var pre = angular.element(document).find('#pre-div');
    pre.append(thing);

}

可以使用javascript GAPI而不在源代码末尾包含'？onload ='？

1 个答案: