On-premise and Online connection with Provider Hosted … · On-premise and Online connection with Provider Hosted APP ... Use Client ID and Client Secret created in the step above

pg. 1 Copyright © 2015 WinWire Technologies

On-premise and Online connection with Provider

Hosted APP (Part 1)

WinWire Technologies Inc.

2350 Mission College Boulevard,

Suite 925, Santa Clara,

California, 95054


Contents

Apps? Why not Solutions? ................................................................................................................... 3

Hosting Options in Apps ....................................................................................................................... 3

How apps for SharePoint Work ........................................................................................................... 4

Step By Step creation of Provider Hosted App hosted on O365 (SharePoint online) with Azure ............ 5

Step 1 Create O365 Tenant (Developer Site)....................................................................................... 6

Step 2 SharePoint Online DEV Site. ..................................................................................................... 8

Step 3 Install Visual Studios 2013. ....................................................................................................... 9

Step 4 Create Provider Hosted APP Project in VS2013. .................................................................... 10

Step 5 Create Azure Web APP and download the publishing profile. .............................................. 14

Step 6 Create Client ID and Client Secret. ......................................................................................... 18

Step 7 Use Client ID and Client Secret created in the step above in the VS 2013 project. .............. 20

Step 8 Permissions for the APP. ......................................................................................................... 22

Step 9 Build and package the APP. .................................................................................................... 23

Step 10 Upload and Publish the APP. ................................................................................................ 29


Apps? Why not Solutions?

There has been a lot of buzz around on APPs. What are APPs? Why suddenly 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 2013 is an App.

Hosting Options in Apps Provider-hosted

SharePoint-hosted

There was another option to create an APP “Auto-hosted”, but this has been recently ruled out by

Microsoft.

Please see below for more details:

http://blogs.office.com/2014/05/16/update-on-autohosted-apps-preview-program/

http://blogs.office.com/2014/05/16/update-on-autohosted-apps-preview-program/


How apps for SharePoint Work?

In above case, App1 is a Provider-hosted or a Cloud-Hosted (Azure-Hosted) app and App2 is a

SharePoint Hosted App. So anything related to App1 will be created/Maintained in respective

locations, either on Provider or Azure servers. This makes App1 safe and secure in execution

perspective.

Now we need to look at App2.

When you create/import/add a SharePoint-Hosted App, it will create a separate sub-web under your

SP Web application. This app will be executed in a separate App Domain different from Farm App

Domain. So, as process runs under App Domains, any exceptions in Apps will not cause any

outage to SharePoint Farm.

http://3.bp.blogspot.com/-Cym3csiox1I/UNZ-4gwjwGI/AAAAAAAACZ8/nnMV1y56JBA/s1600/3.gif

http://4.bp.blogspot.com/-pnXki_QwvYM/UNaCqwaQMNI/AAAAAAAACbY/t2EjC5dxpVk/s1600/5.gif


This blog series focuses on the step by step approach for the following:

Building a Provider hosted APP using MVC hosted on O365 with Azure.

Hybrid model – Fetch data from On-Premise SQL using Entity Framework and display it on a

Provider hosted APP.

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) with Azure

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

with Office Tools.

Step 4 - Create Provider Hosted APP Project in VS2013.

Step 5 - Create Azure Web APP and download the publishing profile.

Step 6 - Create Client ID and Client Secret.

Step 7 - Use Client ID and Client Secret created in the step above in the VS 2013 project.

Step 8 - Permissions for the APP

Step 9 - Build and package the APP

Step 10 - Upload and Publish the APP


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 :

http://www.microsoft.com/office365


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.

https://portal.office.com/admin


Step 2 SharePoint Online DEV Site. You’ll have to wait for your Developer Site to finish provisioning. After provisioning is complete, refresh

the admin center page in your browser. To go to the SharePoint Online Site provisioned. Please follow

the steps below:

Go to the URL https://portal.office.com/admin.

Click on the build App to go the developer site. Refer the screen shot below:

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

developmentpurpose. Refer the screen shot below:



Step 3 Install Visual Studios 2013. Visual Studio 2013 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 2013. As shown in the screenshot below:

http://aka.ms/OfficeDevToolsForVS2013

http://aka.ms/OfficeDevToolsForVS2013


Step 4 Create Provider Hosted APP Project in VS2013.

A provider-hosted app for SharePoint consists of both an app for SharePoint that is deployed directly to a SharePoint 2013 site and a separately deployed web application.

Open the Visual Studio 2013 as Administrator.

Click File.

Go to New.

Select Project

As shown in the screenshot below:

Select the Template App for SharePoint 2013. Name the Project as SampleProviderApp. 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

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


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

screenshot below

Two projects will be created.

1. App Project – This is the provider hosted App model project.

2. MVC Project – This is the plain MVC project with SharePoint Integration.


Step 5 Create Azure Web APP and download the publishing

profile. Whenever an O365 tenant is provisioned, an Azure is also provisioned for you in the back end. To check

this, follow the steps below:

Open the O365 tenant https://portal.office.com/admin

Open a new TAB and open http://manage.windowsazure.com/. This is an azure entry point. As

shown in the screenshot below

To create a Web APP, click on the “WEB APPS” option. On the bottom of the page you will see

the option to add a “NEW” Web App. As shown in the screenshot below:


http://manage.windowsazure.com/


Click on “New”, a window will open, select the option to create a new Web Application. As

shown in the screenshot below:

Have created a Website with name “SampleProviderApp”. You can create a web site with any

name. As shown in the screenshot below.


Click on the Web App created. You will see the dashboard view of the Web App. As shown in the

screenshot below:

Click on the “Dashboard” tab, and on the “Quick Glance” section click on “Download Publishing

Profile”. As shown in the screenshot below:

Save this file for future use. As shown in the screenshot below.



Step 6 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 Azure created in STEP 5 above.

Redirect URL: This the redirect URL, to be used from STEP 5 above.

E.g.

App Domain: sampleproviderapp.azurewebsites.net

Redirect URL: https://sampleproviderapp.azurewebsites.net


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 7 Use Client ID and Client Secret created in the step

above in the VS 2013 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 and update the start page URL. 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 8 Permissions for the APP. Once the above steps are completed, it is time to deploy the solution. One final change needed in the

SharePoint App to grant permission

To grant permission for the App, double click on the “App.menifest.xml” file and select the

permission TAB. As shown in the screenshot below

Select Read Permission for the WEB. Please see the screen shot below for reference:


Step 9 Build and package the APP. Once all the above step are completed it is time to re-build the project.

After deployment the first thing to do is publish your APP in Azure. Please follow the steps below:

Right click on the project and select Publish option:

Click on “Import” on the window:

Import the publishing-profile created in Step 5 and click Import. The Publishing profile will open

as shown below:


Click on “Publish”. Please see the screen shot below for reference:

The site will open with Error, this is expected since it require SharePoint Context to run. As

shown in the screenshot below


Comment the SharePoint code as of now. Open the “HomeController.cs” file and comment he

SharePoint related context. Please see the screen shot below for reference:

Re-Build the Project and Publish the Project again. The following screen will open with the

default MVC.


Once the above is performed, now click on APP Project and select properties. As shown below:

Click “Yes” On prompt. As shown in the screenshot below

Build and create a package for the project.

Right click on the APP Project and select Publish. Please see the screenshot below for reference:


On publish your App page. Click on “Edit Button”. As shown in the screenshot below:

Enter the Client ID and Client Secret created in Step 6 and Click Finish. As shown in the

screenshot below:


Once the above is done, the Profile will be created and we are ready to deploy the APP. Click on

“Package the App”. As shown in the screenshot below:

Enter the Client ID and the URL. As shown in the screenshot below:

The App package will be created as shown below:


Step 10 Upload and Publish the APP.

After following the above mentioned steps, the project is ready to upload.

Open the DEV Site.

Click on “Apps in Testing” on the left navigation. As shown in the screenshot below:

Click on “New App to Deploy”. Please see the screen shot for more details:

Click on upload on the popup. Please see the screen shot for more details:


Browse and select the APP created and the URL to deploy to URL setting and click Deploy. As



For any changes, click on “Deploy your Web Project” on “Publish Your App” page”. As


On the Pop up window click on “Publish” button to publish the changes As shown in the screenshot

below:

Enter the credentials on the O365 login page. Please see the screen shot below for reference:


Documents

On-premise and Online connection with Provider Hosted … · On-premise and Online connection with Provider Hosted APP ... Use Client ID and Client Secret created in the step above