Step By Step creation of Provider Hosted App hosted on O365 with local IIS

Prepare your environment for your App development

Step By Step creation of Provider Hosted App hosted on O365 (SharePoint online) with local IIS

The following steps are required for creating a provider hosted App

Step 1 - Create O365 Tenant – You can skip this step if you already have a tenant created.

          Step 2 - SharePoint Online Developer Site - You can skip this step if you already have a developer site created.

Step 3 - Install Visual Studios - You can skip this step if you already have a Visual Studio 2013/2015 with Office Tools.

Step 4 - Create Provider Hosted APP Project in VS2015.

Step 5 Enabling SSL on IIS Using Self-Signed Certificates

Step 6 - Create local Web APP and configure SSL for Apps.

Step 7 - Create Client ID and Client Secret.

Step 8 - Use Client ID and Client Secret created in the step above in the VS 2015 project.

       Step 9 – Build , deploy and Run the App

Introduction

SharePoint and office development model is changing to a new App model. This is the new development model for SharePoint. In this blog I will walk you through creating a provider hosted SharePoint App that is hosted in your local IIS. This will show the following key features:

·         How to prepare your environment for your App development?

·         How to develop a provider hosted App that is hosted in local IIS websites and linked to Office 365 / SharePoint Online?

·         How to use the Client Object Model (CSOM) to read and write data back to SharePoint using the credentials of the logged in user?

What are Apps?

What are APPs? Advantages on all the Web Applications are becoming APPs?

"Apps" is not just a marketing strategy to increase use of SharePoint, but also a replacement to the sandbox approach with many advantages for both Development and Configuration. Sandbox Solutions are introduced in SharePoint 2010 and now they are deprecated, to force/encourage the usage of Apps.

·         Custom code will not be executed on server. So this can avoid, Application / Server outages.

·         Custom code will be executed in Client-Browser or may be in some other scope like IIS or Windows Azure, which is completely out of SharePoint scope.

·         Server Object Model (SOM) code is replaced by Client side object model (CSOM) / Rest Services using which Apps can communicate with Server.

·         Authentication is done by “OAuth”.

·         Installing / Updating / Uninstalling of apps can be done without affecting the SharePoint site.

·         Better usability in Tablets and Mobile devices.

·         Taking SharePoint to next level in terms of Usability, Development, Deployment and Hosting (cloud).

·         Finally, everything in SharePoint online is an App.

Hosting Options in Apps

 1. Provider-hosted

 2. SharePoint-hosted

“Auto-hosted” Apps program has ended by Microsoft on June 30, 2014 which was another option to create an APP.

How apps work?

This has been divided into two steps so that we understand them better with screenshot from actual demo example.

LET US BEGIN.

Step By Step creation of Provider Hosted App hosted on O365 (SharePoint online) and IIS

Step 1 Create O365 Tenant (Developer Site)

This is the starting point of the blog series for creating a Provider hosted APP using MVC.

To start with, one needs to have an O365 tenant provisioned

§  Open Internet Explorer.

§  Navigate to http://www.microsoft.com/office365.

§  Select the link to start your free trial. Click on the free trial option. Refer the screenshot below : 

§  Enter your details as per the requirement company information

§  In this Step 2 option, enter your desired tenant account name. If the name you want is already taken, don’t worry. You can still add your own public domain name. The name entered here is just for your Microsoft Office 365 Tenant account (domain.onmicrosoft.com).

·         Click Create my Account. Please refer the screen shot below : 

Once the O365 Tenant is created make sure that the all the services are up and running. Please click on the link below:

·         https://portal.office.com/admin : This link gives you the dashboard view of all the required services. 

Step 2 SharePoint Online DEV Site.

Create a Developer Site

1.       Sign in to Office 365 as a Global or SharePoint Online admin.

You must sign in as a Global or SharePoint Online admin to create new site collections, such as a Developer Site. Only admins can see Admin options when signing into Office 365. If you’re not an admin, contact an admin in your company and have them do one of the following:

o    Grant you admin rights, so you can create the Developer Site yourself.

o    Create the Developer Site for you, and specify you as an admin for the site collection.

2.       Click the App Launcher button on the far left of the navigation bar at top.

3.       Click the Admin tile.

4.       In the navigation tree on the left, expand Admin, and select SharePoint.

 

      In the SharePoint admin center, on the Site Collections tab, click New > Private Site Collection

 In the New Site Collection dialog box, provide information about your Developer Site.

Click the following image to walk through new site collection options in the dialog box, or refer to the table under the image for guidance

Click OK.

You’ll see the new developer site URL in the Site Collections list. When the site creation is finished, you can navigate to the URL to open your Developer Site.

Once your developer site is opened, copy the URL. We will be using this URL for the development purpose.



Step 3 Install Visual Studios 2015.

Visual Studio 2015 version includes the Microsoft Office Developer Tools. Make sure that you have the latest version of the tool available. To do this, run the installer for Office Developer Tools for Visual Studio 2015.
Step 4 Create Provider Hosted APP Project in VS2015.
A provider-hosted app for SharePoint consists of both an app for SharePoint that is deployed directly to a SharePoint 2015 site and a separately deployed web application.
Open the Visual Studio 2015 as Administrator.
As shown in the screenshot below:

Click File.
Go to New.
Select Project

Select the Template “SharePoint Add-In”. Name the Project as HelloAppModel. As shown in the screenshot below

Select the Provider hosted App and enter the URL of the DEV Site and then click “Next”. As shown in the screenshot below

Sign in with your “(tenant).onmicrosoft.com” credentials. On the O365 prompt. As shown in the screenshot below

It will Automatically selected SharePoint Online option after successfully sign-in. As shown in the screenshot below

Select “ASP.NET MVC Web Application” and click “Next”. As shown in the screenshot below

Select “Use Windows Control Access Control Service” option and click “Finish”. As shown in the screenshot below

Click Finish.

Two projects will be created.

1. App Project (HelloAppModel)– This is going to be deployed on the SharePoint.

2. AppWeb Project (HelloAppModelWeb)– This is going to be the .Net Web Application. This application will be hosted on any IIS. As shown in the screenshot below

Step 5 Enabling SSL on IIS Using Self-Signed Certificates

Step 1: Create a new Self Signed Certificate

Before binding SSL rules to our new site, we need to first import and setup a security certificate to use with the SSL binding. 

Certificates are managed in IIS 7.0 by clicking the root machine node in the left-hand tree-view explorer, and then selecting the "Server Certificates" icon in the feature pane on the right:

This will then list all certificates registered on the machine, and allow you to optionally import and/or create new ones.

I could optionally go to a certificate authority like Verisign and purchase a certificate to import using this admin UI.  Alternatively, I can create a "self-signed certificate" which is a test certificate that I can use during the development and testing of my site.  To-do this, click the "Create Self-Signed Certificate" link on the right-hand side of the admin tool:

Enter a name to use for the certificate (for example: "test") and hit ok.  IIS7 will then automatically create a new self-signed crypto certificate for you and register it on the machine:

Step 2: Enable HTTPS Bindings for our Site

To SSL enable the web-site we created earlier, select the web-site node in the left-hand tree-view, and the click the "Bindings" link in its "actions" pane on the right-hand side of the screen:

This will then bring up a dialog that lists all of the binding rules that direct traffic to this site (meaning the host-header/IP address/port combinations for the site):

To enable SSL for the site, we'll want to click the "Add" button. This will bring up an "add binding" dialog that we can use to add HTTPS protocol support.  We can select the self-signed certificate we created earlier from the SSL certificate dropdownlist in the dialog, and in doing so indicate that we want to use that certificate when encrypting content over SSL:

Click ok, and we now have SSL enabled for our site:

Step 3: Test out the Site

Add a "default.aspx" page to the site, and then try and hit it with the browser by typinghttps://localhost/default.aspx (note the usage of "https" instead of "http" to indicate that you want to connect over SSL).

If you are using IE, you'll likely see this anti-phishing error message kick in

Step 6 Create local Web App and configure IIS for Apps

Go to the Property of the AppWeb project and make sure that the Target Framework is set to 4.5.

Create the virtual directory host our AppWeb on the Local IIS, instead of using the IIS Express, let us host our application on the IIS itself.
Please note put https:// instead of http:// as we configured SSL our default website(localhost) in step 5.

By clicking the “Create Virtual Directory” button on the Web Tab, virtual directory will be created on the local IIS.

You can confirm this by going to inetmgr.

After the property configurations, we are ready with our Provider Hosted Application. Rebuild the solution to make sure everything is fine.

Go to the AppManifest.xml in the App project. AppManifest file will be looking like this.

 

Modify the Start Page attribute to point the IIS directly. Please refer the below figure.

Go to Permissions Tab. Add the corresponding scope and the permissions as per the requirement. In this demo, I am adding the web as full control. This will give the rights to do CRUD Operations over the list present with in my web.

By doing this, we are sure that our app is having the Full Control Permission through the Web Scope.The AppManifest.xml will be like this.



Now, we came to the final step of our provider hosted application creation. That is, we need to register our clientID with the SharePoint before deploying the app.

Step 7 Create Client ID and Client Secret.

As a guideline for registering an APP on SharePoint, one needs to have a client ID and Client Secret. To create, refer to the steps given below:

Open the DEV Site created in Step 2.

Append “/_layouts/15/appregnew.aspx” at the end of the URL and click enter. This is the APP registration hidden URL. As shown in the screenshot below.

Click on Generate Button for creating the Client ID and Client Secret. Enter the value as described below:

Client ID: To be used in “Web.Config” of MVC Project and “App.Manifest” of Provider hosted App Project.

Client Secret: To be used in “Web.Config” of MVC Project and “App.Manifest” of Provider hosted App Project.

Title: Add the Title to the Application. E.g. (use project name). To fill the App Domain and Redirect URL:

App Domain: This is the domain used for the Web App in IIS created in STEP 5 above.

Redirect URL: This the redirect URL, to be used from STEP 5 above.E.g.
App Domain: localhost
Redirect URL: https://localhost/HelloAppModelWeb

Please see the screen shot below for reference:

Final entry will look as shown below:

Click “Create” button and the following successful creation will show on the result page As shown in the screenshot below (Do not close the page):

Step 8 Use Client ID and Client Secret created in the step above in the VS 2015 project.

Once the Client ID and Client Secret is created follow the steps below:

Open the App.Menifest.xml file. To open this Right Click on the file and select Open Code. Please see the screen shot below for reference:

Replace the Client ID generate in Step 6. As shown in the screenshot below:

Open the “Web.Config” of the MVC Project and enter the Client ID and Client Secret generated. As shown in the screenshot below:

Step 9 Build, Deploy and Run the App.

Once all the above step are completed it is time to re-build the project and deploy it office 365.

 Simply hit F5 / Click start to start the deployment and debugging.

This will ask you to login to your site as below.

Then it will ask you if you trust this App .


Click “Trust It” and here you go. you'll likely see this anti-phishing error message kick in. Click “Continue to this site.”

Finally , launch the App from our SharePoint Portal. you can see the URL is referring back to your machine and the source URL is the SharePoint online URL.

With this we are now familiar with creating a Provider Hosted Application. I hope this helps, just leave a comment if it does.