前言

最近在大家的疯狂安利下，捣鼓上了这样一款可以部署在Docker上的前端统计应用。特别是木木老师，更是直接放出了 《前端调用 Umami API 数据》 。不得不说，这个应用的可玩性成功的吸引了我的注意。

通过阅读官方的API文档，一番折腾下来，也是成功的在Memos页面中调用了umami统计的浏览数据。于是做个记录。

认证

如果想要获取Umami的数据，首先需要身份鉴权。

POST https://umami.mydomain.com/api/auth/login

通过上述接口，请求到一个TOKEN。获取任何数据都需要在请求的头部带上这个TOKEN，完成身份的认证。

这一步我的建议是通过API在线请求调试工具去完成，像 POSTMAN、hoppscotch

Hoppscotch

如果请求成功，会返回一个JSON

{
  "token": "eyTMjU2IiwiY...4Q0JDLUhWxnIjoiUE_A",
  "user": {
    "id": "cd33a605-d785-42a1-9365-d6cad3b7befd",
    "username": "your-username",
    "createdAt": "2020-04-20 01:00:00"
  }
}

如此一来，就请求到了TOKEN，建议将TOKEN存入 HUGO 里面的 config中，方便后面调用。

[params.umami]
    url = 'https://umami.mydomain.com'
    token = 'eyTMjU2IiwiY...4Q0JDLUhWxnIjoiUE_A'

浏览数据

获取文章的阅读数据，可以使用下面的这个API：

GET https://umami.mydomain.com/api/websites/{websiteId}/metrics

参数如下：

  • startAt: 起始时间
  • endAt: 终止时间
  • type: url

请求代码如下：

var umiTime = Date.parse(new Date()); //获取当前时间戳
var umiUrl = "https://umami.mydomain.com/api/websites/" + bbMemo.umiId + "/metrics?startAt=0&endAt=" + umiTime + "&type=url"

  fetch(umiUrl,{
    method: 'GET',
    mode: 'cors',
    cache: 'default',
    headers: {
      'Authorization': 'Bearer ' + umami.token,
      'Content-Type': 'application/json'
    }
  })
  .then(res => res.json()).then(resdata => {});

请求成功后，获取到的数据如下：

[
    {"x": "/", "y": 46}
    {"x": "/docs", "y": 17}
    {"x": "/download", "y": 14}
]

最后，通过遍历对比JSON中的地址与当前文章的URL地址，就可以获取到对应的浏览数据了。

最后

官方的API文档里面还有非常多的接口，大家可以根据自己的需求，按照上面的方法去获取自己想要的统计数据，就酱。