124 lines
5.1 KiB
Markdown
124 lines
5.1 KiB
Markdown
---
|
|
page_type: sample
|
|
products:
|
|
- office-sp
|
|
languages:
|
|
- javascript
|
|
- aspx
|
|
- typescript
|
|
extensions:
|
|
contentType: samples
|
|
technologies:
|
|
- SharePoint Framework
|
|
platforms:
|
|
- React
|
|
createdDate: 1/1/2016 12:00:00 AM
|
|
---
|
|
# Communicate using elevated privileges with SharePoint
|
|
|
|
## Summary
|
|
|
|
Sample SharePoint Framework client-side web part illustrating communication with SharePoint using elevated privileges through a custom Web API.
|
|
|
|
|
|
|
|
|
|
## Compatibility
|
|
|
|
|
|
|
|
|
|
|
|
-Compatible-green.svg)
|
|
|
|
|
|
|
|
|
|
## Applies to
|
|
|
|
* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
|
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
|
|
|
## Solution
|
|
|
|
Solution|Author(s)
|
|
--------|---------
|
|
react-sp-elevatedprivileges|Waldek Mastykarz (MVP, Rencore, @waldekm)
|
|
|
|
## Version history
|
|
|
|
Version|Date|Comments
|
|
-------|----|--------
|
|
1.0|October 12, 2016|Initial release
|
|
|
|
## Disclaimer
|
|
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
|
|
|
---
|
|
|
|
## Minimal Path to Awesome
|
|
|
|
- clone this repo
|
|
|
|
### Deploy custom Web API
|
|
|
|
- in the Azure Management Portal at https://portal.azure.com create a new API App
|
|
- in the settings enable CORS for all origins using an `*`
|
|
- copy the URL of the API App
|
|
- in your SharePoint site
|
|
- create a new list called **Tasks**
|
|
- navigate to https://yourtenant.sharepoint.com/_layouts/15/appregnew.aspx
|
|
- generate client ID and copy it
|
|
- generate client secret and copy it
|
|
- as the name use: **SPFx sample elevated privileges**
|
|
- as the URL use the URL of the Azure API App created previously
|
|
- as the domain use the host name of the Azure API App
|
|
- navigate to https://yourtenant.sharepoint.com/_layouts/15/appinv.aspx
|
|
- lookup the newly registered Add-in using the client ID you copied
|
|
- in the **Permissions** field past the following code:
|
|
|
|
```xml
|
|
<AppPermissionRequests AllowAppOnlyPolicy="true">
|
|
<AppPermissionRequest Scope="http://sharepoint/content/sitecollection/web/list" Right="Write" />
|
|
</AppPermissionRequests>
|
|
```
|
|
|
|
- after confirming the changes, when prompted, select the previously created **Tasks** list
|
|
- from the **api** folder, in Visual Studio open the **pnp.api.elevatedprivileges.sln** file
|
|
- in the web.config file
|
|
- update the value of the **clientId** setting with the previously copied client ID
|
|
- update the value of the **clientSecret** setting with the previously copied client secret
|
|
- update hte value of the **siteUrl** setting with the URL of your SharePoint site
|
|
- if you named your list other than **Tasks** update the value of the **listName** property with the name of your list
|
|
- build the solution
|
|
- deploy the **pnp.api.elevatedprivileges** project to the newly created API App
|
|
- verify that you can access the API by navigating in your web browser to **https://your-api-app.azurewebsites.net/api/items**
|
|
- you should get an error that GET is not a supported method
|
|
|
|
### Configure web part
|
|
|
|
- in the command line
|
|
- change the working directory to the **webpart** folder
|
|
- run `npm i`
|
|
- in your code editor open the **webpart** folder
|
|
- in the **./src/webparts/createTask/components/CreateTask.tsx** file
|
|
- in line 76 replace the URL with the URL of your API App
|
|
- in the command line execute `gulp serve`
|
|
- add the web part to SharePoint workbench
|
|
- enter the name of the new item and click the **Create** button
|
|
- verify that a new item with the name you specified has been created in the Tasks list
|
|
|
|
## Features
|
|
|
|
This project contains sample Web API using app-only permissions to create items in a specific SharePoint list, and a client-side web part connected to that API.
|
|
|
|
This project illustrates the following concepts:
|
|
- elevating user privileges for communicating with SharePoint through a custom Web API
|
|
- connecting SharePoint Framework client-side web part to a custom Web API hosted in Azure
|
|
- persisting state in React components
|
|
- communicating state updates in React components to users
|
|
- executing REST API web requests from React components
|
|
- using Office UI Fabric React components in SharePoint Framework client-side web parts
|
|
- using form controls in Rest components
|
|
|
|
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-sp-elevatedprivileges" /> |