如何解决Msal.UserAgentApplication 有什么作用？
我不明白下面的代码是如何工作的。
我正在尝试在我的聊天机器人上实现 SSO。我已将我的聊天机器人发布到 SharePoint 网页。
我总是收到以下错误。
webchat.js:2 POST https://directline.botframework.com/v3/directline/conversations/6UVeVhpxJrBJWlNYdn0uEo-o/activities 502
任何人都可以帮助我使用以下代码。我无法弄清楚出了什么问题。
<!DOCTYPE html>
<html>
<head>
<title>Contoso Sample Web Chat</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.msauth.net/lib/1.2.0/js/msal.js' type='text/javascript' %3E%3C/script%3E"));
</script>
</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">
<div class="modal-content" style="background-color: #ffd933">
<span class="close">×</span>
<div id="chatwindow">
<div id="heading">
<div><span>SSO Test Bot</span></div>
</div>
<div id="webchat"></div>
</div>
</div>
</div>
<script>
//***Button code begins here***
// 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";
}
};
//***Button code ends here***
</script>
<script>
//**************** All functions are in this block **********************
function onSignin(idToken)
{
alert("KMT - Inside onSignin: " + idToken);
let user = clientApplication.getAccount();
alert("KMT - user.name: " + user.name);
document.getElementById("userName").innerHTML = "Currently logged in as " + user.name;
let requestObj1 = {
scopes: ["user.read",'openid','profile']
};
}
function onSignInClick()
{
//console.log("Inside 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();
}
//**************** All functions are in this block **********************
</script>
<script>
console.log('Inside MSAL function');
var clientApplication;
(function ()
{
var msalConfig = {
auth:{
clientId: '<Have removed the client ID>',authority: 'https://login.microsoftonline.com/<Have removed the Diectory ID>'
},cache:{
cacheLocation: 'localStorage',storeAuthStateInCookie: true
}};
if (!clientApplication)
{
clientApplication = new Msal.UserAgentApplication(msalConfig);
}
} ());
(async function main() {
// Add your BOT ID below
var BOT_ID = "<Have removed the BOT ID>";
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);
//console.log("Token inside main: " + JSON.parse(token));
const directLine = window.WebChat.createDirectLine({ token });
//console.log("directLine inside main: " + directLine);
const store = WebChat.createStore({},({ dispatch }) => next => action => {const { type } = action;
//console.log("store inside main: " + JSON.parse(store));
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)
{
//console.log("Inside if token: " + 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);
});
const styleOptions = {
// Add styleOptions to customize Web Chat canvas
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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
