文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将登录令牌传递给聊天机器人实现单点登录

问如何将登录令牌传递给聊天机器人实现单点登录
EN

Stack Overflow用户

提问于 2021-01-21 01:37:26

回答 1查看 151关注 0票数 0

我需要将登录令牌传递给聊天机器人，以便单点登录(SSO)工作，但我不知道如何实现这一点。请帮我解决这个问题。

请参阅此社区链接https://powerusers.microsoft.com/t5/General/How-to-configure-SSO-in-PVA/m-p/799169#M1894

配置SSO的文档：

https://docs.microsoft.com/en-us/power-virtual-agents/configure-sso https://github.com/microsoft/PowerVirtualAgentsSamples/blob/master/BuildYourOwnCanvasSamples/3.single-sign-on/index.html

我已经使用Microsoft Power Virtual Agent创建了一个聊天机器人，并将其部署在SharePoint网站上。我正在尝试配置SSO，但它似乎不起作用。每次我看到登录卡传递令牌时，我都要自动登录。

下面是我使用的代码。

<!DOCTYPE html>
<html>
<head>
  <title>Virtual Agent</title>
  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  <script type="text/javascript" src="https://alcdn.msauth.net/lib/1.2.0/js/msal.js"></script>
  <script src="https://unpkg.com/@azure/storage-blob@10.3.0/browser/azure-storage.blob.min.js" integrity="sha384-fsfhtLyVQo3L3Bh73qgQoRR328xEeXnRGdoi53kjo1uectCfAHFfavrBBN2Nkbdf" crossorigin="anonymous"></script>
  <script type="text/javascript">
      if (typeof Msal === "undefined")
        document.write(unescape("%3Cscript src='https://alcdn.msftauth.net/lib/1.2.0/js/msal.js' type='text/javascript' %3E%3C/script%3E"));
  </script>

  <script>
   var clientApplication;
     (function () {
       var msalConfig = {
           auth: {
             clientId: '<CLIENT ID I HAVE REMOVED>',
             authority: 'https://login.microsoftonline.com/<DIRECTORY ID I HAVE REMOVED>'
           },
           cache: {
             cacheLocation: 'localStorage',
             storeAuthStateInCookie: false
           }
       };
       if (!clientApplication) {
         clientApplication = new Msal.UserAgentApplication(msalConfig);
       }
     } ());
 </script>

  <style>
      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
      }

      .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0, 0, 0); /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
      }

      .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 10px;
        border: 1px solid #888;
        width: 500px;
        height: 575px;
      }
      .close {
        color: black;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }

      .close:hover,
      .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
      }

      .main {
        margin: 18px;
        border-radius: 4px;
      }

      div[role="form"] {
        background-color: #3392ff;
      }

      #webchat {
        position: center;
        height: 530px;
        width: 100%;
        top: 60px;
        overflow: hidden;
      }
      #heading {
        padding-bottom: 5px;
      }

      h1 {
        font-size: 14px;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        color: #f3f2f1;
        letter-spacing: 0.005em;
        display: table-cell;
        vertical-align: middle;
        padding: 13px 0px 0px 20px;
      }

      #login {
        position: fixed;
        margin-left: 150px;
      }

      .span {
        font-weight: bold;
      }
      #myBtn {
        position: fixed;
        float: right;
        outline: none;
        width: 60px;
        height: 80px;
        margin: auto auto auto 10px;
      }
      button:hover {
        background-color: transparent;
      }
    </style>

</head>
  <body>
    <button id="myBtn" type="button">Power Virtual Agent</button>

    <div id="myModal" class="modal">
      <!-- Modal content -->
      <div class="modal-content" style="background-color: #ffd933">
        <span class="close">&times;</span>
        <div id="chatwindow">
          <div id="heading">
            <img src="https://www.flaticon.com/svg/vstatic/svg/4061/4061262.svg?token=exp=1611082398~hmac=d7fe65d90930596808248cc855fd1fda" width="42" height="30" alt="KMT-logo"/>
            <span class="span"><strong>Virtual Agent</strong></span>
          </div>
          <div id="webchat"></div>
        </div>
      </div>
    </div>

    <!--Button code begins here-->

    <script>
      // Get the modal
      var modal = document.getElementById("myModal");

      // Get the button that opens the modal
      var btn = document.getElementById("myBtn");

      // Get the <span> element that closes the modal
      var span = document.getElementsByClassName("close")[0];

      // When the user clicks the button, open the modal
      btn.onclick = function () {
        modal.style.display = "block";
      };

      // When the user clicks on <span> (x), close the modal
      span.onclick = function () {
        modal.style.display = "none";
      };

      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function (event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      };
    </script>

    <!--Button code ends here-->
    <script>
function getOAuthCardResourceUri(activity) {
  if (activity &&
       activity.attachments &&
       activity.attachments[0] &&
       activity.attachments[0].contentType === 'application/vnd.microsoft.card.oauth' &&
       activity.attachments[0].content.tokenExchangeResource) {
         // asking for token exchange with AAD
         return activity.attachments[0].content.tokenExchangeResource.uri;
   }
}

function exchangeTokenAsync(resourceUri) {
  let user = clientApplication.getAccount();
   if (user) {
     let requestObj = {
       scopes: [resourceUri]
     };
     return clientApplication.acquireTokenSilent(requestObj)
       .then(function (tokenResponse) {
         return tokenResponse.accessToken;
         })
         .catch(function (error) {
           console.log(error);
         });
         }
         else {
         return Promise.resolve(null);
   }
}

async function fetchJSON(url, options = {}) {
       const res = await fetch(url, {
         ...options,
         headers: {
           ...options.headers,
           accept: "application/json",
         },
       });

       if (!res.ok) {
         console.log(`KMT - Failed to fetch JSON due to ${res.status}`);
         throw new Error(`Failed to fetch JSON due to ${res.status}`);
       }

       return await res.json();
     }
</script>

<script>
    (async function main() {

        // Add your BOT ID below
        var BOT_ID = "<BOT ID I HAVE REMOVED>";
        var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

        const {
            token
        } = await fetchJSON(theURL);
        const directLine = window.WebChat.createDirectLine({
            token
        });
        var userID = clientApplication.account?.accountIdentifier != null ?
            ("Your-customized-prefix-max-20-characters" + clientApplication.account.accountIdentifier).substr(0, 64) :
            (Math.random().toString() + Date.now().toString()).substr(0, 64); // Make sure this will not exceed 64 characters
        const store = WebChat.createStore({}, ({
            dispatch
        }) => next => action => {
            const {
                type
            } = action;
            if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                dispatch({
                    type: 'WEB_CHAT/SEND_EVENT',
                    payload: {
                        name: 'startConversation',
                        type: 'event',
                        value: {
                            text: "hello"
                        }
                    }
                });
                return next(action);
            }
            if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
                const activity = action.payload.activity;
                let resourceUri;
                if (activity.from && activity.from.role === 'bot' &&
                    (resourceUri = getOAuthCardResourceUri(activity))) {
                    exchangeTokenAsync(resourceUri).then(function(token) {
                        if (token) {
                            directLine.postActivity({
                                type: 'invoke',
                                name: 'signin/tokenExchange',
                                value: {
                                    id: activity.attachments[0].content.tokenExchangeResource.id,
                                    connectionName: activity.attachments[0].content.connectionName,
                                    token,
                                },
                                "from": {
                                    id: userID,
                                    name: clientApplication.account.name,
                                    role: "user"
                                }
                            }).subscribe(
                                id => {
                                  console.log("KMT - id: " + id);
                                    if (id === 'retry') {
                                        // bot was not able to handle the invoke, so display the oauthCard
                                        return next(action);
                                    }
                                    // else: tokenexchange successful and we do not display the oauthCard
                                },
                                error => {
                                    // an error occurred to display the oauthCard
                                    return next(action);
                                }
                            );
                            return;
                        } else
                            return next(action);
                    });
                } else
                    return next(action);
            } else
                return next(action);
        });

        const styleOptions = {

            // Add styleOptions to customize Web Chat canvas
          botAvatarInitials: "BT",
          userAvatarInitials: "UR",
          //accent: '#00809d',
          botAvatarBackgroundColor: "#FFFFFF",
          userAvatarBackgroundColor: "#FFFFFF",
          botAvatarImage:
            "https://www.flaticon.com/svg/vstatic/svg/1587/1587565.svg?token=exp=1611082485~hmac=740caa18cae9c7b8ba42daccc841eef0",
          userAvatarImage:
            "https://www.flaticon.com/svg/vstatic/svg/64/64572.svg?token=exp=1611082510~hmac=c15408c5ec67720b3be4b75976161466",
          hideUploadButton: true
        };

        window.WebChat.renderWebChat({
                directLine: directLine,
                store,
                userID: userID,
                styleOptions
            },
            document.getElementById('webchat')
        );
    })().catch(err => console.error("An error occurred: " + err));
</script>

  </body>
</html>

javascript

oauth-2.0

azure-active-directory

chatbot

msal.js

回答 1

Stack Overflow用户

发布于 2021-03-24 06:59:20

提供的代码通过登录的用户令牌传递。很可能你没有正确设置应用程序注册。

在设置应用程序时，我错过了向客户端应用程序添加作用域的步骤

chrome中的检查面板帮助我识别出有一个问题

https://i.stack.imgur.com/K9qRG.png

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65814685

复制

相似问题

问如何将登录令牌传递给聊天机器人实现单点登录
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将登录令牌传递给聊天机器人实现单点登录EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将登录令牌传递给聊天机器人实现单点登录
EN