Пользовательская сессия BOT перекрывается в веб-канале. мы используем https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js
Проблема: мы передаем страну, уникальный идентификатор пользователя и адрес электронной почты из пользовательского интерфейса в BOT через канал веб-чата. Пользователь видит данные других пользователей, когда они запрашивают их подробности, то есть мои данные. Это связано с использованием ссылки cdn? в чем может быть причина, как это решить?
ниже код веб-чата -
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script src="https://askadamwebappdev.azurewebsites.net/AskAdam/babelpolyfill7.4.4.js"></script>
<style>
.chat-box {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 4px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
border: 4px solid #12abdb;
margin: 0px;
display: none;
flex-direction: column;
box-sizing: border-box;
min-width: 320px;
min-height: 300px;
position: absolute;
height: 65%;
width: 400px;
bottom: 5px;
left: 5px;
z-index: 99999999;
}
@media only screen and (max-width: 700px) {
.chat-box {
width: 100%;
height: 100%;
transform: none;
margin: 0px;
}
.chat-box header .bot-name {
margin-left: 53px !important;
}
.chat-box header .logo {
margin-top: -4px !important;
width: 60px !important;
height: 60px !important;
}
}
button.chat-box-maximize {
background-color: #E7E7E7;
border-radius: 50%;
border: 2px solid #12abdb;
bottom: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
color: White;
font-size: 30px;
height: 96px;
outline: 0;
padding: 0px;
position: fixed;
left: 20px;
width: 96px;
}
button.chat-box-maximize:focus:not(:active),
button.chat-box-maximize:focus:not(:active) {
background-color: #2a6fa8;
border-color: #2a6fa8;
}
button.chat-box-maximize:active {
background-color: White;
color: #39c;
}
button.chat-box-maximize img {
border-radius: 50%;
margin-top: 5px;
}
.chat-box header {
background-color: #12abdb;
flex-shrink: 0;
display: flex;
cursor: move;
flex-basis: 53px;
}
.chat-box header button {
width: 40px;
height: 40px;
background-color: Transparent;
border: 0;
color: White;
outline: 0;
margin-top: 9px;
cursor: default;
}
.chat-box header button.minimize {
margin-top: 3px;
}
.chat-box header button:focus:not(:active),
.chat-box header button:hover:not(:active) {
color: rgba(255, 255, 255, 0.6);
}
.chat-box header button:focus:active {
color: rgba(255, 255, 255, 0.4);
}
.chat-box header .bot-name {
font-size: 21px;
margin-left: 107px;
font-weight: bold;
color: white;
width: 142px;
}
.chat-box header .bot-title {
font-size: 15px;
margin-left: -121px;
margin-top: 27px;
color: white;
word-break: keep-all;
white-space: nowrap;
}
.chat-box header .logo {
z-index: 1;
width: 120px;
height: 120px;
position: absolute;
margin-top: -61px;
margin-left: -2px;
background-size: contain;
background-repeat: no-repeat;
background-image: url(/image/responsive/ask-adam-virtual-agent-avatar.png);
}
.chat-box header .filler {
flex: 0 10000 100%;
}
.css-1dgbgmu>.image {
background-image: url(/image/responsive/ask-adam-virtual-agent-avatar.png);
background-size: contain;
}
.css-1m1alj7 {
background-color: #12abdb !important;
}
.css-1dgbgmu {
background-color: white !important;
}
.css-1vieo9r .ac-pushButton {
color: #12abdb !important;
}
.css-1vieo9r .ac-pushButton:active {
border-color: #12abdb !important;
}
.css-1vieo9r .ac-pushButton:focus {
outline: 0;
}
.css-14x775w {
display: none;
}
.chat-box ::-moz-selection {
background: #12abdb;
}
.chat-box ::selection {
background: #12abdb;
}
.web-chat {
overflow: hidden;
width: 100%;
height: 100%;
}
.connect-spinner {
display: flex;
margin: auto;
text-align: center;
}
.connect-spinner .content {
margin: auto;
}
.connect-spinner .content .icon {
font-size: 64px;
}
.chat-box-header img {
width: 100%;
}
.chat-box {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.chat-box code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
.resizable .resizers {
width: 100%;
height: 100%;
box-sizing: border-box;
position: absolute;
}
.resizable .resizer {
width: 10px;
height: 10px;
position: absolute;
z-index: 999999;
}
.resizable .resizer.top-left {
position: absolute;
left: -5px;
top: -5px;
cursor: nwse-resize;
}
.resizable .resizer.top-right {
position: absolute;
right: -5px;
top: -5px;
cursor: nesw-resize;
}
.resizable .resizer.bottom-left {
position: absolute;
left: -5px;
bottom: -5px;
cursor: nesw-resize;
}
.resizable .resizer.bottom-right {
position: absolute;
right: -5px;
bottom: -5px;
cursor: nwse-resize;
}
</style>
<div id="chat-box-container" class="chat-box resizable">
<div class="resizer top-left"></div>
<div class="resizer top-right"></div>
<div class="resizer bottom-left"></div>
<div class="resizer bottom-right"></div>
<header id="chat-box-header" class="chat-header">
<div class="logo"></div>
<div class="bot-name">Ask Adam</div>
<div class="bot-title">Virtual Assistant</div>
<div class="filler"></div>
<button onclick="minimizeConversation()" class="minimize">
<i class="far fa-window-minimize fa-lg"></i>
</button>
<button onclick="restartConversation()" class="restart-conversation">
<i class="fas fa-times fa-lg"></i>
</button>
</header>
<div class="web-chat" id="webchat" role="main"></div>
</div>
<button onclick="minimizeConversation()" class="chat-box-maximize">
<!--i class="far fa-comment-alt"></i-->
<img src="/image/responsive/ask-adam-virtual-agent-avatar.png" />
</button>
<script type="text/javascript">
"use strict";
function makeResizableDiv(div) {
const element = document.querySelector(div);
const resizers = document.querySelectorAll(div + " .resizer");
const minimum_size = 320;
let original_width = 0;
let original_height = 0;
let original_x = 0;
let original_y = 0;
let original_mouse_x = 0;
let original_mouse_y = 0;
for (let i = 0; i < resizers.length; i++) {
const currentResizer = resizers[i];
currentResizer.addEventListener("mousedown", function(e) {
e.preventDefault();
original_width = parseFloat(
getComputedStyle(element, null)
.getPropertyValue("width")
.replace("px", "")
);
original_height = parseFloat(
getComputedStyle(element, null)
.getPropertyValue("height")
.replace("px", "")
);
original_x = element.getBoundingClientRect().left;
original_y = element.getBoundingClientRect().top;
original_mouse_x = e.pageX;
original_mouse_y = e.pageY;
window.addEventListener("mousemove", resize);
window.addEventListener("mouseup", stopResize);
});
function resize(e) {
if (currentResizer.classList.contains("bottom-right")) {
const width = original_width + (e.pageX - original_mouse_x);
const height = original_height + (e.pageY - original_mouse_y);
if (width > minimum_size) {
element.style.width = width + "px";
}
if (height > minimum_size) {
element.style.height = height + "px";
}
} else if (currentResizer.classList.contains("bottom-left")) {
const height = original_height + (e.pageY - original_mouse_y);
const width = original_width - (e.pageX - original_mouse_x);
if (height > minimum_size) {
element.style.height = height + "px";
}
if (width > minimum_size) {
const left = original_x + (e.pageX - original_mouse_x);
element.style.width = width + "px";
element.style.left =
original_x + (e.pageX - original_mouse_x) + "px";
}
} else if (currentResizer.classList.contains("top-right")) {
const width = original_width + (e.pageX - original_mouse_x);
const height = original_height - (e.pageY - original_mouse_y);
if (width > minimum_size) {
element.style.width = width + "px";
}
if (height > minimum_size) {
element.style.height = height + "px";
const top = original_y + (e.pageY - original_mouse_y);
element.style.top = top + "px";
}
} else {
const width = original_width - (e.pageX - original_mouse_x);
const height = original_height - (e.pageY - original_mouse_y);
if (width > minimum_size) {
element.style.width = width + "px";
element.style.left =
original_x + (e.pageX - original_mouse_x) + "px";
}
if (height > minimum_size) {
element.style.height = height + "px";
const top = original_y + (e.pageY - original_mouse_y);
element.style.top = top + "px";
}
}
}
function stopResize() {
window.removeEventListener("mousemove", resize);
}
}
}
makeResizableDiv(".resizable");
(function() {
dragElement(document.getElementById("chat-box-container"));
function dragElement(elmnt) {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
if (document.getElementById("chat-box-header")) {
document.getElementById(
"chat-box-header"
).onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = elmnt.offsetTop - pos2 + "px";
elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
})();
var minimized = true;
var store;
var directLine;
var token = "this_is_bot_secret";
(function() {
botInit();
})();
var usr_country = "india";
var usr_mail = "[email protected]";
var usr_login_id = "this_is_userloginId_unique_Across_org";
function botInit() {
var styleOptions = {
botAvatarImage: "/image/responsive/ask-adam-virtual-agent-avatar.png"
};
store = window.WebChat.createStore({}, function(_ref) {
var dispatch = _ref.dispatch;
return function(next) {
return function(action) {
if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
dispatch({
type: "WEB_CHAT/SEND_EVENT",
payload: {
name: "USER",
value: {
"COUNTRY": usr_country,
"ID": usr_login_id,
"MAIL": usr_mail,
"Service_Now": "true"
}
}
});
} else if (action.type === "DIRECT_LINE/DISCONNECT_FULFILLED") {
return;
}
return next(action);
};
};
});
directLine = window.WebChat.createDirectLine({
token: token
});
window.WebChat.renderWebChat({
directLine: directLine,
store: store,
styleOptions: styleOptions
},
document.getElementById("webchat")
);
document.querySelector("#webchat > *").focus();
}
function minimizeConversation() {
var maximizeButton = document.getElementsByClassName(
"chat-box-maximize"
)[0];
var chatBox = document.getElementsByClassName("chat-box")[0];
if (minimized) {
maximizeButton.style.display = "none";
chatBox.style.display = "flex";
minimized = false;
} else {
maximizeButton.style.display = "inline";
chatBox.style.display = "none";
minimized = true;
}
}
function restartConversation() {
minimizeConversation();
const element = document.getElementById("chat-box-container");
element.removeAttribute("style")
var messages = document.getElementsByClassName("css-1qyo5rb");
while (messages.length > 0)
messages[0].parentNode.removeChild(messages[0]);
botInit();
}
</script>