Copilot Studio bot can be embedded into SharePoint site, but without SSO configuration the usability is quite bad. Previous blog post described how to configure the app registrations and get values for this last step of creating SPFx solution which is installed into SharePoint. This solution adds button to selected SharePoint site. The button opens Copilot Studio bot and does the login functionality for the user, so usability is better and user does not need to jump between browser tabs copy-pasting codes.

Setting up environment

You need to install Node.js v18 (select v18 LTS) to get SPFx v1.10.0 installed with Power Shell command npm install @microsoft/generator-sharepoint@latest –global (click Windows button and type PowerShell).

SPFx installation in PowerShell
SPFx installation in PowerShell

Extract zip package to C\temp

Install VS Code. If you don’t like or understand Git, forget installing it. Just download the solution source codes and open it in VS Code by extracting the zip package to C:\temp (which is good place for all important codes – this is sarcasm, you you need to upload the changed source codes to your code repository) and VS Code file menu “Open folder”.

Create the solution

Change the values in file elements.xml as mentioned in GHI instructions. I used Python, need to install the extension and then Python from Windows Store. Then navigating in terminal to folder where .py-file is and running it. If you don’t understand, change the values manually as Option 2 states.

Create the package as GHI instruction states in step 5 by opening new Terminal, then with cd and cd.. command get to the correct folder SharePointSSOComponent

Open new terminal in VS Code and navigating to a folder
Open new terminal in VS Code and navigating to a folder

Then run below commands – you probably don’t have gulp installed and then execution policy not set for bypass to get the bundle command to work.

npm install
npm install gulp-cli --global
Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
gulp bundle --ship
gulp package-solution --ship

Now you have the solution package created, right click it and select Reveal in File Explorer to get the Windows Explorer open the location.

SharePoint solution package in VS Code
SharePoint solution package in VS Code

Do you want to change the package name or have multiple solution in same Microsoft tenant?

If you already have the pva-extension-sso.sppkg in your site, you need to change the GUIDs of the solution, feature and customAction. Use the CRTL + SHIFT + F command in VS Code to change all at once in your solution. Click the arror on the left to get the Replace window open. On the right side of it there is replace all button.

Find the solution id, create new guid (install this for getting new guids) and replace all old guids with the new one added in solution id (above id in below picture). The do the same for the below feature id (below id in below picture).

Replacing ids for solution and feature in SharePoint SSO package
Replacing ids for solution and feature in SharePoint SSO package

You need to do the same with the customAction id (below picture). Below picture also displays which all files I have changed in the solution.

Change customAction id for SharePoint SSO solution
Change customAction id for SharePoint SSO solution

Finally search all instances for pva-extension-sso and replace those with the package name you want to have. The same files have also attributes for solution name, description and other information. Please check the files and change the values you want to have.

Then rebuild the solution gulp package and ship, and then install it to your SharePoint admin.

NOTE

CRTL + SHIFT + F does not always find the guid for these files serve.json and PvaSsoApplicationCustomizer.manifest.json. The guid for CustomAction should be the same in these (check from the original solution files). If not, the SPFx solution does not work.