Azure 上的点击流分析 - 端到端

Question

我正在尝试使用 Azure 产品为端到端点击流分析解决方案创建 POC。计划是：

编写一个简单的 JS 来捕获我想要发送到 Azure 的事件。这将是客户端浏览器的一部分。假设一个事件可能如下所示

{
"event_name": "page_view",
"page_url": "https://stackoverflow.com/questions",
"time_stamp": "1692869137221"
}

使用客户端 JS 将事件发送到 Azure 事件中心
使用 Azure Functions 将事件存储在 Azure Blob 中
从 Azure Blob 中提取数据并将其存储在数据库中

我对第 1、3、4 点很好，但我有点难以理解第 2 点以及如何遵循安全最佳实践将数据从客户端浏览器传递到事件中心，因为当然我不想公开事件集线器凭证。

我确信 Azure 提供的功能并不意味着您在将数据传递到事件中心之前构建自己的 API 或端点。

有人做过类似的事情吗？基本上我遇到的主要问题是：

如何使用 JS 以安全的方式将包含 Web 分析数据的 json 对象从客户端浏览器发送到 Azure 事件中心？理想情况下仅使用 Azure 产品

谢谢，

大卫

Answer 1

使用客户端 JS 将事件发送到 Azure 事件中心。
根据 Web 表单中的用户输入将事件发送到 Azure 事件中心。客户端 HTML 表单收集必要的信息并向服务器发送 POST 请求，然后服务器使用 Azure SDK 将事件发送到指定的事件中心。

index.js

const  express = require('express');
const  {  EventHubProducerClient  } = require('@azure/event-hubs');
const  app = express();
const  port = process.env.PORT || 8080;
app.get('/',  (req,  res)  =>  {
res.sendFile(__dirname + '/index.html');
});
// ... (other routes)
app.get('/sendEvent',  async  (req,  res)  =>  {
const  connectionString = req.query.connectionString;
const  eventHubName = req.query.eventHubName;
const  producer = new  EventHubProducerClient(connectionString,  eventHubName);
const  eventData = {
event_name:  'page_view',
page_url:  'https://stackoverflow.com/questions',
time_stamp:  Date.now().toString()
};
try  {
await  producer.sendBatch([
{
body:  JSON.stringify(eventData)
}
]);
console.log('Event sent successfully');
res.json(eventData);  // Send event data as JSON response
}  catch (error) {
console.error('An error occurred while sending the event:',  error);
res.status(500).send('An error occurred while sending the event');
}  finally  {
await  producer.close();
}
});
app.listen(port,  ()  =>  {
console.log(`Server is running on port ${port}`);
});

index.html

<!DOCTYPE  html>
<html  lang="en">
<head>
<meta  charset="UTF-8">
<meta  name="viewport"  content="width=device-width, initial-scale=1.0">
<title>Azure Event Hub Client</title>
<style>
.popup  {
position:  fixed;
bottom:  20px;
left:  50%;
transform:  translateX(-50%);
padding:  10px  20px;
background-color:  rgba(0,  0,  0,  0.8);
color:  white;
border-radius:  5px;
font-size:  14px;
display:  none;
transition: display 0.5s;
}
.success  {
background-color:  rgba(70,  155,  70,  0.8);
}
.error  {
background-color:  rgba(200,  70,  70,  0.8);
}
</style>
</head>
<body>
<form  id="eventForm">
<label  for="connectionString">Connection String:</label>
<input  type="text"  id="connectionString"  required><br><br>
<label  for="eventHubName">Event Hub Name:</label>
<input  type="text"  id="eventHubName"  required><br><br>
<button  type="button"  id="sendEventButton">Send Event</button>
</form>
<div  id="popup"  class="popup"></div>
<script>
const  sendEventButton = document.getElementById('sendEventButton');
const  popup = document.getElementById('popup');
sendEventButton.addEventListener('click',  async  ()  =>  {
try  {
const  connectionString = document.getElementById('connectionString').value;
const  eventHubName = document.getElementById('eventHubName').value;  
const  response = await  fetch(`/sendEvent?connectionString=${encodeURIComponent(connectionString)}&eventHubName=${encodeURIComponent(eventHubName)}`);
if (response.ok) {
const  eventData = await  response.json();
showPopup(`Event sent successfully\nEvent Data:\n${JSON.stringify(eventData,  null,  2)}`,  'success');
// Use sendBeacon to asynchronously send data to the server
const  beaconData = JSON.stringify(eventData);
const  beaconSent = navigator.sendBeacon('/logEventData',  beaconData);
if (beaconSent) {
console.log('Beacon sent successfully');
}  else  {
console.error('Failed to send beacon');
}
}  else  {
showPopup('Failed to send event',  'error');
}
}  catch (error) {
console.error('An error occurred:',  error);
showPopup('An error occurred',  'error');
}
});
function  showPopup(message,  type)  {
popup.textContent = message;
popup.className = `popup ${type}`;
popup.style.display = 'block';
setTimeout(()  =>  {
popup.style.display = 'none';
},  3000);
}
</script>
</body>
</html>

本地

enter image description here

在蔚蓝中： enter image description here

Azure 上的点击流分析 - 端到端

问题描述投票：0回答：1

1个回答

最新问题

Azure 上的点击流分析 - 端到端

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1