sp-dev-fx-webparts/samples/react-sp-elevatedprivileges/README.md

124 lines
5.1 KiB
Markdown
Raw Normal View History

---
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.
![Sample web part showing orders retrieved from a custom Web API secured with Azure Active Directory](./assets/preview.png)
2021-11-07 01:33:53 -05:00
## Compatibility
![SPFx 0.4.0](https://img.shields.io/badge/SPFx-0.4.0-orange.svg)
![Node.js v6](https://img.shields.io/badge/Node.js-v6-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Compatible SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Compatible-green.svg)
![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg)
![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-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" />