注意
此方法仅适用于Umami V2版本， V3版此方法不适用
前言
最近在大家的疯狂安利下，捣鼓上了这样一款可以部署在Docker上的前端统计应用。前几天也试着将其 部署在Vercel了。特别是木木老师，更是直接放出了 《前端调用 Umami API 数据》 。不得不说，这个应用的可玩性成功的吸引了我的注意。
Umami 是一个高颜值可自部署的统计应用，本站也一直在使用该项目统计网站的访客数据，最后通过AI的帮助也是成功的在Memos页面中调用了umami统计的浏览数据，于是做个记录。
教程
获取 Umami API Token
如果你是在直接在 Umami 网站注册帐号使用的，可以直接在 网站后台获取 Api Token。
否则，如果是自托管，需要先进行身份验证。2（本文以下内容均以自托管为例）
首先需要去 Hoppscotch 获取umami站点的登录token，然后按照下图序号选取，最后获取token备用。
POST https://your-umami-instance.com/api/auth/login
图中第5步，填入以下信息：
{
"username": "your-username",
"password": "your-password"
}
通过 CloudFlare 部署 API
登录 CloudFlare 创建一个 Workers ，修改名称并点击部署。
addEventListener('fetch', event => {
event.respondWith(handleRequest(event));
});
const API_BASE_URL = 'https://umami.yourdomain.com';
const TOKEN = 'your_token';
const WEBSITE_ID = 'your_website_id';
const CACHE_KEY = 'umami_cache';
const CACHE_TIME = 600; // Cache time in seconds
async function fetchUmamiData(startAt, endAt) {
const url = `${API_BASE_URL}/api/websites/${WEBSITE_ID}/stats?startAt=${startAt}&endAt=${endAt}`;
const response = await fetch(url, {
headers: {
'Authorization': `Bearer ${TOKEN}`,
'Content-Type': 'application/json'
}
});
if (!response.ok) {
console.error(`Error fetching data: ${response.statusText}`);
return null;
}
return response.json();
}
async function handleRequest(event) {
const cache = await caches.open(CACHE_KEY);
const cachedResponse = await cache.match(event.request);
if (cachedResponse) {
return cachedResponse;
}
const now = Date.now();
const todayStart = new Date(now).setHours(0, 0, 0, 0);
const yesterdayStart = new Date(now - 86400000).setHours(0, 0, 0, 0);
const lastMonthStart = new Date(now).setMonth(new Date(now).getMonth() - 1);
const lastYearStart = new Date(now).setFullYear(new Date(now).getFullYear() - 1);
const [todayData, yesterdayData, lastMonthData, lastYearData] = await Promise.all([
fetchUmamiData(todayStart, now),
fetchUmamiData(yesterdayStart, todayStart),
fetchUmamiData(lastMonthStart, now),
fetchUmamiData(lastYearStart, now)
]);
const responseData = {
today_uv: todayData?.visitors?.value ?? null,
today_pv: todayData?.pageviews?.value ?? null,
yesterday_uv: yesterdayData?.visitors?.value ?? null,
yesterday_pv: yesterdayData?.pageviews?.value ?? null,
last_month_pv: lastMonthData?.pageviews?.value ?? null,
last_year_pv: lastYearData?.pageviews?.value ?? null
};
const jsonResponse = new Response(JSON.stringify(responseData), {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization'
}
});
event.waitUntil(cache.put(event.request, jsonResponse.clone()));
return jsonResponse;
}
通过访问部署好的地址，应该可以看见返回类似以下的数据串。
