Azure hosted SharePoint apps using AngularJS and WebAPI – Part 3


This is final post of a three part series on exploring Azure hosted SharePoint apps using AngularJS and WebAPI.

Part 1: Why Cloud and AppModel?

Part 2: SQLAzure data via WebAPI:

Part 3: Azure hosted apps using AngularJS and WebAPI

Why AngularJS:

 Traditionally managed server-side programming used to develop enterprise apps. But now this pattern is changing in the enterprise application development industry.  It’s a change away from logic on the server side, and towards logic on the client side. To address these complex business logic Javascript should evolve from just a language to make DOM manipulations to powerful client side MVC/MVVM framework. AngularJS framework makes this shift at ease.

AngularVSKnckout

 

 

 

There are also few other frameworks on the same course but AngularJS is a clear leader owing to these facts:

1)       Dependency injection:

This is huge and my personal favorite. Using this, custom modules can be injected just like adding assemblies on the server side code. This makes life little easier design MVC/MVVM based projects with separation of concern, modularity etc. An Analogy to server side code is represented below

Step38_ServerClient

 

 

2)      HTML templating:

Over the past few years, Single Page App’s (SPA’s) are gaining of a lot of traction from front end developers and end users. HTML templating feature in Angular makes it possible to easily switch the HTML in SPA’s.

 3)      Two way binding:

Fellow Silverlight developers can understand the complexity of two-way binding using propertychange events back in the old days. But AngularJS databinding makes this right OOB

 4)      Community support:

Google continues to develop and maintain the library. Large community of developers has embraced the framework so ample support is available on Stackoverflow and AngularJS official site.

5)      Advance error handling and logging features

Why AngularJS on Provider hosted App:

 Instead of using server side code on Provider hosted app, client side code is used for a sole reason to utilize AngularJS framework. Some of the advantages include

  •  Single Page App (SPA)
  • Clean URL for easy navigation
  • Responsive design
  • No server side code
  • Scalable for further enhancements

Future enhancements may include:

1)       Adding Chrome controls to give SharePoint look and feel

2)      Authentication for WebAPI

3)      Functions to delete/update O365 and WebApi Data. etc

 

Design of this app is based on Hot Towel app from John Papa and the pluralsight course from Andrew Connell.

It requires a bit of learning to understand the AngularJS. Go through these resources for deep understanding

http://pluralsight.com/training/courses/TableOfContents?courseName=building-sharepoint-apps-spa-angularjs

http://pluralsight.com/training/courses/TableOfContents?courseName=build-apps-angular-breeze

http://www.johnpapa.net/hot-towel-angular/

SPAngular APP:

1)       Create a new provider host app project in VS2013

2)      New Project -> App for SharePoint -> Provider Hosted App -> ASP.NET Web Forms Application -> Use Windows Azure Access Control Service ->finish

Step39_ProviderHosted

3)      Now click the web project -> Manage NuGet Packages

Nugets

4)      Search “hot towel” and install HotTowel.Angular.

Nugets_HotTowel

 

5)      Main benefit of using this project template is all the heavy lifting of implementing MVC project structure, logging, exception handling, angularJS, configuration comes OOB. This makes this bootstrap project easily extensible for custom functionalities.

Step25_App3

6)      By default App project creates Query String tokens to store URL’s of Appweb , hostweb etc for reference in the future.

Step35_AppXML

7)      AngularJS navigation is based on the URL manipulations. Its little hard to implement the navigation with these long URL’s. So the idea is to use a applauncherpage to store the Querystring values to cookies for future use and redirect to the main page with clean URL.

8)      Create applauncher.html and applauncher.js. Create an empty controller and all the JS references from index.html.


<!DOCTYPEhtml><!--// ** Step 1: Add AppLauncher:  **//-->

<htmldata-ng-app="app">

<head>

<title>App Launcher</title>

</head>

<bodydata-ng-controller="applauncher as vm">

 

<!--// ** Step 2: Add Angular libs:  **//-->

<!-- Vendor Scripts -->

<scriptsrc="../scripts/jquery-2.1.1.js"></script>

<scriptsrc="../Scripts/jquery.extensions.js"></script>

<scriptsrc="../scripts/jquery.cookie.js"></script>

<scriptsrc="../scripts/angular.js"></script>

<scriptsrc="../scripts/angular-animate.js"></script>

<scriptsrc="../scripts/angular-resource.js"></script>

<scriptsrc="../scripts/angular-route.js"></script>

<scriptsrc="../scripts/angular-sanitize.js"></script>

<scriptsrc="../scripts/bootstrap.js"></script>

<scriptsrc="../scripts/toastr.js"></script>

<scriptsrc="../scripts/moment.js"></script>

<scriptsrc="../scripts/ui-bootstrap-tpls-0.10.0.js"></script>

<scriptsrc="../scripts/spin.js"></script>

 

<!-- Bootstrapping -->

<scriptsrc="../app/app.js"></script>

<scriptsrc="../app/config.js"></script>

<scriptsrc="../app/config.exceptionHandler.js"></script>

<scriptsrc="../app/config.route.js"></script>

 

<!-- common Modules -->

<scriptsrc="../app/common/common.js"></script>

<scriptsrc="../app/common/logger.js"></script>

<scriptsrc="../app/common/spinner.js"></script>

 

<!-- common.bootstrap Modules -->

<scriptsrc="../app/common/bootstrap/bootstrap.dialog.js"></script>

 

<!-- app -->

<scriptsrc="../app/admin/admin.js"></script>

<scriptsrc="../app/dashboard/dashboard.js"></script>

<scriptsrc="../app/layout/shell.js"></script>

<scriptsrc="../app/layout/sidebar.js"></script>

 

<!--// ** Step 5: Create Add references **// -->

<!-- app Services -->

<scriptsrc="../app/applauncher.js"></script>

<scriptsrc="../app/services/spappcontext.js"></script>

 

</body>

</html>

 

 

9)      In the applauncher.js call spappcontext angular service.


// ** Step 3: Add AppLauncher JS:  **//

(function(){

'use strict';

var controllerId ='applauncher';

var app = angular.module('app');

app.controller(controllerId,['common','spappcontext', applauncher]);

 

function applauncher(common, spappcontext){

var getLogFn = common.logger.getLogFn;

var log = getLogFn(controllerId);

activate();

function activate(){

common.activateController([], controllerId)

.then(function(){ log('Activated App Launcher View');});

}

 

}

})();

10)   Create SPappcontext.js and create createSPAppContext()and loadSPAppContext() functions to read the query string and store it to cookies. This also redirects to \index.html, a Single page app.


(function(){

'use strict';

var serviceId ='spappcontext';

var app = angular.module('app');

app.service(serviceId,['common','$window','$location', spappcontext]);

function spappcontext(common, $window, $location){

var getLogFn = common.logger.getLogFn;

var log = getLogFn(serviceId);

var service =this;

var spweb ={

providerUrl:'',

SPAppWebUrl:'',

SPHostUrl:''

};

service.hostWeb = spweb;

init();

function init(){

var test = jQuery.getQueryStringValue('SPHostUrl');

if(decodeURIComponent(jQuery.getQueryStringValue('SPHostUrl'))==="undefined")

{

loadSPAppContext();

}

else

{

createSPAppContext();

}

}

function loadSPAppContext(){

log('loading spcontext cookie');

service.hostWeb.providerUrl = $.cookie("ProviderUrl");

service.hostWeb.SPAppWebUrl = $.cookie("SPAppWebUrl");

service.hostWeb.SPHostUrl = $.cookie("SPHostUrl");

}

function createSPAppContext(){

log('writing spcontext cookie');

var ProviderUrl = $window.location.protocol +"//"+ $window.location.host;

$.cookie("ProviderUrl", ProviderUrl,{ path:'/'});

var appWebUrl = decodeURIComponent(jQuery.getQueryStringValue('SPAppWebUrl'));

$.cookie("SPAppWebUrl", appWebUrl,{ path:'/'});

var url = decodeURIComponent(jQuery.getQueryStringValue('SPHostUrl'));

$.cookie('SPHostUrl', url,{ path:'/'});

$window.location.href = ProviderUrl +"/index.html";

}

}

})();

11)    Now add host web SP JS libraries to index.html to for make JSOM calls against host web.


<!--// ** Step 7: Add SharePoint libs for JSOM calls **// -->

<!--SharePoint-->

<scriptsrc="https://spbreed.sharepoint.com/sites/dev/_layouts/15/SP.RunTime.js"></script>

<scriptsrc="https://spbreed.sharepoint.com/sites/dev/_layouts/15/SP.js"></script>

<scriptsrc="https://spbreed.sharepoint.com/sites/dev/_layouts/15/SP.RequestExecutor.js"></script>

Now add the following code to web.config remove the static file issue on described here http://rainerat.spirit.de/2012/09/03/SharePoint-2013-App-HTTP-Error-405.0/

<!--// ** Step: 8: To Resolve IIS Static file issue**//-->

<system.webServer>

<modulesrunAllManagedModulesForAllRequests="true"/>

<handlers>

<addname="AspNetStaticFileHandler" path="*" verb="*" type="System.Web.StaticFileHandler" />

<addname="StaticHTML" path="*.html" verb="GET,HEAD,POST,DEBUG,TRACE" modules="StaticFileModule" resourceType="File" requireAccess="Read" />

</handlers>

</system.webServer>

[/xml]

12)   Now use JSOM to call host web and REST calls to WebAPI. $q.defer() objects are used to  pass promise to the calling function. This enables clients to complete the DOM structure without waiting for results.( Host web contains a demo contact list with title “DemoCustomer”
<pre>

// ** Step 6: Create Datacontext Service **//

(function(){

'use strict';

&nbsp;

var serviceId ='datacontext';

angular.module('app').factory(serviceId,['$rootScope','$resource','spappcontext','common', datacontext]);

&nbsp;

function datacontext($rootScope,$resource, spappcontext,common){

var $q = common.$q;

&nbsp;

&nbsp;

var service ={

getPeople: getPeople,

getMessageCount: getMessageCount,

getUserName: getUserName,

getCustomers: getCustomers,

getSPContacts: getSPContacts

};

&nbsp;

return service;

&nbsp;

function getCustomers(){

&nbsp;

var dfd = $q.defer();

var webApi = $resource('http://customerwebapi.cloudapp.net/api/Customer/:Id',{ Id:"@Id"},{ update:{ method:'PUT'}});

//   var webApi = $resource('http://localhost/AppWeb/api/Customer/:Id', { Id: "@Id" }, { update: { method: 'PUT' } });

webApi.query(function(data){

var customers = data;

customers.splice(4,847)

dfd.resolve(customers);

},function(error){

console.log(error);

dfd.reject(error);

});

return dfd.promise;

}

&nbsp;

function getUserName(){

&nbsp;

var dfd = $q.defer();

&nbsp;

// Standard function to get hostweb

var ctx =new SP.ClientContext(spappcontext.hostWeb.SPAppWebUrl);

var factory =new SP.ProxyWebRequestExecutorFactory(spappcontext.hostWeb.SPAppWebUrl);

ctx.set_webRequestExecutorFactory(factory);

var hostWebctx =new SP.AppContextSite(ctx, spappcontext.hostWeb.SPHostUrl);

&nbsp;

var appWeb = ctx.get_web();

var hostWeb = hostWebctx.get_web();

var currentAppWebUser = appWeb.get_currentUser();

var currentHostWebUser = hostWeb.get_currentUser();

&nbsp;

ctx.load(appWeb);

ctx.load(hostWeb);

ctx.load(currentAppWebUser);

ctx.load(currentHostWebUser);

&nbsp;

ctx.executeQueryAsync(function(){

var userName = currentAppWebUser.get_title();

dfd.resolve(userName);

},function(sender, args){

console.log(args.get_message()+" "+ args.get_stackTrace());

dfd.reject(args.get_message());

});

&nbsp;

return dfd.promise;

}

&nbsp;

function getSPContacts()

{

var dfd = $q.defer();

// Standard function to get hostweb

var ctx =new SP.ClientContext(spappcontext.hostWeb.SPAppWebUrl);

var factory =new SP.ProxyWebRequestExecutorFactory(spappcontext.hostWeb.SPAppWebUrl);

ctx.set_webRequestExecutorFactory(factory);

var hostWebctx =new SP.AppContextSite(ctx, spappcontext.hostWeb.SPHostUrl);

&nbsp;

var appWeb = ctx.get_web();

var hostWeb = hostWebctx.get_web();

&nbsp;

var ContactList = hostWeb.get_lists().getByTitle('DemoCustomer');

var contactListItems = ContactList.getItems(SP.CamlQuery.createAllItemsQuery());

ctx.load(ContactList);

ctx.load(contactListItems);

ctx.executeQueryAsync(function(){

var enumerator = contactListItems.getEnumerator();

var SPContacts =[];

while(enumerator.moveNext()){

var currentItem = enumerator.get_current();

SPContacts.push({"FirstName": currentItem.get_item('FirstName'),"LastName": currentItem.get_item('Title')});

}

var SPContactsObj = SPContacts;

&nbsp;

dfd.resolve(SPContactsObj);

},function(sender, args){

console.log(args.get_message()+" "+ args.get_stackTrace());

dfd.reject(args.get_message());

});

return dfd.promise;

}

}

})();

13)   Now modify dashboard.js to call data service functions defined above and add spinner while waiting for results.


(function(){

'use strict';

var controllerId ='dashboard';

angular.module('app').controller(controllerId,['common','datacontext', dashboard]);

&nbsp;

function dashboard(common, datacontext){

var getLogFn = common.logger.getLogFn;

var log = getLogFn(controllerId);

&nbsp;

var vm =this;

vm.news ={

title:'Hot Towel Angular',

description:'Hot Towel Angular is a SPA template for Angular developers.'

};

vm.messageCount =0;

vm.people =[];

vm.SPContacts =[];

vm.Customers =[];

vm.title ='Dashboard';

vm.busyMessage ='Please wait ...';

vm.isBusy =true;

vm.spinnerOptions ={

radius:40,

lines:7,

length:0,

width:30,

speed:1.7,

corners:1.0,

trail:100,

color:'#F58A00'

};

&nbsp;

activate();

&nbsp;

function activate(){

var promises =[getMessageCount(), getPeople(), getSPContacts(), getCustomers()];

common.activateController(promises, controllerId)

.then(function(){ log('Activated Dashboard View');});

}

&nbsp;

function getCustomers(){

toggleSpinner(true);

return datacontext.getCustomers().then(function(data){

toggleSpinner(false);

return vm.Customers = data;

});

}

&nbsp;

function getMessageCount(){

return datacontext.getMessageCount().then(function(data){

return vm.messageCount = data;

});

}

&nbsp;

function getPeople(){

return datacontext.getPeople().then(function(data){

return vm.people = data;

});

&nbsp;

}

&nbsp;

function getSPContacts(){

&nbsp;

return datacontext.getSPContacts().then(function(data){

return vm.SPContacts = data;

});

&nbsp;

}

&nbsp;

function toggleSpinner(on){ vm.isBusy = on;}

}

})();

14)   Now add remote endpoint http://customerwebapi.cloudapp.net to the appmanifest.xml

Step36_AppXML_Remoteendpoint

15)   Now navigate to /_layouts/15/appregnew.aspx to generate client Id and client secret. Note down these values.

Step28_AppregNew

16)   Now right click the web project and select publish to select a new publishing profile

Step29_PublishingProfile

17)   Seed the values of the ClientID and Client Secret noted earlier.

Step30_PublishingProfile

18)   Now select the created profile and deploy to Azure Website.

Step31_PublishingProfile

19)   Add a site name and click create

Step32_PublishingProfile

20)   Keep the default settings and click publish.

Step33_PublishingProfile

21)    Now package the app and upload the app to the Office 365 site.

Step34_PublishingProfile

22)   Now clicking the app will navigate to the provider hosted app with displays data from both Office 365 and WebAPI.

Step2_Responsive

This project is hosted in codeplex for download: https://spangular.codeplex.com/ 

Advertisements

Azure hosted SharePoint apps using AngularJS and WebAPI – Part 2


This is second post of a three part series on exploring Azure hosted SharePoint apps using AngularJS and WebAPI.

Part 1: Why Cloud and AppModel?

Part 2: SQLAzure data via WebAPI:

Part 3: Azure hosted apps using AngularJS and WebAPI

SQLAzure data via WebAPI:

This is the continuation of this post on creating Azure hosted enterprise apps using AngularJS and WebAPI.

WebAPI is a framework for building RESTful applications which enables client browsers to tap in to database using HTTP  GET, POST, DELETE requests.  This involves following steps:

Note: Following steps require valid Azure subscription. Microsoft offers free credits for MSDN subscribers. http://azure.microsoft.com/en-us/pricing/member-offers/msdn-benefits-details/

1)       Create a SQL server instance in Azure management portal https://manage.windowsazure.com -> SQL Databases -> New

Step4_SQLAzure1

 

2)      Create SQL Database. I am using AdventureWorksLT2012 database for this demoapp. This is downloaded from http://msftdbprodsamples.codeplex.com/releases/view/55330 . After restoring this app on local instance, create a database in SQLAzure with the same name.

Step5_SQLAzure2

3)      Once the database is created, the properties can be accessed by clicking through it.

Step6_SQLAzure3

4)      Now migrate the SQL DB from local instance to SQL azure using SQLAzure Migration Wizard. http://sqlazuremw.codeplex.com/

Step7_SQLAzure4

5)      SQLAzure supports only a subset of SQL features. Some of the limitations are listed here

http://msdn.microsoft.com/en-us/library/azure/ff394115.aspx . XML Schema collections are not supported so uncheck it.

Step8_SQLAzure5

6)      Now click next to generate SQL script to create database. Script displays non supported items in RED.

Fix these items and re-generate the script until all these errors are cleared. Follow this article to resolve some of the most common errors http://oakleafblog.blogspot.com/2010/01/using-sql-azure-migration-wizard-v313.html

Step9_SQLAzure6

7)      Now run this script on SQLAzure instance by keying the connection details of Azure DB created earlier

Step10_SQLAzure7

8)      Now connect to SQLAzure using SSMS

Step3_FinalDatabase

9)      Now to expose the database via WebAPI.

To do this install Azure SDK by following this link

http://msdn.microsoft.com/en-us/library/ff687127.aspx

Install Entity Framework Powertools to convert SQL objects to .net entities

http://visualstudiogallery.msdn.microsoft.com/72a60b14-1581-4b9b-89f2-846072eff19d

10)   Create new “Windows Azure Cloud Service” project. This creates a project with web role. Refer “Cloud Services” section in the article http://azure.microsoft.com/en-us/documentation/articles/fundamentals-introduction-to-azure/ to understand more on this. Basically this project creates a VM and IIS in Azure to host WebAPI web services on deployment.

Step11_WebApi1

 

11)    Now Right Click WebRole project -> Entity framework -> Reverse Engineer Code First and connect to SQLAzure DB created earlier. This will generate all the required entities.

Step12_WebApi2

12)   This generates table, table mapping and database context classes.

Step13_WebApi3

13)   Now create a controller of customer class using Scaffolding. Scaffold templates are used to generate code for basic CRUD operations for WebApi project against database using DB entity objects generated earlier.

 

Step14_WebApi4

Step15_WebApi5

 

Step16_WebApi6

 

14)   Add  navigate to App Start -> WebAPIConfig.cs and add the following code highlighted under step 2 to enable JSON


public static void Register(HttpConfiguration config)

{

// ** Step: 2: Enable JSON **//

// Web API configuration and services

var json = config.Formatters.JsonFormatter;

json.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;

config.Formatters.Remove(config.Formatters.XmlFormatter);

// Web API routes

config.MapHttpAttributeRoutes();

&nbsp;

config.Routes.MapHttpRoute(

name: "DefaultApi",

routeTemplate: "api/{controller}/{id}",

defaults: new { id =RouteParameter.Optional }

);

// ** Step: 3: Enable CORS **//

&nbsp;

var cors =newEnableCorsAttribute("*", "*", "GET, POST, OPTIONS");

config.EnableCors(cors);

}

}

15)   Now Right Click WebRole Project -> Manage Nuget Packages ->Type Cors and install the WebAPI 2.1 cross origin support. This API is used to enable cross origin services for the WebAPI.

Step23_App1

Nugets_Cors

16)   Now add the code to highlighted under “step 3” enable CORS

17)   This will generate required WebApi controller to service Read, Delete and update operations. Right click WebApi project and publish.

Step17_WebApi7
Step18_WebApi8

18)   This will take few minutes to spin up a VM and publish these resources in Azure. Once the deployment is complete, data can be accessed from WebApi service.

Step19_WebApi9

19)   Now click the new cloud service created via Azure management portal

Step20_WebApi10

20)   Navigate to “Instances” tag and click “Connect” button to remote into VM

Step21_WebApi11

21)   Install “IP and Domain restrictions” role on the VM

Step26_IPRestriction

22)   Now open IIS and Navigate to WebAPI service web and click “IP Address and Domain restrictions” and add all the client IP’s which requires access to WebAPI.

 

Step27_IpFiltering

This project is hosted in codeplex for download: https://spangular.codeplex.com/ 

 

 

 

 

Azure hosted SharePoint apps using AngularJS and WebAPI – Part 1


This is first post of a three part series on exploring Azure hosted SharePoint apps using AngularJS and WebAPI.

Part 1: Why Cloud and AppModel?

Part 2: SQLAzure data via WebAPI:

Part 3: Azure hosted apps using AngularJS and WebAPI

 Why Cloud?

After SharePoint conference 2014 I became a supporter of cloud based infrastructure and app model. With the sophistication and attractive pricing models from cloud providers, most of the IT enablers started thinking about cloud fork lifts and migrating the existing apps, DB’s and other artifacts to cloud.

Why AppModel?

Over the past few years, App model rapidly became a standard in developing apps and adopted by few big names such as Facebook, Twitter, Dropbox, LinkedIn and yes Microsoft. App model enables custom apps to consume these services via REST\O-Data interfaces.  App authorization process is fairly similar across all these platforms where app registration process generates AppID and AppSecret. Then these custom apps call the services with these tokens for initial authorization.

Slide1

What is different with SharePoint App Model?

Though all the other services provides JavaScript libraries to consume their resources virtually anywhere on the internet with basic xxx.client.authenticate() function, SharePoint\Office365 JSOM models requires SP.ClientContext() with appweb reference to access its resources. Behind the scenes it downloads ~appweburl/_layouts/15/AppWebproxy.aspx (server side code) in to an IFrame to check the request origin. If the client call originates from startpage which is not registered by the app, Office365 doesn’t service the request. This start page could be anything ranging from ASPX or PHP which supports HTTP GET and POST.

 


<?xml version="1.0" encoding="utf-8"?>

<!--Published:70EDFC97-B41D-43C5-B751-7C00AD999804-->

<!--Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9-->

<App xmlns="http://schemas.microsoft.com/sharepoint/2012/app/manifest" Name="SharePointApp4" ProductID="{bd366f4e-9a41-4486-9328-476097e36187}" Version="1.0.0.0" SharePointMinVersion="16.0.0.0">

<Properties>

<Title>SharePointApp4</Title>

<StartPage>https://spangular.azurewebsites.net/?{StandardTokens}</StartPage>

</Properties>

<AppPrincipal>

<RemoteWebApplication ClientId="929f258f-1a01-44ff-b7aa-57ff32755db9" />

</AppPrincipal>

</App>

[/xml]

 

Azure based enterprise Apps:

But still there are there are quite a few options to design cloud hosted apps. This article explains azure hosted enterprise app integrated with SQL azure. Basic architecture is shown below.

AzureHostedApps_Architecture

Some of the features are

1)       App is Hosted on Azure website

2)      Consumes WebApi services from SQL azure

3)      Utilizes AngularJS framework to create SPA’s

4)      Clean URL for easy navigation

5)      Responsive design using Hot Towel solution from John Papa

6)      No server side code

7)      Scalable for further enhancements

Step1_Final

 

 

Step2_Responsive

 

Deploying MVC5 based provider hosted apps for On-premise SharePoint 2013


Why provider hosted apps:

IMHO – Microsoft is in the vision of making SharePoint as a port of entry to other web based appliances such as ASP.Net sites. And SharePoint Apps hold the key for authentication between SharePoint and apps either through OAuth tokens or S2S trusts.

SharePoint hosted apps works great for browser driven utilities  which works via Javascripts and CSOM. In the case of building three tier applications with Database entities, provider hosted apps is a better option and running these apps in different environment brings other distinct advantages such as App code isolation, easier upgrades independent of SharePoint versions etc.

How this model works:

Provider hosted Sharepoint apps supports authentication via S2S (Server to Server) trust. S2S is established between web server which hosts the remote web app and web server which hosts the SharePoint via X.509 server certificate. Remote webapp authenticates the user independent of SharePoint authentication and creates an access token with user identity and app token. This access token is then signed by the server certificate and validated in host SharePoint environment when executing CSOM or REST calls. SharePoint host trusts all the calls received by trusted security token providers.

For more details refer this excellent book by Scot Hillier and Ted Pattison

Why MVC:

At the heart of MVC is Separated Presentation layer. The idea behind Separated Presentation is to make a clear division between domain objects that model our perception of the real world, and presentation objects that are the GUI elements we see on the screen. Domain objects should be completely self contained and work without reference to the presentation, they should also be able to support multiple presentations, possibly simultaneously. More detailed explanation here

Most of modern day ASP.Net apps ar developed using MVC patterns to support rapid UI changes and better unit testing scenarios. Here is a simple tutorial to understand MVC basics.

Implementation:

This article does not cover how to set up App management Service infrastructure on your SharePoint App stores. Follow this informative article by Mirjam to set up App domain.

Deployment of provider hosted apps involves the listed steps.

1)Preparing remote App server

2)Preparing SharePoint server

3)Setting STS trust

4)Create VS 2013 MVC app

5)Deployment

1)Preparing remote App server

1.1 Create new host entry:

Add a new Host (A) entry on DNS with the IP  of Server hosting remote web app. (sp2013apps.gsi.local)

Ping SP2013apps.gsi.local should resolve to the IP. Else do ipconfig /flushdns to reset the DNS cache

DNS

1.2: Install Management service delegate:

Remote web app deployment is done through WebDeploy. To support web deploy IIS should have “Management Service Delegate” features. Follow this blog from ScottGu to read  more on this. In the essence download webdeploy 3.5 from this link and select all the features while installing.

Webdeploy 3.5

service delegate

You should see this icon. Now double-click the Management Service Delegation  -> Edit Feature Settings -> Allow administrators to bypass rules option within this dialog box.  This will allow those with Administrator accounts on the server to bypass the delegation capabilities of the Web Management Service and perform actions using their administrator capabilities:

Bypass rules

Now click  Management Service, stop the service and check “Enable Remote Connections” checkbox to enable remote deployments.  You can optionally choose which IP address and port the management service runs on – as well as what client IP addresses are allowed to connect with it.  You can tweak these settings to lock down who can access the deployment service.

remote connections

1.3: Apply SSL to default website:

Since this is a Dev environment , SelfSSL 1.0 is used to generate the SSL certificates.

Thanks to Thomas Balkestahl for writing this blogpost using SelfSSL.

Download and install IIS 6.0 Resource Kit

Now add a new 443 port  binding to Default Website443 IIS

Open the SelfSSL utility installed in the last step

SelfSSL

And run the following script to apply SelfSSL to the Default website.

selfssl.exe /N:CN=SP2013apps.gsi.local /K:1024 /V:365 /S:1 /P:443

Where /S:1 key represents App Site ID of default website (Site -> Advance Settings -> General ->ID)

/V switch for Validity

 

SSL_Default

Once the certificate is installed on your IIS, add new  SSL binding on 443 port with the host name registered before

IIS_SSL_apps

Now navigating to https://sp2013apps.gsi.local should bring IIS 8 logo page as shown below.

IIS8_logo

2)Preparing SharePoint server

Now repeat the steps 1.1 & 1.3 to SSL SharePoint WebApp.

selfssl.exe /N:CN=SP2013.gsi.local /K:1024 /V:365 /S:682683733 /P:443

SSL_SP2013

where SP2013.gsi.local is the host name for SharePoint web app and /S:682683733 is the ID of SharePoint Webapp

Now add a new 443 HTTPS binding with sp2013.gsi.local as the host name.

2.2: Add new AAM:

Now navigate Central Admin -> Alternate Access Mapping -> Change AAM collection to SharePoint web app -> Click Edit public URL and add https://sp2013.gsi.local -> Save

AAM_PublicURL

Click Add Internal URL -> http://sp2013.gsi.local -> save

AAM_internal

Now perform IISRESET and wait few seconds until AAM timer job updates the SharePoint routing tables.

Now navigating to https://sp2013.gsi.local should bring your home page.

3)Setting STS trust

Server to Server trust is one of the crucial pieces of provider hosted apps. SSL certificate from remote web server added as “trusted service consumer” in SharePoint environment.

Export the certificate from the remote web server and copy to Sharepoint environment

Open IIS -> Server Certificates

Server_certs

Double click the SSL generated in last step -> details -> Copy to file -> Donot export -> DER encoded

-> C:\Certs\selfsignedApps.cer

Now Copy the certificate to SharePoint server (C:\Certs) and run the following powershell script to establish trust

$publicCertPath = "C:\certs\selfsignedApps.cer"
$issuerId = [System.Guid]::NewGuid().ToString()
$spurl ="https://sp2013.gsi.local"
$spweb = Get-SPWeb $spurl
$realm = Get-SPAuthenticationRealm -ServiceContext $spweb.Site
$certificate = Get-PfxCertificate $publicCertPath
New-SPTrustedRootAuthority -Name "<strong>Hightrust MVC Cert</strong>" -Certificate $certificate
$fullIssuerIdentifier = $issuerId + '@' + $realm
New-SPTrustedSecurityTokenIssuer -Name $issuerId -Certificate $certificate -RegisteredIssuerName $fullIssuerIdentifier –IsTrustBroker

Now check for the certificate at Central Administration -> Security -> Manage Trust

New certificate “Hightrust MVC Cert” is added to the trusted stores as expected.

Trust

To avoid SSL errors and proper authentication between the apps, add both SharePoint SSL and Remote web server SSL to trusted root stores.

Double click .cert file -> Install Certificate -> Local Machine -> Browse -> Trusted Root Certification Authorities -> OK

This will import the certificates.

Import_success

Now we have all the frameworks and infrastructure required for provided hosted apps

4)Create VS 2013 MVC app

Now generate the server certificate of remote web server in PFX format.

Open IIS -> Certificates

Right click the SP2013apps.gsi.local -> export -> save with .pfx extension and password

Note down issuer ID by running following powershell script

$issuerId = [System.Guid]::NewGuid().ToString()
$issuerId

 

Install Visual Studio 2013.

Click New Project -> App for SharePoint 2013

VS_1

Select ASP.NET MVC web app

VS_ProviderHostOption

Now select the PFX certificate generated in the last step. Provide password and Issuer ID

VS_cert

This will create a new MVC project.

MVC_Solution structure

Now Visual studio created two projects with in the same solution. MVCApp1 is the SharePoint App and MVCApp1Web is the remote webapp. Only artifact of the MVCApp1 is the appmanifest.xml. This is similar to what feature.xml to WSP. We provide the version, permission and startpage details of the app.

MVC_APpmanifest

Make sure Windows authentication is enabled for web project

MVC_WindowsAuth

Now you can directly debug the app by pressing f5. Now login to app using your windows credentials and trust the app. This will lead to sample app hosted from VS2013 if all the settings are right.

MVC_Sample

Database driven MVC app:

Creating an MVC App involves

Creating a database model entity using Entity Framework Data Model

This is the schema of customer table used in MVC app.

DB_Schema

To create an entity model for this database

Right click model -> Add new item -> ADO.Net Entity datamodel -> Generate from Database and connect to required Database objects

MVC_DB MVC_SelectTabe

Now this will generate Model entities and classes to support CRUD operations with the database

MVC_Model

Adding a controller and View for Model via scaffolding

Scaffolding is a code generation framework for ASP.NET Web applications. Visual Studio 2013 includes pre-installed code generators for MVC and Web API projects. You add scaffolding to your project when you want to quickly add code that interacts with data models. Using scaffolding can reduce the amount of time to develop standard data operations in your project.

Now right click controller -> Add -> New Scaffolding Item -> Select MVC5 Controller with views using entity frame work

MVC_Scafold

This will generate all controller and View files. View files are in .cshtml format. This can be edited to suit our design. (More on this in next blog post)

MVC_Views

Changing the MVC routing

With MVC there is no direct URL access. Its all view containers is what we need. And the URL re-direction logics are stored in the RootConfig.cs located under App_Start folder

Default controller is changed to Customer. to route all the default request to MVCApp1\Customer page

MVC_rootconfig

5)Deployment

Deployment involves App deployment and Website deployment

App Deployment:

Before publishing the app, a new client ID for the App should be generated form the app site. SharePoint uses this client ID to validate the App file while installing. Navigate to appregnew.aspx

Navigate to https://sp2013.gsi.local/sites/apps/ and generate AppId

MVC_Appreg new.

Right click the solution and click publish and select Package the app. And enter the client ID and the remote site URL.

MVC_pub_settings

MVC_SPApp

This will generate an MVCApp1.app file. This is analogous to .wsp file.

On opening the .app file with good old WINRAR all the resources can be extracted out. And verify appmanifest.xml .

MVC_ManifestPic

Appmanifest

Now Install the app in App site.

WebSite Deployment:

Now go back to Publish page and click “Deploy your Web Project”. Select a new profile and enter the details of remote web server and client ID settings.

This will deploy the webapp to remote server IIS.

MVC_Publish MVC_SPApp

Now add the installed app from any site and trust it. On clicking the app page will be redirected to index page https://sp2013apps.gsi.local/MVCApp1/customer/

MVC_Index

Now we have a complete set of pages that perform simple CRUD operations for Customer entity.