Added telemetry image, adjusted installation instructions, corrected a typo, and added missing properties.
This commit is contained in:
Laura Kokkarinen
parent
4693934811
commit
be833e871f
|
|
@ -37,44 +37,6 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
|
|||
|
||||
## Configure Azure Function
|
||||
|
||||
### Publishing the Azure function app
|
||||
|
||||
Follow below steps in order to publish the functions:
|
||||
|
||||
1. Open Provisioning App solution with Visual Studio 2017/2019.
|
||||
2. In Solution Explorer, right-click the project and select Publish.
|
||||
3. In the Pick a publish target dialog, use the publish options as specified in the table below the image:
|
||||
|
||||
|
||||
|
||||
4. Select Publish. If you haven't already signed-in to your Azure account from Visual Studio, select Sign-in.
|
||||
5. In the App Service: Create new dialog, enter the hosting settings.
|
||||
6. Select Create to create a function app and related resources in Azure with these settings and deploy your function project code.
|
||||
|
||||
### Securing the Azure function app
|
||||
|
||||
1. Open Azure Portal https://portal.azure.com.
|
||||
2. Click App Services and find the app you just created.
|
||||
3. Click "Platform features" tab.
|
||||
4. Under Networking, click "Authentication / Authorization".
|
||||
5. In the option “App Service Authentication”, select “ON”.
|
||||
6. For "Action to take when request is not authenticated" option, select “Log in with Azure Active Directory”.
|
||||
7. Under “Authentication Providers”, select “Azure Active Directory”.
|
||||
8. Select “Management mode” as Express.
|
||||
9. Create new AD App or select an existing one.
|
||||
10. Click OK and then Save.
|
||||
|
||||
### Enable CORS on Azure Function
|
||||
|
||||
1. Click Platform features.
|
||||
2. Under API, click CORS.
|
||||
3. Specify the Office 365 tenant domain url and SharePoint local workbench url.
|
||||
4. Click Save.
|
||||
|
||||
|
||||
|
||||
## Setting up an Azure AD app for app-only access
|
||||
|
||||
### Create a self signed certificate
|
||||
|
||||
1. Run below command using Create-SelfSignedCertificate.ps1 in powershell-scripts folder.
|
||||
|
|
@ -86,20 +48,86 @@ Follow below steps in order to publish the functions:
|
|||
> The dates are provided in US date format: YYYY-MM-dd
|
||||
> Don't forget to update the PASSWORD and NAME.
|
||||
|
||||
2. Open Azure Portal https://portal.azure.com.
|
||||
3. Select Azure Active Director, App Registration and then the App your created in previous steps.
|
||||
4. Click on "Certificates & secrets".
|
||||
5. Click on the "Upload certificate" button.
|
||||
6. Select the .CER file you generated earlier and click on "Add" to upload it.
|
||||
### Publishing the Azure function app
|
||||
|
||||
Follow below steps in order to publish the functions:
|
||||
|
||||
1. Open Provisioning App solution with Visual Studio 2017/2019.
|
||||
2. Copy the .pfx certificate you generated under the Cert folder.
|
||||
3. Open ProvisioningApp.csproj in a text editor and make sure your cert name is included. If not, replace provisioningapp.pfx with your cert file name.
|
||||
2. In Solution Explorer, right-click the project and select Publish.
|
||||
3. In the Pick a publish target dialog, use the publish options as specified in the table below the image:
|
||||
|
||||
|
||||
|
||||
4. Select Publish. If you haven't already signed-in to your Azure account from Visual Studio, select Sign-in.
|
||||
5. In the App Service: Create new dialog, enter the hosting settings.
|
||||
6. Select Create to create a function app and related resources in Azure with these settings and deploy your function project code.
|
||||
|
||||
## Setting up an Azure AD app for app-only access
|
||||
|
||||
### Create a new app registration in Azure AD
|
||||
|
||||
1. Open Azure Portal https://portal.azure.com.
|
||||
2. Click on Azure Active Directory.
|
||||
3. Click on App registrations.
|
||||
4. Click on New registration.
|
||||
5. Give youre registration a name.
|
||||
6. Click Register.
|
||||
|
||||
### Add your certificate to the app registration
|
||||
|
||||
1. Open Azure Portal https://portal.azure.com.
|
||||
2. Select Azure Active Director, App Registration and then the App your created in previous steps.
|
||||
3. Click on "Certificates & secrets".
|
||||
4. Click on the "Upload certificate" button.
|
||||
5. Select the .CER file you generated earlier and click on "Add" to upload it.
|
||||
|
||||
### API permissions
|
||||
|
||||
1. Click on API Permissions.
|
||||
1. In the app registration we created earlier, click on API Permissions.
|
||||
2. Click on the "Add a permission" button.
|
||||
3. Choose the following permissions:
|
||||
* SharePoint -> Application permissions -> Sites -> Sites.FullControl.All
|
||||
4. Click Add permissions to save
|
||||
5. Click Grant admin consent for the permissions to come into effect.
|
||||
|
||||
|
||||
### Add the user_impersonation scope
|
||||
|
||||
Still in your Azure AD app, do the following:
|
||||
|
||||
1. Click on Expose API.
|
||||
2. Click on Add scope
|
||||
3. Approve the suggested URL or change it, if you like.
|
||||
4. Fill in the following info:
|
||||
- Scope name: `user_impersonation`
|
||||
- Admin consent display name: `Access YourAzureAdAppDisplayName`
|
||||
- Admin consent description: `Allow the application to access YourAzureAdAppDisplayName on behalf of the signed-in user.`
|
||||
3. Press Add scope to save.
|
||||
|
||||
### Securing the Azure function app
|
||||
|
||||
1. Open Azure Portal https://portal.azure.com.
|
||||
2. Click App Services and find the app you created earlier.
|
||||
3. Click "Platform features" tab.
|
||||
4. Under Networking, click "Authentication / Authorization".
|
||||
5. In the option “App Service Authentication”, select “ON”.
|
||||
6. For "Action to take when request is not authenticated" option, select “Log in with Azure Active Directory”.
|
||||
7. Under “Authentication Providers”, select “Azure Active Directory”.
|
||||
8. Select “Management mode” as Express.
|
||||
9. Select the Azure AD app we registered earlier.
|
||||
10. Click OK and then Save.
|
||||
|
||||
### Enable CORS on Azure Function
|
||||
|
||||
1. Click Platform features.
|
||||
2. Under API, click CORS.
|
||||
3. Specify the Office 365 tenant domain url and SharePoint local workbench url.
|
||||
4. Click Save.
|
||||
|
||||
|
||||
|
||||
### Update App Settings
|
||||
|
||||
1. Go the `App Settings` page of the Azure functions.
|
||||
|
|
@ -107,8 +135,27 @@ Follow below steps in order to publish the functions:
|
|||
|
||||
Key|Value|Note
|
||||
---|-----|----
|
||||
CERTIFIATE| .pfx file name | you should copy .pfx file in Cert folder
|
||||
CERTIFICATE| .pfx file name | you should copy .pfx file in Cert folder
|
||||
PASSWORD| Password you set for the certificate file
|
||||
CLIENTID| Application Registration Client ID| you can find the client id from overview tab
|
||||
TENANT| e.x. contoso.onmicrosoft.com
|
||||
|
||||
## Installing the web part
|
||||
|
||||
In the package-solution.json, replace the value of `resource` (under `webApiPermissionRequests`) with the name of your Azure AD app registration.
|
||||
|
||||
On the command line run (when in `webparts` dir):
|
||||
- `npm install`
|
||||
- `gulp bundle --ship`
|
||||
- `gulp package-solution --ship`
|
||||
- Drop the .sppkg file under `sharepoint\solution` to your tenant app catalog.
|
||||
- Approve the API permissions via the new SharePoint admin center.
|
||||
|
||||
## Configuring the web part on a page
|
||||
|
||||
Open the web part configurations and set the values:
|
||||
1. Application Id/EndPoint: the client ID of the Azure AD app registration used for authentication
|
||||
2. Get provisioning function URL: Go to the Azure functions in Azure portal and click on "GetProvisioningTemplate" and then "Get function Url". Copy-paste that value in this field.
|
||||
3. Apply provisioning function URL: Go to the Azure functions in Azure portal and click on "ApplyProvisioningTemplate" and then "Get function Url". Copy-paste that value in this field.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-site-provisioning-manager" />
|
||||
|
|
@ -10,7 +10,7 @@ namespace ProvisioningApp.Constants
|
|||
{
|
||||
public const string FileName = "PnPProvisioningTemplate.xml";
|
||||
public const string clientIdKey = "CLIENTID";
|
||||
public const string certificatePathKey = "CERTIFIATE";
|
||||
public const string certificatePathKey = "CERTIFICATE";
|
||||
public const string passwordKey = "PASSWORD";
|
||||
public const string tenantKey = "TENANT";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,25 +3,21 @@
|
|||
"id": "c2fdd0d3-2636-42e9-9f39-c2ee831b0c5c",
|
||||
"alias": "SiteProvisioningManagerWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
// The "*" signifies that the version should be taken from the package.json
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||
// Components that allow authors to embed arbitrary script code should set this to true.
|
||||
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
|
||||
"group": { "default": "Other" },
|
||||
"title": { "default": "Site Provisioning Manager" },
|
||||
"description": { "default": "Get or apply PnP provisioning templates" },
|
||||
"officeFabricIconFontName": "CustomizeToolbar",
|
||||
"properties": {
|
||||
"description": "Site Provisioning Manager"
|
||||
"description": "Site Provisioning Manager",
|
||||
"ApplicationId": "",
|
||||
"GetTemplateFunctionUrl": "",
|
||||
"ApplyTemplateFunctionUrl": ""
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue