Show the progress of your PnP Provisioning process with SharePoint Application customizer and SignalR
The blog post.
You should configure Azure Storage account prior running the sample. For local development use Azure Storage Explorer with below artifacts:
pnp-drone
- contains templates.xml
- PnP Provisioning XML file and folder assets
with required files. Template used in the demo is "Contoso Drone Landing"
The structure:
Create a queue with name pnp-provision
.
Create an Azure Table with name PnPDroneProvisioning
.
Azure logic app receives web url from custom SharePoint Site Design. Similar to the Calling Microsoft Flow from a site script, but Logic App instead of a Flow, because HTTP connector is premium.
-
Create a new Azure AD app registration, enable implicit flow, add
user_impersonation
scope via Expose an API -
Add API permissions -
SharePoint
-Sites.FullControl.All
,User.ReadWrite.All
-
This sample uses Azure AD authentication based on certificates in order to generate an access token for SharePoint. Alternatively, you can use SharePoint-registered app
-
Create a new certificate to generate and sign access token from webjob (PowerShell):
$cert = New-SelfSignedCertificate -Subject "CN=SPFxSignalR" -CertStoreLocation "Cert:\CurrentUser\My" -KeyExportPolicy Exportable -KeySpec Signature -NotAfter (Get-Date).AddYears(3) $bin = $cert.RawData $base64Value = [System.Convert]::ToBase64String($bin) $bin = $cert.GetCertHash() $base64Thumbprint = [System.Convert]::ToBase64String($bin) $keyid = [System.Guid]::NewGuid().ToString() $jsonObj = @{customKeyIdentifier=$base64Thumbprint;keyId=$keyid; type="AsymmetricX509Cert";usage="Verify";value=$base64Value} $keyCredentials=ConvertTo-Json @($jsonObj) | Out-File "keyCredentials.txt"
-
This command will create a file called
keyCredentials.txt
. Go to Azure App Registration, then selectManifest
and copy the content ofkeyCredentials.txt
tokeyCredentials
node. -
From your windows machine open Certificates snap-in, export private certificate
SPFxSignalR
from Personal certificates and add it into the solution (select "Copy always" in Visual Studio, so that this fille will be available under yourbin
output). You should protect the certificate with a password. The name of certificate iscert.pfx
. -
Under "Certificates & secrets" in Azure portal generate a new Client Secret.
-
Take a note on your App display name, App (Client) ID, Client Secret.
-
Right click on a project -> Manage user secrets. Add below user secrets:
{ "AzureAd:Instance": "https://login.microsoftonline.com/", "AzureAd:TenantId": "<your tenant id>", "AzureAd:ClientId": "<client id from step #2>", "AzureWebJobsDashboard": "UseDevelopmentStorage=true" }
Azure WebJob relies on some configuration settings, which should be provided via Environment variables. Edit your system environmental variables and add below variables:
SignalrHostUrl
- the host url part of your SignalR hub, i.e. https://localhost:44341AzureAd:ClientId
- Client Id from step#2
AzureAd:ClientSecret
- Client Secret from step#2
AzureAd:TenantId
- Your Tenant IdCertificatePassword
- password from.pfx
certificate generated at step#2
- Open
pnp-notifier\config\package-solution.json
and underwebApiPermissionRequests
change resource name to match the display name from step#2
- Open
pnp-notifier\src\extensions\consts.ts
and updatecientId
with one from step#2
,cloudHubUrl
should point to your Azure Web app url (when deployed). - Package solution, upload to App Catalog, approve Permission Request like described in the Manage permission requests
Under PS\siteScript sample.ps1
change url
to point to your Logic app trigger url. Add site design to your tenant using SP Online Management Shell.
Run gulp serve
in SPFx folder (you need to change serveConfigurations
under pnp-notifier\config\serve.json
to match your tenant).
Run WebJob locally, run SignalR web application, add a new message into the pnp-provision
queue in format:
{
"WebUrl": "https://<your org>.sharepoint.com/sites/drone-12"
}
Queue will trigger your web job, the job will send notification to your SharePoint web site through the SignalR hub.
-
Create a new Azure Web app.
-
Deploy SignalR hub into the Azure Web app.
-
Deploy WebJob to the same Azure Web app (AlwaysOn should be
true
). -
On the Web app, add below App settings:
AzureAd:ClientId
- Client Id of app registration on step#2
AzureAd:Instance
-https://login.microsoftonline.com/
AzureAd:TenantId
- your tenant idAzureWebJobsDashboard
- Azure storage connection stringAzureWebJobsEnv
-Production
CertificatePassword
- password from.pfx
certificate generated at step#2
SignalrHostUrl
- the host url part of your SignalR hub, i.e.https://spfx-signalr-demo.azurewebsites.net