如何解决如何将登录令牌传递给聊天机器人以实现单点登录
我需要将登录令牌传递给聊天机器人，以便单点登录 (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); /* Fallback color */
background-color: rgba(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">×</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>解决方法
提供的代码通过用户登录的令牌。您可能没有正确设置应用注册。
在设置应用程序时，我错过了向客户端应用程序添加范围的步骤
chrome 中的检查面板帮助我确定存在问题
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
