如何解决如何在网页上使用Power Virtual Agent实现SSO
我正在通过在组织Sharepoint网站上发布聊天机器人来尝试在Power Virtual Agent中实现SSO，并且我正在使用以下代码。仅当我单击代码中的登录按钮时，SSO才起作用；相反，当我仅单击Power Virtual Agent按钮时，如果出现聊天机器人屏幕，我希望它可以直接起作用，因为我已经登录到共享点网页，所以我想避免使用登录按钮。谁能帮我这个忙。
When i just click on the Power Virtual Agent button i see this
When i click on the login button and then click on the Power Virtual Agent button i see this
<!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>
<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;
}
.span
{
font-weight: bold;
}
#myBtn
{
outline: none;
width:120px;
margin:auto auto auto 10px;
}
button:hover
{
background-color: transparent;
}
</style>
</head>
<body>
<button id="myBtn" type="button">Power Virtual Agent</button>
<button id="login" name="login" onclick="onSignInClick()">Log In</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="logo.png" width="42" height="30" alt="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 onSignin(idToken) {
let user = clientApplication.getAccount();
document.getElementById("userName").innerHTML = "Currently logged in as " + user.name;
debugger;
let requestObj1 = {
scopes: ["user.read",'openid','profile']
};
}
function onSignInClick() {
let requestObj = {
scopes: ["user.read",'profile']
};
clientApplication.loginPopup(requestObj).then(onSignin).catch(function (error) { console.log(error) });
}
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) {
throw new Error(`Failed to fetch JSON due to ${res.status}`);
}
return await res.json();
}
</script>
<script>
const styleOptions = {
botAvatarInitials: 'BT',userAvatarInitials: 'UR',accent: '#00809d',botAvatarBackgroundColor: "#FFFFFF",userAvatarBackgroundColor:"#FFFFFF",hideUploadButton: true,};
var clientApplication;
(function () {
var msalConfig = {
auth: {
clientId: 'ABC',authority: 'https://login.microsoftonline.com/XYZ'
},cache: {
cacheLocation: 'localStorage',storeAuthStateInCookie: false
}
};
if (!clientApplication) {
clientApplication = new Msal.UserAgentApplication(msalConfig);
}
}());
(async function main() {
// Add your BOT ID below
var BOT_ID = "RAM";
var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
var userId = clientApplication.account?.accountIdentifier != null ?
("You-customized-prefix" + clientApplication.account.accountIdentifier).substr(0,64)
: (Math.random().toString() + Date.now().toString()).substr(0,64);
const { token } = await fetchJSON(theURL);
const directLine = window.WebChat.createDirectLine({ token });
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 => {
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);
});
window.WebChat.renderWebChat(
{
directLine: directLine,store,userID: userId,styleOptions
},document.getElementById('webchat')
);
})().catch(err => console.error("An error occurred: " + err));
</script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。