Microsoft 365 Community SharePoint, 3 Dec 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a secure SPFx web part or extension to host a bot in modern portals

Description

In this 19-minute Developer - focused demo, Qiong Wu delivers practical examples of how SPFx client-side web parts and extensions that leverage the Microsoft Bot Framework can be used to integrate Bots in SharePoint today. The web part sample embeds the bot by using webchat – a highly customizable web-based client for a bot. Security options presented. Use the application customizer to position a bot extension on a web page. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on December 3, 2020.

Demo Presenter: Qiong Wu (Microsoft)

Supporting materials:
• Website – Microsoft Bot Framework | https://dev.botframework.com/
• Web parts Repo - SharePoint web part sample with bot framework - Secure | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-bot-framework-secure
• Web parts Repo - SharePoint webpart sample with SSO | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-bot-framework-sso
• Extensions Repo - SharePoint extension sample with bot framework | https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-bot-framework-secure
• Extensions Repo - Sharepoint extension sample with SSO | https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-bot-framework-sso

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hi everyone, I'm chung from buffingwork team, and today I'm going to show two new demos for how to integrate bot to sharepoint.

A

These samples are built by microsoft, buffering work, team and stephen, who is an moep and before I start, as you are all very familiar with sharepoint related technology, I'd like to introduce a little bit about buffing work. The buffing work is a microsoft framework for building enterprise grade conversational ai experience.

A

You can check this website for more information and you can easily build a bot with the bathroom work tool if you want to add a bot like a q, a bug to your sharepoint site. You can reference the sample edit here this too, and the one for better security consideration and the one for single scion and the reason why we are doing this. The first consideration is one microsoft and the button sharepoint sites are growing more and more popular.

A

The sharepoint and buffering work are both microsoft production. We will make sure they are easy to work together and well to use. Currently, we have some community samples about how to integrate about to sharepoint by stefan and some other people, but they have some pinpoint like a lack of security, consideration and no sample for single side on so based on this situation, we will provide one simple sample with basic security consideration and one complex sample with single cell on feature to improve the user experience on authentication.

A

We will target on two popular components in sharepoint the web chart and the extension. Let me demo the first sample with security consideration.

A

This site is a contoso sharepoint site, because we will need the mean privilege for the single sign-on, so I create a test account from contoso.

A

You can also do this if you want to test with the mean privilege- and here if I edit this page- and you can find this one. This is a new web part with security, and you can put the bot and the point here saved.

A

Okay, okay, you can see the bot has been connected.

A

So let me talk uh something behind that simple, the first stuff we add for integrate the bot to sharepoint site. We we need to use web chat, which is a highly customizable web-based client for bot to use web chat. We need to provide a secret to connect to direct line channel.

A

You can find that settings here in your bot. Registration in azure shows in channels here, and you can see the secret keys.

A

It is uh the mean keys, which means you can use this key to connect to any conversation you like, and if you want to make sure your box work easily, you can add the the direct line secret in your client and make it work quickly, but it's it is not secured.

A

So actually, we should put the secret to another service like bus service and use user id to retrieve a user token from direct line and use that token to continue the conversation which will be more secure and the second part is the temper-proof user.

A

We need to enable this feature to ensure that all sports should be in the same blocks as a bot. For example, an attacker start. A conversation with a bot to get a sign-in link, the attacker sends the sign link to someone else and tell him or her to click the link when the person does he or she will be asked to sign in to the conversation. But the concession is actually the attacker's conversation to prevent this. We will need to enable this feature.

B

A

Is this can be very simple to just enable this option in our channel setting, so do remember to set it up when you set your bot in sharepoint and let's go through some highlighted code. For this feature, the for example, we go to the web part sample and first we will go to the web parts code, and here you can see. This is a web chat component, which is a react component, and here you can see you can get the user login name and send it to the bot to get a direct line token.

A

This should be encrypted by md5 or some other encrypt algorithm, because if the username is guessable, it is easy for attackers to get other users direct line token by the guest name and the request to bus service.

A

So do please do remember to encrypt that and for the token retrieve you can see it sent to the bot to retrieve your token and you can check the code here.

A

Here is a board code and here is the bus service and it used the start, direct line secret and the user id to retrieve a user token from direct line and get it back to the web part, and here it is, and with the token we will now set up the direct line component and continue the conversation with the bot.

A

Now, let's move to another demo, which is a single scion demo, as we are already login to sharepoint site, it is hard to log in again in our bot, for example, if we try to log in with the simple but and it will prompt you again with the authentication os card, which is not that friendly. So we will try our new sso web part here and also do the similar thing copy. The bot endpoint.

A

A

A

Yeah now the bot is connected and if you trying to login again and and you will find a toast- is pumped out, if you click yes and it will use your sharepoint user account to log into bots there, you can see it's much easier for user and if user don't like this way, it can also fall back to the traditional way. For example,.

A

And press no- and here is a traditional way. You can see this one takes more time and more complex for user to use.

A

Now it can work too, and this is a web part sample and you can see similar stuff in extension. So you can add this small bot icon to replace this one. It's it's also convenience too, and the the main concepts of single science uh show as low when user login to parent website and it's get loss trigger activity it will uh send to bot and bot will return an oscar, but instead of show the oscars.

A

The web chat will will get the this message and ask the parent website for exchangeable token and the when it gets token, it will send the token to the bot and the bot will exchange the token to azure board service, and if it is successful, the box will be authenticated and no cards will be shown anymore and is failed. The card will be prompted again and the api we use to get. The exchangeable token is the ad token provider, and here is the sample structure.

A

It's used to toast here for the single cyan and the traditional and uh yeah after it's got a token, just give it to direct line and it can communicate with the bot and uh you can check the sample readme for the whole settings. You can see it's very long list, it's kind of complex and but the key part is. We need to expose an api in our ad.

C

A

And add a customer scope and also add uh authorized client application, which is our sharepoint principle here and after we do that we will put our app name and scope name here and approve the api access in our admin center. After we've done this, we will get the token from sharepoint site and let's also check the code for some highlighted part, and here.

A

Yes, this is a single cyan sample and the, and we also start from this one- and you see we- we also use the web chart.

A

We react component and we add additional two parts which is host middleware and a stall as though this tool is a web chart api to help us support this scenario and the story is used to get the ost activity and try to get the exchangeable token from sharepoint site and when it gets the last activity, it will change it to a notification named cyan and when the sign notification has been captured by the toaster middleware, it will go to the bar sign toast.

A

We can check it here and when you click the agree button, it will get token from ad provider and with that token, we will generate a new activity to bot. With this exchangeable token, and then we will wait for the boss response to tell us whether it is success or fail, and if it's filled it will go to the it will fall back to traditional but authentication, which we can check it here and it will perform the card action to show the card again.

A

And here is the basically the highlighted part of the code.

A

And the the additional information you may interested is: if you need a domain account, and you don't have one, you can have a test account here and the first time the user tries single, sound user should be present with an oscar to log in this is because the user have not yet give the content to the boss aad app. You can use the main concentrate to prevent that.

A

If you don't like that, and also there is a sdk pack which is js only that's the first time most card cannot show correctly, and if you meet this problem, you can try the traditional login first. This only have to be to.

A

Demo, uh you have any questions or.

B

Yeah, queen uh vessel here any chance we can go back on the powerpoint. uh Sorry on the on the sharepoint site, uh there was a good question, alex say, related on the hovering bot on the left side, because I know that you implemented that as well. The web part is one thing, but then there's that one? Yes, okay, can you can you explain what it is and how is it working?

B

Because I think that's really cool as well, because in the same way as we can implement web parts, we can do it in here as well.

A

Yes, this is a sharepoint extension yeah you can, you can see it's a in another ripple, which is a extension ripple.

B

Sorry for putting on a spot, but you can easily find it.

A

And if you are interested, you can find it here this one, the sso and for the code. It's kind of similar. The highlight part is kind of similar and it is leverage the extension framework to help build the little bot icon.

A

A

Yes, for uh the code is basically like this, so is there uh any specific functions to about.

B

This, I think it was more a question. Can you again sorry queen and there's the.

A

B

Pop-Up application customizer, so one folder up um one folder up from and the ds one folder still up. We have the two files we have the json file and then the typescript file, the bot framework chat, pop-up application, customizer five files down or six flaps down.

B

We are still more down more down down down down, still more down still more than one more that one. So this just to kind of a pinpoint. Sorry sorry for guiding you in here just to kind of point in here that this is a application customizer for sharepoint framework and then it's using, I think, it's using absolute positioning that it's actually putting the the image hovering on the page and then, when you click a hover, you basically render the react component. Is that correct.

A

B

Okay, so so it's just clarifying how it's implemented, because there's sharepoint developers on the chat and window can we go one more time on the browser and just show how it's actually presented in a browser, because I think that's that's really cool. Obviously the web part is is really cool. Technically, the bot implementation is exactly the same in both sides.

C

B

Taking advantage of the application customizer, we can then position a bot, for example, in this way on the lower left, corner or yeah.

A

That's a lower.

B

Right corner and then we're gonna.

A

Click it yeah. I like this way better than this one yeah.

B

Yes and and maybe who knows uh because I'm from sharepoint engineering who knows maybe at some point we'll- have a native way of exposing bots in the sharepoint site, but right now, that's not in the short-term uh pipeline or roadmap, and so this would be a way of getting. Then the the corporate bots exposed in a portal so really cool implementation. Absolutely.

A

Yeah, thank you.

C

But that was a great demo. uh Thank you really excited to see. The bot stuff, bot stuff continues to grow and expand, and uh some of the use cases people find for that are really really interesting, really fascinating, stuff. So a great area and if you're not looking at bots as part of your solutions as appropriate, they could be a great part of your.

A