forked from pnp/sp-starter-kit
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Changes to LOB Integration documentation
- Loading branch information
Showing
5 changed files
with
161 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| # LOB Integration webpart | ||
|
|
||
| This web part allows you to learn how to consume 3rd party APIs, secured with Azure Active Directory, in the context of SharePoint Framework. | ||
| It leverages two different back-end REST APIs: | ||
| - An ApiController built in Microsoft ASP.NET MVC, which is defined in a .NET solution that you can find [here](../../sample-lob-service/SharePointPnP.LobScenario/SharePointPnP.LobScenario.sln) | ||
| - An Azure Function, which is based on the code defined [here](../../sample-lob-service/LIstNorthwindCustomers) | ||
|
|
||
|  | ||
|
|
||
| The purpose of this web part is to show how you can consume LOB (Line of Business) solutions and on-premises data within SharePoint Framework. | ||
| In order to leverage this web part, you will need to configure a couple of applications in Azure Active Directory: | ||
| - SPFx-LOB-WebAPI: for the .NET web application | ||
| - Publish the ASP.NET MVC application on an Azure App Service | ||
| - Register the AAD app providing the URL of the above Azure App Service | ||
| - Choose a valid App ID Uri for the app | ||
| - Configure that App ID Uri in the [LobIntegration.tsx](../../solution/src/webparts/lobIntegration/components/LobIntegration.tsx#L156) React component | ||
| - Update the App manifest configuring the **oauth2Permissions** property with a value like the following one: | ||
|
|
||
| ```json | ||
| "oauth2Permissions": [ | ||
| { | ||
| "adminConsentDescription": "Allow the application to read customers through SPFx-LOB-WebAPI on behalf of the signed-in user.", | ||
| "adminConsentDisplayName": "Read customers from SPFx-LOB-WebAPI", | ||
| "id": "7510eb34-4403-44d5-a745-a62d0895351c", | ||
| "isEnabled": true, | ||
| "type": "User", | ||
| "userConsentDescription": "Allow the application to access SPFx-LOB-WebAPI on your behalf.", | ||
| "userConsentDisplayName": "Access SPFx-LOB-WebAPI", | ||
| "value": "Customers.Read" | ||
| } | ||
| ], | ||
| ``` | ||
| - SPFx-LOB-Function: for the Azure Function | ||
| - Create an Azure Function and configure it with Azure AD Authentication, registering it in your target AAD tenant | ||
| - Register the AAD app providing the URL of the above Azure Function | ||
| - Choose a valid App ID Uri for the app | ||
| - Configure that App ID Uri in the [LobIntegration.tsx](../../solution/src/webparts/lobIntegration/components/LobIntegration.tsx#L99) React component | ||
|
|
||
| Moreover, in order to make this web part working properly, you need to grant permissions to the SharePoint Service Application Principal to access them. You can do that using the PnP PowerShell command lets (or Office 365 CLI) and the following syntax: | ||
|
|
||
| ```PowerShell | ||
| Connect-PnPOnline "https://[your-tenant].sharepoint.com/" | ||
| Grant-PnPTenantServicePrincipalPermission -Resource "SPFx-LOB-WebAPI" -Scope "Customers.Read" | ||
| Grant-PnPTenantServicePrincipalPermission -Resource "SPFx-LOB-Function" -Scope "user_impersonation" | ||
| ``` | ||
|
|
||
| ## How to use this web part on your web pages | ||
|
|
||
| 1. Place the page you want to add this web part to in edit mode. | ||
| 2. Search for and insert the **LobIntegration** web part. | ||
| 3. Configure the webpart to update its properties. | ||
|
|
||
| ## Configurable Properties | ||
|
|
||
| The `LobIntegration` webpart can be configured with the following properties: | ||
|
|
||
| | Label | Property | Type | Required | Description | | ||
| | ---- | ---- | ---- | ---- | ---- | | ||
| | Web API URI | webapiUri | string | yes | The URL of the web API. Should be something like https://[your-app-service].azurewebsites.net/api/customers | | ||
| | Function URI | functionUri | string | yes | The URL of the Azure Function. Should be something like https://[your-azure-function].azurewebsites.net/api/ListNorthwindCustomers | | ||
| | Service Type | serviceType | choice | yes | Defines the service to use. It can be "ASP.NET REST API" or "Azure Function" | | ||
|
|
||
| # Installing the web part | ||
|
|
||
| See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit). | ||
|
|
||
| You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part does not have external dependencies. | ||
|
|
||
| # Screenshots | ||
|  | ||
|
|
||
|
|
||
| # Source Code | ||
|
|
||
| https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/lobintegration | ||
|
|
||
| # Minimal Path to Awesome | ||
|
|
||
| - Clone this repository | ||
| - Move to Solution folder | ||
| - in the command line run: | ||
| - `npm install` | ||
| - `gulp serve` | ||
|
|
||
| # Version history | ||
|
|
||
| Version|Date|Comments | ||
| -------|----|-------- | ||
| 1.0|May 2018|Initial release | ||
| 1.1|June 2018|Updated collection descriptions | ||
| 1.2|October 2018|Updated documentation | ||
|
|
||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "bindings": [ | ||
| { | ||
| "authLevel": "anonymous", | ||
| "name": "req", | ||
| "type": "httpTrigger", | ||
| "direction": "in", | ||
| "methods": [ | ||
| "get", | ||
| "post" | ||
| ] | ||
| }, | ||
| { | ||
| "name": "$return", | ||
| "type": "http", | ||
| "direction": "out" | ||
| } | ||
| ], | ||
| "disabled": false | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| using System.Net; | ||
| using System.Security.Claims; | ||
|
|
||
| public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log) | ||
| { | ||
| log.Info("C# HTTP trigger function processed a request."); | ||
|
|
||
| return req.CreateResponse(HttpStatusCode.OK, new { | ||
| CurrentPrincipalClaims = ClaimsPrincipal.Current.Claims, | ||
| RequestDateTime = DateTime.Now, | ||
| Customers = new List<object> { | ||
| new { | ||
| CustomerID = "ALFKI", | ||
| CompanyName = "Alfreds Futterkiste", | ||
| ContactName = "Maria Anders", | ||
| Country = "Germany" | ||
| }, | ||
| new { | ||
| CustomerID = "ANATR", | ||
| CompanyName = "Ana Trujillo Emparedados y helados", | ||
| ContactName = "Ana Trujillo", | ||
| Country = "Mexico" | ||
| }, | ||
| new { | ||
| CustomerID = "ANTON", | ||
| CompanyName = "Antonio Moreno Taquería", | ||
| ContactName = "Antonio Moreno", | ||
| Country = "Mexico" | ||
| }, | ||
| new { | ||
| CustomerID = "AROUT", | ||
| CompanyName = "Around the Horn", | ||
| ContactName = "Thomas Hardy", | ||
| Country = "UK" | ||
| }, | ||
| new { | ||
| CustomerID = "BERGS", | ||
| CompanyName = "Berglunds snabbköp", | ||
| ContactName = "Christina Berglund", | ||
| Country = "Sweden" | ||
| }, | ||
| }, | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters