Google auth2 clojurescript externs答案

【问题标题】：Google auth2 clojurescript externsGoogle auth2 clojurescript externs
【发布时间】：2017-10-22 18:51:33
【问题描述】：

因此，通过在我的 index.html 中包含 https://apis.google.com/js/platform.js 并简单地使用 javascript 互操作来模拟此处为普通 javascript 客户端提供的说明，我设法让 google 登录在我的开发 cljs 构建中工作：@ 987654322@。但是，我无法使用 :optimizations :advanced 进行生产构建。

在我与 gapi.auth2 对象交互的所有代码中，我都使用了(aget object "propertyName")，这似乎让我可以调用与gapi.load("auth2") 等效的 cljs 来访问“监听”函数在gapi.auth2.getAuthInstance().currentUser。

当我尝试调用此“侦听”函数时，我收到“无法读取未定义的属性 'add'”错误。我不知道这个“添加”属性应该存在于哪个对象上，如果我需要为这个对象创建一个 extern，或者如何这样做。

我是否首先以理智的方式接近 gapi.auth2 集成？

【问题讨论】：

我已经解决了这个问题，只需将与 auth2 库的交互移动到一个单独的 js 文件中，并将一个 cljs 回调传递到窗口对象上的这个文件中。我对此并不感到兴奋，但它确实有效。

标签： clojurescript google-closure-compiler google-authentication

【解决方案1】：

在高级模式下使用闭包编译器时，另一个答案给了我一堆错误/警告，所以这就是我的google-platform.js extern 文件的样子

/**
 * @fileoverview Externs for Google platform
 *
 * @externs
 */

/**
 * @constructor
 * @return {!gapi}
 */
function gapi() {}

/**
 * @param {string} name
 * @param {Function} success
 */
gapi.load = function (name, success) {};
gapi.prototype.load = gapi.load;

/**
 * @constructor
 * @return {!gapi.auth2}
 */
gapi.auth2 = function () {};
gapi.prototype.auth2 = gapi.auth2;

/**
 * @constructor
 * @param {Object<string,*>} options
 * @return {!gapi.auth2.init}
 */
gapi.auth2.init = function (options) {};
gapi.auth2.prototype.init = gapi.auth2.init;

/**
 * @param {Element} element
 * @param {Object} options
 * @param {Function} success
 * @param {Function} error
 */
gapi.auth2.init.attachClickHandler = function (element, options, success, error) {};
gapi.auth2.init.prototype.attachClickHandler = gapi.auth2.init.attachClickHandler;

/**
 * @constructor
 * @return {!googleUser}
 */
function googleUser() {}

/**
 * @constructor
 * @return {!googleUser.getAuthResponse}
 */
googleUser.getAuthResponse = function () {};
googleUser.prototype.getAuthResponse = googleUser.getAuthResponse;

 /** @type {string} */
googleUser.getAuthResponse.id_token;
googleUser.getAuthResponse.prototype.id_token = googleUser.getAuthResponse.id_token;

这是调用它的代码（用于自定义按钮）

let /** !gapi.auth2.init */ auth2;
gapi.load('auth2', function () {
    // Retrieve the singleton for the GoogleAuth library and set up the client.
    auth2 = gapi.auth2.init({
        'client_id': 'YOUR_CLIENT_ID.apps.googleusercontent.com',
        'cookiepolicy': 'single_host_origin',
        // Request scopes in addition to 'profile' and 'email'
        //scope: 'additional_scope'
});

$main.find('<selector for your button(s)>').each(/** @this {Element} */ function () {
    const t = this;
    auth2.attachClickHandler(t, {},
        function (/** Object<string,*> */ googleUser) {
            console.log(typeof googleUser, googleUser);
        },
        function (/** Object<string,*> */ error) {
            console.log(typeof error, error);
            alert(JSON.stringify(error, undefined, 2));
        });
    });
});

【讨论】：

【解决方案2】：

我用https://apis.google.com/js/platform.js 做了一个小型的自定义谷歌登录。

这是我的 externs.js 文件所需要的。

var gapi = {};
gapi.load = function (){};
gapi.auth2 = {};
gapi.auth2.init = function(){};
gapi.auth2.getAuthInstance = function (){};

基本上，有一个全局 js 对象 gapi 并且基于该 google 网站上的示例代码，gapi 具有方法 load 和属性 auth2。 gapi.auth 引用的对象有 init 和 getAuthInstance 方法。

我不建议使用aget 来获取对象的属性。 aget 用于 js 数组。对于 JavaScript 对象，请使用 goog.object/get 或多参数 goog.object/getValueByKeys。

对于像你的gapi.auth2.getAuthInstance().currentUser 这样我不知道类型的对象，我使用js-invoke 函数调用listen。

 (let [callback-fn (fn [_] ...)
       auth-inst  (.getAuthInstance js/gapi.auth2)
       currentUser (goog.object/get auth-inst "currentUser")]
  (js-invoke currentUser "listen" callback-fn))

【讨论】：