如何使用混合面板 API？答案

【问题标题】：How can I use mixpanel API?如何使用混合面板 API？
【发布时间】：2012-10-19 20:55:21
【问题描述】：

我无法连接到 mixpanel。

我尝试过正确的 api_key 和 api_secret，如下所示：

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js" />
    </script>
    <script type="text/javascript" src="faulty-labs-md5.js" />
    </script>
</head>
<body>
    <script type="text/javascript">
$(document).ready(function() {
    $("#btnTest").click(function() {

        var api_key = 'BigSecret';
        var api_secret = 'BigSecret2';
        var expire = new Date('2012', '12', '24').getTime() / 1000 + 3600;
        var from_date = $("#date1").val();
        var to_date = $("#date2").val();
        var sig = faultylabs.MD5("api_key=" + api_key + "expire=" + expire + "from_date=" + from_date + "to_date=" + to_date + api_secret);
        //var path = 'https://data.mixpanel.com/api/2.0/export?api_key=' + api_key + "&expire=" + expire + "&from_date=" + from_date + "&to_date=" + to_date;
        var path = 'https://data.mixpanel.com/api/2.0/export?api_key=' + api_key + "&expire=" + expire + "&from_date=" + from_date;
        path = path + "&sig=" + sig.toLowerCase();
        $.jsonp({
            type: 'GET',
            url: path,
            async: false,
            callback: to_date,  // sneaky bogus shenanigans
            callbackParameter: 'to_date', // more of same
            contentType: "application/json",
            dataType: 'jsonp',
            cache: true,
            success: function(json) {
                alert(json);
            },
            error: function(e) {
                console.log(e.message);
            }
        });
    });
});
    </script>
    <input type="text" id="date1" value="2012-10-29" />
    <input type="text" id="date2" value="2012-10-29" />
    <button onclick="return false" id="btnTest">Test</button>
</body>
</html>

如您所见，我尝试将此 API 与 JSONP 一起使用，但我迷失了方向。有谁了解mixpanel和JSONP的吗？

提前谢谢你。

编辑：我添加了新版本的页面。

【问题讨论】：

你能告诉我们更多像控制台是否返回任何东西吗？您是否检查过您的控制台 Ajax 请求是否已发送出去？你什么时候打电话 sendRequestToPage() ？它不会自行启动。
我现在收到 {"error": "Invalid API signature"}
你没有在你的 url 中指定 api_secret
我创建了一个 Javascript 库来让这变得非常简单：github.com/michaelcarter/mixpanel-data-export-js
@stealthysnacks 我认为您可以使用代理。您的 Javascript 代码可以向您的服务器发送请求，从而触发您的服务器向 MixPanel 发送请求。这种方式的 API 机密只有您的服务器知道，并且永远不会提供给您的客户端。

标签： javascript jquery jsonp mixpanel

【解决方案1】：

看了this PHP之后，我很确定你需要对你的api签名做一个md5哈希。

导入一个 md5 库，例如 this one

<script type="text/javascript" src="jquery.md5.min.js"></script>

然后做这样的事情：

var sig = "api_key=" + api_key + "expire=" + expire + "from_date=" + from_date + "to_date=" + to_date + "bigsecret2";
sig = $.md5(sig);

我正在尝试完成与您相同的事情，但不幸的是我仍然没有成功。

编辑 - 这很粗糙。如果任何参数未使用 sig 散列，API 将失败。如果包含任何不属于 API 的参数，它也会失败。 JsonP 添加了一个“回调”和一个“_”时间戳参数，以便它可以做它所做的事情，这会中断调用。您可以通过使用cache: true 排除时间戳并使用允许您重命名callback 参数的特殊jsonp 插件来解决此问题。这里我将其重命名为to_date，并将回调函数命名为“2012-10-29”。这很疯狂，它仍然不起作用，因为回复不是有效的json。这是一系列无法评估的以换行符分隔的 json 对象，我仍然停留在这部分。到目前为止，这是我所得到的：

<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.md5.min.js"></script>
<script type="text/javascript" src="jquery.jsonp-2.4.0.js"></script>

<script>
    var events = document.getElementById("events");

    var api_key = "secret";
    var expire = "1351811239";
    var from_date = "2012-10-29";
    var to_date = "2012-10-29";

    var sig = "api_key=" + api_key + "expire=" + expire + "from_date=" + from_date + "to_date=" + to_date + "secret2";
    sig = $.md5(sig);


    var path = 'https://data.mixpanel.com/api/2.0/export?api_key=' + api_key + "&expire=" + expire + "&from_date=" + from_date;
    // to_date will be added later as the sneaky callback

    path = path + "&sig=" + sig;

    $.jsonp({
        type: 'GET',
        url: path,
        async: false,
        callback: to_date,  // sneaky bogus shenanigans
        callbackParameter: 'to_date', // more of same
        contentType: "application/json",
        dataType: 'jsonp',
        cache: true,
        success: function(json) {
            alert(json);
        },
        error: function(e) {
            console.log(e.message);
        }
    });

</script>

最终我举手编写了一个 C# 程序来访问 API 并为我吐出一个 CSV。

【讨论】：

他们的文档说回调参数不是 MD5 签名的一部分。
Uncaught TypeError: Object function (a,b){return new p.fn.init(a,b,c)} has no method 'jsonp'
我已经用新版本的页面编辑了我的答案。应该包含什么脚本才能使用 $.jsonp？谢谢。
脚本在这里 github.com/jaubourg/jquery-jsonp 但同样，它对我不起作用，因为输出不是有效的 JSON。

【解决方案2】：

正如 Tyler 所提到的，在将签名附加到请求 URL 之前，您需要对签名进行 MD5 哈希处理。

另外，如果你粘贴的是你的代码，那你就有一个bug：

path = path + + "&sig=" + sig;

应该是：

path = path + "&sig=" + sig

【讨论】：

【解决方案3】：

我尝试了很多东西，但我没有成功使用 jsonp 向 mixpanel 发送请求，因为它生成了新参数。没有人向我展示一个可行的解决方案，所以我想这个问题是无法解决的。如果有人向我展示了解决方案，我很乐意删除此答案并接受他/她的答案。

【讨论】：

【解决方案4】：

来自文档：

我们没有JS客户端库，但是我们在上面实现了jsonp API 后端。有关简要概述，请参阅 Wikipedia 文章。我们的 jsonp 参数是“回调”。该参数将不会在期间使用签名计算。

https://mixpanel.com/docs/api-documentation/data-export-api#libs-js

假设您正确计算签名，以下示例将起作用：

 $.getJSON('http://mixpanel.com/api/2.0/segmentation/?callback=?', {
            event: event,
            from_date: from_date,
            to_date: to_date,
            expire: expire,
            sig: sig,
            api_key: api_key
        }, function (result) {
            alert(result);
        });

【讨论】：

【解决方案5】：

这是我意识到的一些事情。我能够让它与我尝试过的所有其他端点一起工作，但“导出”。我很想相信这是原始数据导出端点特有的东西。阅读他们的docs，原始数据端点是唯一不属于主 API 的端点，因此需要不同的基本 URI“https://data.mixpanel.com/api/2.0”。所有其他端点“事件”、“分段”等使用“https://mixpanel.com/api/2.0”。我已经记下了我在下面经历的步骤。我正在使用 jquery.MD5 lib 来实现 md5

$(function() {
  $("#test_request").click(function() {
    var api_secret, arg_keys, args, args_concat, end_point, key, 
    mixpanel_base_uri, sig, sorted_keys, _i, _len;
    args = {};
    end_point = "export";
    api_secret = "BIG_SECRET2";
    args.api_key = "BIG_SECRET";

    args.from_date = $("input[name=from_date]").val();
    args.to_date = $("input[name=to_date]").val();
    //using Math.floor to round to integer as api expects integer
    args.expire = Math.floor(new Date().getTime() / 1000 + 3600); 
    arg_keys = Object.keys(args);
    sorted_keys = arg_keys.sort();
    args_concat = "";

    //concatenating key value pairs
    for (_i = 0, _len = sorted_keys.length; _i < _len; _i++) {
      key = sorted_keys[_i];
      args_concat = "" + args_concat + key + "=" + args[key];
    }
    sig = $.md5(args_concat + api_secret);

    //merge signature property with args hash
    $.extend(args, {
      sig: sig
    });

    //export endpoint isn't part of the main api and data.mixpanel instead of just mixpanel.com
    DATA_URI = "https://data.mixpanel.com/api/2.0"
    DEFAULT_URI = "https://mixpanel.com/api/2.0"
    BASE_URI = end_point === "export" ? DATA_URI : DEFAULT_URI;
    $.getJSON("" + BASE_URI + "/" + end_point + "?callback=?", args, function(result) {
      alert("result is" + JSON.stringify(result));

    });
  });
});

我还为所有其他端点提出了一个可行的解决方案。这是链接http://jsfiddle.net/Dantheta/CmKQN/

希望你觉得它有用。

【讨论】：

谢谢，我会尽快测试一下。
嘿，丹。我想我有同样的问题。我可以让“/events/top”工作，但不能让“export”工作。我收到一个 400 Bad Request，但我认为我的用于拨打电话、计算签名等的代码是正确的，因为前者是成功的。你有没有接到过成功的出口电话？顺便说一句，您的 jsfiddle sn-p 有所帮助，尽管它也没有执行。
感谢您的提琴，@dantheta！我在这里更新了：jsfiddle.net/mytovdp9，因为您的第 13 行的 on 字段有错字，我将外部资源更新为 rawgit，因此在 github 更改后再次使用正确的 MIME 类型。实际上，我现在在这里正确编辑了你的：jsfiddle.net/CmKQN/8
嘿，有些成功让“出口”工作了？？

【解决方案6】：

/export 端点似乎不支持 JSONP 回调。如果您计算您的签名并在没有回调和没有缓存破坏器（默认情况下通过 $.ajax 调用提供）的情况下调用 URL，您将获得结果。

【讨论】：