SharePoint provider hosted app

In this tutorial, I have explained how to work with the SharePoint provider hosted app. I will show you how to create a provider hosted app in SharePoint Online using Visual Studio and, finally, how to deploy the provider hosted app to SharePoint.

Provider hosted app in SharePoint

A SharePoint provider hosted app includes a web application (mostly asp.net webform or asp.net MVC application). service or a database that will be hosted externally from SharePoint farm (on-premise) or from SharePoint online subscription. The custom logic will run outside of the SharePoint farm.

Create a provider hosted app in SharePoint online

Now, we will see how to develop a provider hosted app in SharePoint using Visual Studio.

Open Visual Studio, then click on File -> New Project, and then in the New Project dialog box, choose Visual C# -> Office/SharePoint and then choose “SharePoint Add-in” like below:

Then, it will ask you to give a developer site URL. Give a developer site URL that you have created in the previous steps. Then, from the “How do you want to host your SharePoint Add-in”, choose “Provider-hosted add-in” like below:

Then it will ask you for credentials; put in your username and password, and then it will show “SharePoint Online” like below:

On the next screen, it will ask you to choose which type of web application you want to create. You can choose one from below:

• ASP.NET Web Forms Application
• ASP.NET MVC Web Application

Here, I choose ASP.NET Web Forms Application, but you can choose as per your skills.

Then in the next screen, we need to Configure authentication settings. For SharePoint Online, choose “Use Windows Azure Access Control Service (for SharePoint cloud add-ins)”.

If you are developing a provider hosted add-in or apps for SharePoint 2013 on-premise environment, you can create your own certificate and use that certification. It should look like below:

Once you click on Finish, The Add-in project will be ready. You can see two projects: One is the Add-in project, and another project is the Web application project (ASP.NET Web Form Application Project.) You can see what the visual studio solution will look like below:

Add Business Logic In Provider Hosted Add-in

Now you can add your business logic inside the Provider hosted app, Here, I have just added an Asp.Net Label in the Default.aspx code. You can add your own custom business logic.

Similarly, you need to add the code in the code behind file.

Remember in provider hosted add-ins or provider hosted apps, we can write CSOM (.Net Object model code). So we can use the below two dlls to write our business logic.

• Microsoft.SharePoint.Client.Dll
• Microsoft.SharePoint.Client.Runtime.Dll

By default, when you create the Add-in project, both the dlls will be added before.

Here, I have just written the code to display the Site title, and the code looks like the below:

var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
using (var clientContext = spContext.CreateUserClientContextForSPHost())
{
clientContext.Load(clientContext.Web, web => web.Title);
clientContext.ExecuteQuery();
Label1.Text = "Your Site Title Is: " + clientContext.Web.Title;
}

Generate and update Client Id and Client Secret

Now, we need to create the Client ID and Client Secret for the SharePoint Online site.

Open the SharePoint site on which you want to add the add-in. Here I will use the developer site. To create the Client ID and Client Secret, you need to access the URL below. We need to first access appregnew.aspx page by the following URL.

_layouts/15/appregnew.aspx
Example: https://onlysharepoint2013.sharepoint.com/sites/DevSite/_layouts/15/appregnew.aspx

Once you open this page, click on the Generate button to generate the Client ID and Client Secret, and then provide the details below:

• Title: Title of the Add-in
• App Domain: You need to provide the Azure website URL without https:// Example: SharePointTraining.azurewebsites.net
• Redirect URL: Here, you need to provide the Azure website URL with https:// like, https://SharePointTraining.azurewebsites.net

Then click on the Create button.

Once you click on Create, you can see a confirmation page like below where it will show “The app identifier has been successfully created.” You need to copy the Client ID and Client Secret because we need to update in the web.config file.

Now Open the Web.Config file (Asp.Net Web form application) and update the Client Id and ClientSecret in AppSettings like below:

Then we need to update Client Id in AppManifeast.xml file like below:

Right-click on the AppManifeast.xml file and then click on “View Code” like below:

This will open the Code file, and there update ClientId in RemoteWebApplication like line number 15 below:

Once we modify the Client Id and Client Secret, your SharePoint Online provider hosted add-in is ready for deployment.

Deploy provider hosted app SharePoint online

Now it is the time to deploy the Provider-hosted add-in to the developer site. The solution has two projects: we will have to deploy the Asp.Net web application to Microsoft Azure.

Before deploying, we need to get the profile of the Azure website.

To deploy the site to Azure, we need to create a website in Microsoft Azure, and then we need to download the Publish profile of the website.

Once you have downloaded the publish profile, Right click on Asp.Net Web Project and then click on Publish like below:

Then in “Pick a publish target“, choose App Service and then click on “Import Profile” like below:

There, browse to the published profile and click on Publish. The publication will start.

Then you will be able to see the Publish will be successful. You can see below. But if you check, you can see the site URL is pointing to an HTTP URL, not an https URL. To do this, click on the “preview” link in the Site URL section.

Then you can see the below Publish screen, change the Destination URL to https like below:

Then on the next screen, click on Next.

Then, you can see the site URL changed to https, and you can just click again on the Publish button, which will publish the application to Microsoft Azure.

In the above steps, the Asp.Net web application will be successfully deployed to Azure. Next, we will publish the Add-in project.

Publish Add-in Project to SharePoint Online Site

Now, we will publish the Add-in project to the SharePoint Online site. Right-click on the Add-in Project and click on Publish…

Then you can see the Edit, button with a yellow mark, which means some issues are there. Click on the Edit button.

Then, in the next screen, Put the Client ID and Client Secret, which we got from the above steps. It should look like below:

Then click on the Finish button. Then click on the Deploy your web project button like below once again.

You can see it will continue publishing the item.

Package Provider Hosted Apps/Add-in

Now, we can package the Add-in project. Click on the “Package the add-in” button.

Then, it will display the URL and the Client ID, which you can verify and change if required. By default, it shows the correct site URL and Client ID.

Then it will generate the .app file, and it will open the folder which contains the .app file.

C:\Users\Administrator\source\repos\DempProviderHostedAddin\DempProviderHostedAddin\bin\Debug\app.publish\1.0.0.0

Upload .app file to Developer Site:

Now, it is time to deploy the .app file to the developer site. Open the developer site and open “Apps in Testing” list, where we need to add the .app file.

Click on “+ new app to deploy” which will open a dialog box like below. Click on the “upload” link. Browse to the .app file from the above location and click on OK.

Then click on the Deploy button like below.

Then it will ask you to trust the App like below; click on Trust It.

Then you can see it will take some time to install the app; it will show the “installing” status like below:

Once the App or Add-in is installed successfully, you can see it like below.

Add Provider Hosted Add-in in SharePoint Online

Now we can test SharePoint Provider hosted add-in or apps. Open the Site Contents page, and you can see the app or add-in there. In the Classic SharePoint site, the add-in will appear like below:

On the SharePoint modern site contents page, you can see the add-in will appear like below:

Once you click on the add-in, you can see it will open the Azure website like below:

Conclusion

This SharePoint tutorial explains how to work with sharepoint provider hosted apps.

You may also like:

• JavaScript Object Model
• SharePoint Server Object Model Tutorial
• CAML Query Builder SharePoint Online
• CRUD Operations using JSOM in SharePoint