From be833e871f4223634c267f9a97829d245ddd2cbb Mon Sep 17 00:00:00 2001 From: Laura Kokkarinen Date: Mon, 26 Aug 2019 19:28:21 +0300 Subject: [PATCH] Added telemetry image, adjusted installation instructions, corrected a typo, and added missing properties. --- .../react-site-provisioning-manager/README.md | 137 ++++++++++++------ .../ProvisioningApp/Constants/Configs.cs | 2 +- ...teProvisioningManagerWebPart.manifest.json | 14 +- 3 files changed, 98 insertions(+), 55 deletions(-) diff --git a/samples/react-site-provisioning-manager/README.md b/samples/react-site-provisioning-manager/README.md index efa5a2de9..ce4868166 100644 --- a/samples/react-site-provisioning-manager/README.md +++ b/samples/react-site-provisioning-manager/README.md @@ -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: - -![publish-profile](./assets/functions-visual-studio-publish-profile.png) - -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. - -![CORS Settings](./assets/functions-CORS-settings.PNG) - -## 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: + +![publish-profile](./assets/functions-visual-studio-publish-profile.png) + +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. ![API Permissions](./assets/api-permissions.png) +### 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. + +![CORS Settings](./assets/functions-CORS-settings.PNG) + ### 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. + + \ No newline at end of file diff --git a/samples/react-site-provisioning-manager/azure-function/ProvisioningApp/ProvisioningApp/Constants/Configs.cs b/samples/react-site-provisioning-manager/azure-function/ProvisioningApp/ProvisioningApp/Constants/Configs.cs index f02807034..7d4d0faa6 100644 --- a/samples/react-site-provisioning-manager/azure-function/ProvisioningApp/ProvisioningApp/Constants/Configs.cs +++ b/samples/react-site-provisioning-manager/azure-function/ProvisioningApp/ProvisioningApp/Constants/Configs.cs @@ -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"; } diff --git a/samples/react-site-provisioning-manager/webpart/src/webparts/siteProvisioningManager/SiteProvisioningManagerWebPart.manifest.json b/samples/react-site-provisioning-manager/webpart/src/webparts/siteProvisioningManager/SiteProvisioningManagerWebPart.manifest.json index a6bc58922..fe4142946 100644 --- a/samples/react-site-provisioning-manager/webpart/src/webparts/siteProvisioningManager/SiteProvisioningManagerWebPart.manifest.json +++ b/samples/react-site-provisioning-manager/webpart/src/webparts/siteProvisioningManager/SiteProvisioningManagerWebPart.manifest.json @@ -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": "" } }] }