On-premise and Online connection with Provider Hosted APP (Part 1)

On-premise and Online connection with Provider Hosted APP (Part 1) WinWire Technologies Inc. 2350 Mission College Boulevard, Suite 925, Santa Clara, California, 95054 pg. 1 Copyright 2015 WinWire Technologies

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 pg. 2 Copyright 2015 WinWire Technologies

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/ pg. 3 Copyright 2015 WinWire Technologies

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. pg. 4 Copyright 2015 WinWire Technologies

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 pg. 5 Copyright 2015 WinWire Technologies

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 : pg. 6 Copyright 2015 WinWire Technologies

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. pg. 7 Copyright 2015 WinWire Technologies

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: pg. 8 Copyright 2015 WinWire Technologies

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: pg. 9 Copyright 2015 WinWire Technologies

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 pg. 10 Copyright 2015 WinWire Technologies

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 pg. 11 Copyright 2015 WinWire Technologies

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. pg. 13 Copyright 2015 WinWire Technologies

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: pg. 14 Copyright 2015 WinWire Technologies

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. pg. 15 Copyright 2015 WinWire Technologies

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. pg. 16 Copyright 2015 WinWire Technologies

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 pg. 18 Copyright 2015 WinWire Technologies

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): pg. 19 Copyright 2015 WinWire Technologies

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: pg. 20 Copyright 2015 WinWire Technologies

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: pg. 22 Copyright 2015 WinWire Technologies

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: pg. 23 Copyright 2015 WinWire Technologies

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 pg. 24 Copyright 2015 WinWire Technologies

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. pg. 25 Copyright 2015 WinWire Technologies

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: pg. 26 Copyright 2015 WinWire Technologies

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: pg. 27 Copyright 2015 WinWire Technologies

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: pg. 28 Copyright 2015 WinWire Technologies

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: pg. 29 Copyright 2015 WinWire Technologies

For any changes, click on Deploy your Web Project on Publish Your App page. As shown in the screenshot below: 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: pg. 31 Copyright 2015 WinWire Technologies