Summary

As you know the Power Virtual Agent (PVA) is a low-code and no-code solution. It is very easy to create a Bot quickly. Now, if you want this bot on the SharePoint page. There are a few options and their pros & cons.

In this article, I am going to list out all options. I will share the pros and cons of each option and share code where needed. This will help you guide your journey for a similar requirement.

Prerequisites

There are a few prerequisites, based on which option you pick you will need to get one or more of the following resources.

1. Power Platform Environment – Required for all options
2. SharePoint Online tenant – Required for all options
3. Visual Studio – Required for Options # 2
4. Azure Web App & Azure Front Door– Required for Options # 2
5. Visual Studio Code  – Required for Options # 3
6. SharePoint Framework Development (SPFx) Environment Setup – Required for Options # 3

Below are the three options:

Option # 1: Put embedded code from the bot on an IFRAME on the SharePoint page.

Pros:

• Easy and quick
• Easy to get embed code from the PVA Bot Channels.
• Easy step to add the IFRAME on the SharePoint page

Cons:

• The embed code has the code and the token is exposed as public for the content owner. If this code with url is leaked anyone from outside of the organization network can access the Bot. If this Bot is meant to be internal to organization then this option will not work.

Option # 2: Use DirectLine (DL) Secret and get DL Token from Azure Web Site URL for IFRAME on the SharePoint page.

Basically, in this approach, the IFRAME will be still used on the SharePoint page. But the URL for the IFRAME will be from the internally controlled Web Site URL which will be blocked from public access using IP restrictions. The internal website will be configured with the Direct Line Secret. The website will get the Direct Line Token for doing secured communication with the Bot.

Pros:

• The bot will NOT be accessed by the public. It will be restricted by the website for the internal IP range only. Even if the URL is leaked it will be blocked by the IP Restriction on the Azure Front Door.
• It used the Bot’s direct line Token as a protected communication mechanism.

Cons:

• Extra resources on Azure, i.e. Azure Web App with Azure Front Door.
• There will be code on the Azure Web App to create and maintain

Option # 3: Create an SPFx Application Customizer to put on the SharePoint page.

Pros:

• The bot will not be exposed to the public. The Direct Line Secret will be buried in the SPFx code & can not be seen

Cons:

• There is SPFx web part development and in future for maintenance (if needed).

Step By Step Solution:

Option # 1:

The following two steps will get your Bot on the SharePoint page quickly.

1. This is an easy solution. All you need to do is to get the embed code from the Bot. Follow here.
2. Once you get the code you add this to your SharePoint page. Follow here.

Option # 2:

This option will use Azure Web App and Azure Front Door. The Azure Front Door will allow to restriction of IP within the organization.

The Azure Web App is the ASP.NET Core solution. There are two components in the website, one is to UI and the other is API. The UI part is to show the Web Chat and API is to get the Direct Line Token from the Secret. The Direct Line Secret is stored in the configuration of the website or can be secured using a key vault.

TODO: Code to follow.

Option # 3:

The code for the SPFX Application Customizer is located here.

You will need to understand the SPFX customizer build and deployment. Please follow this article for more details on the topic.

# FEW TIPS

# You should create the SharePoint Site Collection App Catalog. The following PnP PowerShell Command will help you

# This is to install the PnP.PowerShell if you have not installed it before.
Install-Module -name PnP.PowerShell

# This line is to connect to your site
$conn = Connect-PnPOnline -url https://{YOUR TENANT-NAME}.sharepoint.com/sites/{YOUTSITE}/ -Interactive -ReturnConnection

# This is to enable the App Catalog for your site
Add-PnPSiteCollectionAppCatalog -Connection $conn

After you install the SPFX app you may want to change the value of the DirectLine or Bot name. The following command will be helpful.

# This line is to connect to your site
$conn = Connect-PnPOnline -url https://{YOUR TENANT-NAME}.sharepoint.com/sites/{YOUTSITE}/ -Interactive -ReturnConnection

# This will return the application customizer for the current site
Get-PnPApplicationCustomizer 

# To define the JSON object in the string. Notice the ` escape character
$props = "{`"BotName`":`"Bot by Pankaj`",`"DirectLineSecret`":`"blah blah`"}"

# To set the new bot name and Direct Line Code. 
# Note: the ClientSiteComponentId should be the same what you got in Get- above command.
Set-PnPApplicationCustomizer -ClientSideComponentId ae0298aa-8206-438c-8c7f-000ed5d8a5ae -Scope web -ClientSideComponentProperties  $props

FEW Command You should know for the SPFX

Node version:v14.15.0

# after you clone you should install node modules.
npm install

#To package the ship SPPKG file

gulp bundle --ship
gulp package-solution --ship

#To list the all gulp tasks

gulp --tasks

Conclusion

Based on the above article’s options and their pros and cons you will be able to decide what is right for your need. Option #1 is very easy and quick to Option # 3 to get modern ways to block the access.

Some helpful links for Bot development

https://aka.ms/pvaarchitectureseries

https://github.com/microsoft/PowerVirtualAgentsSamples

https://aka.ms/BotComposerSeries