谷歌auth2 clojurescript外部

Question

所以，我已经设法通过在我的index.html中包含https://apis.google.com/js/platform.js并使用javascript互操作来模拟这里给出的普通javascript客户端的指令：https://developers.google.com/identity/sign-in/web/sign-in，让google登录在我的开发cljs构建中工作。但是我无法通过以下方式获得生产构建：优化：高级工作。

在我与gapi.auth2对象交互的所有代码中，我使用了(aget object "propertyName")，这似乎让我调用调用cljs相当于gapi.load("auth2")一直访问gapi.auth2.getAuthInstance().currentUser上的'listen'函数。

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

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

Answer 1

我用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，并基于谷歌网站上的示例代码，gapi有方法load和属性auth2。 gapi.auth引用的对象具有init和getAuthInstance方法。

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

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

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

Answer 2

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

/**
 * @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));
        });
    });
});