Сеанс пользователя BOT перекрывается в веб-канале

Пользовательская сессия 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>

person Kumari Sharma    schedule 02.07.2020    source источник
comment
Приемлем ли мой ответ?   -  person Kyle Delaney    schedule 08.07.2020


Ответы (1)


Не похоже, что вы указываете идентификатор пользователя в реквизитах или токене. Взгляните на эту документацию.

Укажите идентификатор пользователя. Есть два способа указать userID: в реквизитах или в токене при генерации вызова токена (createDirectLine()). Если оба метода используются для указания идентификатора пользователя, будет использоваться свойство маркера идентификатора пользователя, и во время выполнения будет отображаться console.warn. Если userID предоставляется через реквизиты, но имеет префикс 'dl', например 'dl_1234', значение будет выброшено и будет сгенерировано новое ID. Если userID не указан, по умолчанию будет выбран случайный идентификатор пользователя. Не рекомендуется использовать несколько пользователей с одним и тем же идентификатором пользователя; их пользовательское состояние будет совместно использоваться, что создает угрозу безопасности при аутентификации.

person Kyle Delaney    schedule 03.07.2020