Question

尝试在我的网页上添加Google登录按钮。他们的示例代码没有通过JSLint测试。

我已经完成了一次编辑迭代（感谢@ruffin！），但现在问题正在扩大，所以我编辑了这篇文章以包含更多内容。

/*global Kobo,$,ko,Modernizr,GeneralConfiguration, gapi, eventHandlers */

Kobo.Utilities.AuthorizedAction = function (actionURL) {
    "use strict";

    var renderButton;

    renderButton = function () {
        gapi.signin2.render('my-signin2', {
            'scope': 'https://www.googleapis.com/auth/plus.login',
            'width': 236,
            'height': 44,
            'longtitle': true,
            'theme': 'dark',
            'onsuccess': window.eventHandlers.onSuccess,
            'onfailure': window.eventHandlers.onFailure
        });
    };

    if (Kobo.$.cookie('store.kobobooks.com') || Kobo.$.cookie('store.dev.koboboooks.com') || Kobo.$.cookie('storeperf.kobobooks.com')) {
        window.location.href = actionURL;
    } else {
        var content = Kobo.$('#reg-content');
        renderButton();
        Kobo._modal.open(content);
    }
};

// Google sign in


function onSignIn(googleUser) {
    "use strict";

    //var profile = googleUser.getBasicProfile();
      //console.log(googleUser);
      //console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
      //console.log('Name: ' + profile.getName());
      //console.log('Image URL: ' + profile.getImageUrl());
      //console.log('Email: ' + profile.getEmail());
      //console.log('https://securehd15.kobobooks.com/auth/Google/connect?rst=False&ReturnUrl=' + encodeURIComponent(window.location.href));
    window.location.href = 'https://accounts.google.com/o/oauth2/auth?scope=https%3a%2f%2fwww.googleapis.com%2fauth%2fplus.login+email+profile&client_id=642155554319-85mk1095rdhahgsssi9hm217eh461mld.apps.googleusercontent.com&response_type=code&access_type=offline&redirect_uri=https%3a%2f%2fsecureqa.kobobooks.com%2fauth%2fGoogle%2fgoogleoauth2callback&state=https://storehd.kobobooks.com/?utm_source=Reviewer&utm_source=reviewer';
}


window.eventHandlers = window.eventHandlers || {};

window.eventHandlers.onSuccess = function () {
    "use strict";
    window.alert('some code');
};
window.eventHandlers.onFailure = function () {
    "use strict";
    window.alert('some more code');
};

它构建正常，但在渲染时我得到

<exception>: ReferenceError: gapi is not defined at renderButton

Answer 1

嗯，gapi是API的“命名空间”，并且处于全局环境中，因此很容易修复。它看起来像第二个参数只是对象表示法，因此var名称的单引号是无关的。

所以我们将gapi放在我们的global指令中。

/*jslint white:true */
/*global gapi */
function renderButton() {
  "use strict";

  gapi.signin2.render('my-signin2', {
    scope: 'https://www.googleapis.com/auth/plus.login',
    width: 236,
    height: 44,
    longtitle: true,
    theme: 'dark',
    onsuccess: onSuccess,
    onfailure: onFailure
  });
}

如果未在文件中定义，您仍然会收到有关onSuccess和onFailure的错误，，。。您需要在与此调用相同的文件中定义这两个函数，或者更好的是，将它们放入您自己的命名空间中，并将其导入到全局变量中。

也就是说，在一个文件中，您可以定义这些事件处理程序是什么，并将它们放入全局命名空间eventHandlers（检查我在那里做的window技巧）：

/*jslint white:true */
/*global window */
window.eventHandlers = window.eventHandlers || {};

window.eventHandlers.onSuccess = function () {
    "use strict";
    window.alert('some code');
};
window.eventHandlers.onFailure = function () {
    "use strict";
    window.alert('some more code');
};

然后告诉JSLint此文件中存在eventHandlers命名空间。

/*jslint white:true */
/*global gapi, eventHandlers */
function renderButton() {
  "use strict";

  gapi.signin2.render('my-signin2', {
    scope: 'https://www.googleapis.com/auth/plus.login',
    width: 236,
    height: 44,
    longtitle: true,
    theme: 'dark',
    onsuccess: eventHandlers.onSuccess,
    onfailure: eventHandlers.onFailure
  });
}

那个lints。

使Google API符合JSLint

1 个答案: