Hi,
I have been trying to configure SSO on our organization SharePoint website using PVA. But I don't see it to be working. I have been referring to the below URLs:
SSO doc
GitHub Sample code doc
I have created a HTML file adding the SSO code provided from the above doc and published in the SharePoint website. I do not wish to see the login sign in card which asks to pass the token rather I need to Sign-in directly once I click the Chatbot button.
I have also posted regarding the same in the past as well. But no luck. Any help is much appreciated.
Regards,
Hemanth
Solved! Go to Solution.
I have deployed my bot at SharePoint home.aspx page. can you please guide me where and how to add the SSO custom HTML code
Hello @neeraja - I have some issues with my id and hence could not login. Can you share more details on what is the exact issue. You just need to add the html code for chat and pass the user id obtained using MSAL.js. This way the user will not be prompted for login as part of the boht
Yeah, correct. I want to achieve the Single sign on when i deploy my power virtual agent chatbot on sharepoint home page.
i have deployed my chatbot at sharepoint home page using embed option and add the iframe content which i got it from Power virtual agent publish options
Now my question is Where to add that HTML content, also at embed panel at sharepoint edit page option? please confirm..
The iframe option will always prompt the user to login but does not require any HTML code. the HTML code is needed when you want to have your custom chatbot page and customize the bot. Also for the bot to work on other web sites, you have to configure AAD as defined in the PVA portal.
Add a chatbot to mobile and web apps - Power Virtual Agents | Microsoft Docs
Customize the web chat canvas - Power Virtual Agents | Microsoft Docs
So when i embed chatbot on sharepoint page or any internet page it will ask us to prompt always. this is what you are saying right?
Then how can we achieve sso in this scenario..
My requirement is i need to deploy the power virtual agent on sharepoint home page and when user say hi at chatbot.. it should recognize user without asking for login propmt as we alr logged into sharepoint website.
How can we achieve this scenario? please guide me
Hi @neeraja
The code in the document provided by Microsoft need lots of customization to be done before we deploy on to the SharePoint website.
Follow the below steps:
1. Select the Authentication option on the Microsoft Power Virtual Agent and select Azure Active Directory v2.
2. Check with the Azure team and get the required details as per the below snapshot the doc to configure SSO to your bot using Azure should help the Azure team do the configurations.
URL: https://docs.microsoft.com/en-us/power-virtual-agents/configure-sso
3. Try customization your bot look and feel by editing your code on the Microsoft Visual Code or any Code editor and run the .html file on Chrome or any latest web browsers and try to customize accordingly.
4. Try accessing your bot through a button/image i.e. place a button/image in the code which helps to pop-up the chat bot window when clicked on it.
5. Once you are done with your customization touch base with your SharePoint team and check with them on how to deploy your bot code file on to the SharePoint website and align your bot button/image accordingly.
Below is the code that I am using.
<!DOCTYPE html>
<html>
<head>
<title>Virtual Agent</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<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: absolute; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 80px; /* 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:transparent; /* Black w/ opacity */
}
.modal-content {
width: 500px;
float:right;
/*padding-top: 10px;*/
margin-right: 180px;
border-radius: 15px;
}
.close {
color: black;
float: right;
font-size: 28px;
font-weight: bold;
margin-right: 10px;
}
.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: 600px;
width: 100%;
top: 60px;
overflow: hidden;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
#heading {
margin-top: 10px;
margin-left: 12px;
margin-bottom: 8px;
width:50%;
text-align:left;
/*Newly added style*/
padding-bottom: 12px;
padding-top: 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 10px;
}
#login {
position: fixed;
margin-left: 150px;
}
.span {
font-weight: bold;
}
#myBtn {
float: right;
outline: none;
width: 95px;
margin-top: 200px;
margin-right: 20px;
}
button:hover {
background-color: transparent;
}
.logo{
/* float: left;
width: 60px;
height: 60px; */
float: left;
width:150px;
height: 30px;
}
.main{
margin-top: 10px;
margin-bottom: 12px;
}
</style>
</head>
<body>
<!--Button and ChatBot View-->
<!--<button id="myBtn" type="button">Power Virtual Agent</button>-->
<img id="myBtn" alt="image" src="<Add image url>">
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content" style="background-color: yellow">
<span class="close">×</span>
<div id="chatwindow">
<div id="heading">
<img class="logo" src="<Add image url>" alt="logo"/>
<h1 style="color:black">Virtual Agent</h1>
</div>
<div id="webchat"></div>
</div>
</div>
</div>
<!--Button code begins here-->
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
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
console.log("Got the token exchange with AAD: " + activity.attachments[0].content.tokenExchangeResource.uri);
return activity.attachments[0].content.tokenExchangeResource.uri;
}
}
function exchangeTokenAsync(resourceUri)
{
let user = clientApplication.getAccount();
let requestObj = {
scopes: [resourceUri],
};
return clientApplication.acquireTokenSilent(requestObj).then(function (tokenResponse) {
return tokenResponse.accessToken;
}).catch(function (error)
{
console.log("Error from exchangeTokenAsync function" + error);
});
}
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();
}
function authRedirectCallBack(error, response)
{
//Do Nothing Here since we don't come back to this page.
}
</script>
<script>
var clientApplication;
(function () {
var msalConfig = {
auth:
{
clientId:'<Add Client ID>',
authority:'https://login.microsoftonline.com/<Add Directory ID>',
redirectUri:"<Add SharePoint url where your bot is deployed>",
navigateToLoginRequestUrl: false
},
cache:
{
cacheLocation: 'localStorage',
storeAuthStateInCookie: false,
}
};
if (!clientApplication)
{
clientApplication = new Msal.UserAgentApplication(msalConfig);
clientApplication.handleRedirectCallback(authRedirectCallBack);
}
var newRequest = {
scopes: ["user.read", 'openid', 'profile'],
}
clientApplication.acquireTokenSilent(newRequest).then(function(response)
{
//Now get the user display name
let user = clientApplication.getAccount();
}).catch(function (error)
{
$('#divPopup').modal({backdrop: 'static',keyboard: false});
setTimeout(function()
{
//Now redirect to URI so that token will be created
clientApplication.loginRedirect(newRequest);
}, 2000);
});
})();
(async function main() {
// Add your BOT ID below
var BOT_ID = "<Add your Bot ID>";
var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
var userId = (clientApplication.account != null && clientApplication.account.accountIdentifier != null) ? clientApplication.account.accountIdentifier: (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) => {
//console.log("id: " + id);
if (id === "retry")
{
return next(action);
}
},
(error) => {
return next(action);
}
);
return;
}
else return next(action);
});
}
else return next(action);
}
else return next(action);
}
);
const styleOptions = {
backgroundColor: '#F8F8F8',
botAvatarInitials: "BT",
userAvatarInitials: "UR",
botAvatarBackgroundColor: "#FFFFFF",
userAvatarBackgroundColor: "#FFFFFF",
botAvatarImage:"<Add image url>",
userAvatarImage:"<Add image url>",
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>
Let me know if you need any help.
Hi Hemanth,
I have followed the steps given by you and saved your code in one file and names it with travenq.html. So when i browse it is asking me to key in my microsoft credentials. once I keyed in it is redirecting me to sharepoint landing page which i have given at redirect UI option at azure app registration.
I can't see button outlook at browser if i just browse also.. it is simply redirecting me to sharepoint landing page.
and i can't see my chatbot..
Redirect uri i am using here is sharepoint home page.. is that correct?
Feel still something is missing!. can you help me..
@neeraja - The code creates a new session using MSAL and uses that to send message via the bot. To make the user experience better, always provide the same page on which you added the javascript as the redirection page so that it will redirect back to this page. The redirect uri should not be any other page. Hope this helps.
Hi,
If I see the redirect uri from this url.. it clearly says the URL where our chat canvas is hosted. I understand my chat canvas is hosted at sharepoint home page, so i have given that. The code hemanth sent to me shows also same..
redirectUri:"<Add SharePoint url where your bot is deployed>",
Let me know if it is wrong?
I have other question regarding this
4. Try accessing your bot through a button/image i.e. place a button/image in the code which helps to pop-up the chat bot window when clicked on it. - This one need to write extra code other than what you have given?
pls advise.
Hi,
Let me provide the steps i have followed for this SSO configuration
1. I have created chat bot and then by using that bot ID i have created custom canvas using HTML page then hosted that in azure web app
2. created app registration for this canvas azure web app and the redirect URL I have given here is Token URL
https://token.botframework.com/.auth/web/redirect
3. Created another app registration say bot app and the redirect URL I used here is custom canvas web app and added custom canvas app client info in this app.
4. then finally added bot app client ID and details at power virtual agent chat bot.
5. then added custom HTML code given at Microsoft article in the custom canvas HTML page.
Then I try to run the page.. it shows me below error
Sorry, but we’re having trouble signing you in.
AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application: '6c43d77b-e66e-446c-b334-36fe23d73be1'.
can anyone pls help me to get solved this error?
Are you attending the Microsoft Power Platform Conference 2023 in Las Vegas? If so, we invite you to join us for the MPPC's Got Power Talent Show! Our talent show is more than a show—it's a grand celebration of connection, inspiration, and shared journeys. Through stories, skills, and collective experiences, we come together to uplift, inspire, and revel in the magic of our community's diverse talents. This year, our talent event promises to be an unforgettable experience, echoing louder and brighter than anything you've seen before. We're casting a wider net with three captivating categories: Demo Technical Solutions: Show us your Power Platform innovations, be it apps, flows, chatbots, websites or dashboards... Storytelling: Share tales of your journey with Power Platform. Hidden Talents: Unveil your creative side—be it dancing, singing, rapping, poetry, or comedy. Let your talent shine! Got That Special Spark? A Story That Demands to Be Heard? Your moment is now! Sign up to Showcase Your Brilliance: https://aka.ms/MPPCGotPowerSignUp Deadline for submissions: Thursday, Sept 28th How It Works: Submit this form to sign up: https://aka.ms/MPPCGotPowerSignUp We'll contact you if you're selected. Get ready to be onstage! The Spotlight is Yours: Each participant has 3-5 minutes to shine, with insightful commentary from our panel of judges. We’re not just giving you a stage; we’re handing you the platform to make your mark. Be the Story We Tell: Your talents and narratives will not just entertain but inspire, serving as the bedrock for our community’s future stories and successes. Celebration, Surprises, and Connections: As the curtain falls, the excitement continues! Await surprise awards and seize the chance to mingle with industry experts, Microsoft Power Platform leaders, and community luminaries. It's not just a show; it's an opportunity to forge connections and celebrate shared successes. Event Details: Date and Time: Wed Oct 4th, 6:30-9:00PM Location: MPPC23 at the MGM Grand, Las Vegas, NV, USA
As the sun sets on the #SummerofSolutions Challenge, it's time to reflect and celebrate! The journey we embarked upon together was not just about providing answers – it was about fostering a sense of community, encouraging collaboration, and unlocking the true potential of the Power Platform tools. From the initial announcement to the final week's push, the Summer of Solutions Challenge has been a whirlwind of engagement and growth. It was a call to action for every member of our Power Platform community, urging them to contribute their expertise, engage in discussions, and elevate collective knowledge across the community as part of the low-code revolution. Reflecting on the Impact As the challenge ends, it's essential to reflect on the impact it’s had across our Power Platform communities: Community Resilience: The challenge demonstrated the resilience of our community. Despite geographical distances and diverse backgrounds, we came together to contribute, learn, and collaborate. This resilience is the cornerstone of our collective strength.Diverse Expertise: The solutions shared during the challenge underscore the incredible expertise within our community. From intricate technical insights to creative problem-solving, our members showcased their diverse skill sets, enhancing our community's depth.Shared Learning: Solutions spurred shared learning. They provided opportunities for members to grasp new concepts, expand their horizons, and uncover the Power Platform tools' untapped potential. This learning ripple effect will continue to shape our growth. Empowerment: Solutions empowered community members. They validated their knowledge, boosted their confidence, and highlighted their contributions. Each solution shared was a step towards personal and communal empowerment. We are proud and thankful as we conclude the Summer of Solutions Challenge. The challenge showed the potential of teamwork, the benefit of knowledge-sharing, and the resilience of our Power Platform community. The solutions offered by each member are more than just answers; they are the expression of our shared commitment to innovation, growth, and progress! Drum roll, Please... And now, without further ado, it's time to announce the winners who have risen above the rest in the Summer of Solutions Challenge! These are the top community users and Super Users who have not only earned recognition but have become beacons of inspiration for us all. Power Apps Community: Community User Winner: @SpongYe Super User Winner: Pending Acceptance Power Automate Community: Community User Winner: @trice602 Super User Winner: @Expiscornovus Power Virtual Agents Community: Community User Winner: Pending AcceptanceSuper User: Pending Acceptance Power Pages Community: Community User Winner: @OOlashyn Super User Winner: @ChristianAbata We are also pleased to announced two additional tickets that we are awarding to the Overall Top Solution providers in the following communities: Power Apps: @LaurensM Power Automate: @ManishSolanki Thank you for making this challenge a resounding success. Your participation has reaffirmed the strength of our community and the boundless potential that lies within each of us. Let's keep the spirit of collaboration alive as we continue on this incredible journey in Power Platform together.Winners, we will see you in Vegas! Every other amazing solutions superstar, we will see you in the Community!Congratulations, everyone!
Ayonija Shatakshi, a seasoned senior consultant at Improving, Ohio, is a passionate advocate for M365, SharePoint, Power Platform, and Azure, recognizing how they synergize to deliver top-notch solutions. Recently, we asked Ayonija to share her journey as a user group leader, shedding light on her motivations and the benefits she's reaped from her community involvement. Ayonija embarked on her role as a user group leader in December 2022, driven by a desire to explore how the community leveraged various Power Platform components. When she couldn't find a suitable local group, she decided to create one herself! Speaking about the impact of the community on her professional and personal growth, Ayonija says, "It's fascinating to witness how everyone navigates the world of Power Platform, dealing with license constraints and keeping up with new features. There's so much to learn from their experiences. Her favorite aspect of being a user group leader is the opportunity to network and engage in face-to-face discussions with fellow enthusiasts, fostering deeper connections within the community. Offering advice to budding user group leaders, Ayonija emphasized the importance of communication and consistency, two pillars that sustain any successful community initiative. When asked why she encourages others to become user group leaders, Ayonija said, "Being part of a user group is one of the best ways to connect with experienced professionals in the same field and glean knowledge from them. If there isn't a local group, consider starting one; you'll soon find like-minded individuals." Her highlight from the past year as a user group leader was witnessing consistent growth within the group, a testament to the thriving community she has nurtured. Advocating for user group participation, Ayonija stated, "It's the fastest route to learning from the community, gaining insights, and staying updated on industry trends." Check out her group: Cleveland Power Platform User Group
Hear from Corporate Vice President for Microsoft Business Applications & Platform, Charles Lamanna, as he looks ahead to the second annual Microsoft Power Platform Conference from October 3rd-5th 2023 at the MGM Grand in Las Vegas.Have you got your tickets yet? Register today at www.powerplatformconf.com
Hack Together: The Power Platform AI Global Hack Are you ready to unleash your creativity and build amazing solutions with Microsoft Power Platform and AI? If so, join us for Hack Together: Power Platform AI Global Hack, a virtual event where you can learn, experiment, and hack together with the new Copilot and AI features in the Power Platform. Check out the new forum today in Power Apps: Hack Together: Power Platform AI Global Hack What is Hack Together? Hack Together is a global online hackathon running September 14th to 28th, 2023. It’s open to anyone who wants to explore the possibilities of using AI in the Power Platform. Whether you are a beginner, advanced maker, admin, or a professional developer – all are welcome! You can join solo or hack together as a team of up to 3 people. The goal of Hack Together is to build solutions in Power Platform that leverage 1 or more Copilot and AI features. You can use any of the AI features available in Power Apps, Power Automate, Power Virtual Agents, Power Pages and AI Builder, such as: Power Apps Copilot: Create apps faster and easier by generating app components based on natural language inputs.Power Automate Copilot: Create flows faster and easier by generating flow steps based on natural language inputs.Power Virtual Agents Copilot: Create bot topics with natural language and connect your bot to your websites to pull answers with GPT.Power Pages Copilot: Leverage AI to create business grade websites and write content for your websites with GPT.AI Builder Create Text with GPT model: Generate text content based on natural language inputs, powered by Azure OpenAI Service.AI Builder Form Processing: Extract data from forms and documents with AI. How to participate To participate in Hack Together, you need to register for the event at https://aka.ms/hacktogether/powerplatform-ai/register.You will also need to have access to a Microsoft 365 account with a Power Platform license. If you don’t have one, you can see how to get one here.Once you have registered and have access to the Power Platform, you can start building your solution! We’ve created a Learn Collection to help you get started: https://aka.ms/hacktogether/powerplatform-ai/learnYou can also join the Hack Together community here to ask questions, share ideas, and get feedback from Microsoft experts and other participants. Drop a comment in the forum and introduce yourself so you can get to know your fellow hackers!You can submit your solution any time before September 28th, 2023 at 11:59 PM PST. You'll need to provide a short video demo of your solution, a brief description of the problem statement, the solution overview, and the AI features used. You can submit your solution here. Looking for more info about the event? Check out our site for all the details: https://aka.ms/hacktogether/powerplatform-ai What are the prizes? The best solutions will be selected by a panel of judges based on the following criteria: Innovation: How original and creative is the solution?Impact: How well does the solution address a real-world problem or opportunity?Usability: How easy and intuitive is the solution to use?Technical Quality: How well does the solution leverage the AI features in the Power Platform? Prizes will be awarded by the Power Platform Advocacy team. Join the fun! Are you ready to hack? You will learn new skills, meet new people, and have fun along the way. We’ll have livestreams every week for you to learn more about the Power Platform and all the Copilot and AI features. We have a great lineup of Microsoft executives like Ryan Cunningham, VP of Power Apps and Stephen Siciliano, VP of Power Automate as well as our Power Platform Advocacy team and MVP’s that are ready to help you get up to speed so you can start hacking! So, what are you waiting for? Register now and start hacking! We can’t wait to see what you create!
We wanted to take the time to celebrate and welcome the new user groups that have joined our community. Along with that take a look at the event that might be happening near you or virtually. Please welcome: Biz Apps Community User Group - Power Platform Community (microsoft.com) This user group is dedicated for all community members of all skill levels to learn how to get the most out of their community experience. East Michigan Power Platform User Group - Power Platform Community (microsoft.com) This is hopefully the beginning of a community, covering eastern Michigan, built around the Power Platform. Biz Apps Community User Group This user group is dedicated for all community members of all skill levels to learn how to get the most out of their community experience. Events to checkout: In-Person: September 2023 Hybrid Philadelphia Dynamics 365 & Power Platform User Group MeetDynamics 365 and Power Platform Physical Meetup Hyderabad Power Platform User Group Meetup - Sept 2023 (In-Person)Manchester September 2023 In Person Meeting Virtual: Everything Dataverse, Do you know that Dataverse is more than just a Database!POWER PLATFORM MONTHLY DIGEST- SEPTEMBERBaltic Summit 2023PL-900 Power Platform Fundamentals TrainingHR and L&D transformation through Power PlatformDynamics 365 Marketing Experience User Groups - Use Cases and NetworkingPower Platform and Dual Write from Dynamics 365 F&O PerspectiveANZ D365 FinOps Team September 2023 meetup
User | Count |
---|---|
4 | |
4 | |
3 | |
3 | |
3 |
User | Count |
---|---|
9 | |
8 | |
6 | |
5 | |
4 |