Build Secure Cloud-Hosted Apps for SharePoint 2013

@dannyjessee#SPSDC | June 7, 2014

Housekeeping…

• Remember to fill out session and event evaluations…

• Phasers set to stun, mobile devices set to silent…

• You must be present to win at the wrap-up…

Thanks to our Sponsors!!!

Join us at #SharePint sponsored by Metalogix at Clyde’s of Chevy Chase in the RaceCar Bar Downstairs

Why? To network with fellow SharePoint professionalsWhat? SharePint!!!When? 5:30 PMWhere? RaceCar Bar Downstairs5441 Wisconsin AveChevy Chase, MD 20815

Thanks to?Metalogix!

We’re hiring!fulcrumco.com/careers

Passed examsSharePoint 201370-331, 70-33270-488, 70-489

djessee@fulcrumco.com

Sr. SharePointDeveloperFulcrumWashington, DC metro area

Who Am I?

Photo courtesy Marie Sly | mariesly.com

@dannyjessee

Agenda SharePoint 2013 app model Types of apps for SharePoint SharePoint app development tools Accessing SharePoint data remotely Authentication and authorization for apps Deploying provider-hosted apps

Before we begin… How many of you are:

Developers? System administrators? IT pros? Others?

Who is on-premises and who is in the cloud?

Who has already worked with SharePoint 2013?

Is anyone already building apps for SharePoint?

SharePoint 2013 app model

Apps for SharePoint (*.app) New mechanism to deploy code-based customizations to the SharePoint platform Contains an XML app manifest, installed to a specific target site (host

web)

Self-contained, isolated pieces of functionality Can add basic files (e.g., CSS, JavaScript), create pages and lists in

isolated storage (app web) within SharePoint Can be sold to the public through the Office Store or deployed

internally to an App Catalog site

No server-side code runs inside SharePoint

Apps for SharePoint (*.app) App manifest file (AppManifest.xml)

Included in every app for SharePoint Defines the app’s most important properties

Title, Name, Version, Icon, Start page, Query string parameters, Hosting type

{StandardTokens} in query string SPHostUrl, SPAppWebUrl, SPClientTag, SPLanguage,

SPProductNumber Permissions the app is requesting

Apps for SharePoint (*.app) “If you can build a web application, you can build an app for SharePoint”

Use any language or technology stack HTML, JavaScript, PHP, .NET

An app’s footprint could include: Presentation logic in HTML and JavaScript that runs on the client Business logic in .NET that runs in Windows Azure Data that is stored in SQL Azure Or, an app in PHP running on Apache could have data in MySQL!

Types of apps for SharePoint

Types of apps for SharePoint SharePoint-hosted

Good for simple solutions, 100% client-side code Can be deployed on-premises or to SharePoint Online in Office 365

Cloud-hosted (Provider-hosted) Deployed to the cloud or a different on-premises server (not

SharePoint) Also includes Autohosted apps (preview ends June 30)

Hybrid approaches possible: some components in SharePoint with others in the cloud

SharePoint-hosted apps App components hosted in isolated app domain

Can use JavaScript, HTML, CSS, declarative markup only – no server-side code

Cloud-hosted/Provider-hosted apps App components can be hosted anywhere (cloud or on-premises) Including Windows Azure Web Sites

Authorized using OAuth or the JavaScript cross-domain library

Can use ANY implementation language (ASP.NET, PHP, etc.)

Notes about Autohosted apps Autohosted Apps Preview program will end June 30 After this date, you will no longer be able to

create new Autohosted apps for SharePoint Existing apps will not be affected or shut down http://blogs.office.com/2014/05/16/update-on-a

utohosted-apps-preview-program/

Convert your Autohosted app to a Provider-hosted app: http://

msdn.microsoft.com/EN-US/library/office/dn722449%28v=office.15%29.aspx

Host web, app web, remote web Each app is deployed to a SharePoint site known as the host web

App web provisioned with app installation https://[app prefix][app hash].[app domain]/[relative site URL]/[app

name] Required for SharePoint-hosted apps, optional for cloud-hosted apps Each app installation has its own unique URL

Cloud-hosted apps also have a remote web Server-side code can run here

Host web, app web, remote web

Image from http://msdn.microsoft.com/en-us/library/fp179925.aspx

App user experiences Immersive full page app

At least one required in every app—landing page; can still use SharePoint chroming; lives in remote web for a cloud-hosted app

Part app Like a web part; hosted in an IFRAME (can point to content in remote

web)

UI custom actions (declarative)

Image from http://msdn.microsoft.com/en-us/library/fp179930.aspx

Styling immersive full page apps Client chrome control can give your full page app the basic look and feel of the SharePoint host web$(document).ready(function () { hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl")); var scriptbase = hostweburl + "/_layouts/15/"; $.getScript(scriptbase + "SP.UI.Controls.js", renderChrome);});

function renderChrome() { var options = { "appIconUrl": "", "appTitle": "CSOM/JSOM/REST demos", }; // Place the chrome control in the <div> with ID="chrome_ctrl_placeholder" var nav = new SP.UI.Controls.Navigation("chrome_ctrl_placeholder", options); nav.setVisible(true);}

Styling immersive full page apps Full page app with and without chrome control

SharePoint app development tools

App development tools “Napa” Office 365 development tools

Browser-based development environment (SharePoint-hosted apps only)

Office dev tools for Visual Studio 2012/2013

Office dev tools for Visual Studio Available for Visual Studio 2012 and 2013 Download at:

http://aka.ms/officedevtoolsforvs2013 http://aka.ms/officedevtoolsforvs2012 VS 2012 users should also download the

AppForSharePointWebToolkit package: http://www.nuget.org/packages/AppForSharePointWebToolkit

Latest version: “Office Developer Tools for Visual Studio 2013 – March 2014 Update” Allows you to target your app exclusively to SharePoint Online in

Office 365

Office dev tools for Visual Studio <F5> deploy/debug experience

IIS Express/LocalDB

Add app components to project

Cloud-hosted apps include ASP.NET web project Web Forms and MVC supported (can convert existing projects to

apps)

Office dev tools for Visual Studio

Office dev tools for Visual Studio

Office dev tools for Visual Studio ASP.NET web application projects include classes to handle app AuthN and AuthZ (using OAuth)

SharePointContext.cs Functions to manage SharePoint context across page requests Can create user and/or app contexts for app and/or host webs

TokenHelper.cs Functions to create and obtain ContextToken and AccessToken

objects

On other platforms, you have to do the OAuth implementation and manage tokens yourself

Office dev tools for Visual Studio Convert existing web application project to an App for SharePoint project

Demo:Hello World app using Visual Studio with Office Dev Tools

Accessing SharePoint data remotely

Accessing SharePoint data remotely .NET Managed client object model (CSOM) JavaScript client object model (JSOM) REST endpoints with OData

.NET Managed client object model When you create an App for SharePoint 2013 project, references to the .NET Framework assemblies are automatically added to the project {SharePointRoot}\ISAPI\Microsoft.SharePoint.Client.Runtime.dll {SharePointRoot}\ISAPI\Microsoft.SharePoint.Client.dll

Other CSOM assemblies you may need: …DocumentManagement.dll, …Publishing.dll, …Search.dll, …

Taxonomy.dll, …UserProfiles.dll

Add the following statement to your code-behind:

using Microsoft.SharePoint.Client;

.NET Managed client object modelFollow these steps:

1. Create a ClientContext object, passing in the URL of a SharePoint site

2. Call the Load() function to build the request query for any value properties your application needs to access

3. Execute the query by calling the ExecuteQuery() function

var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);using (var clientContext = spContext.CreateUserClientContextForSPHost()){ clientContext.Load(clientContext.Web, web => web.Title); clientContext.ExecuteQuery(); Response.Write(clientContext.Web.Title);}

JavaScript client object model library Add a reference to the JavaScript client object model (JSOM) using HTML <script> tags Reference the host web URL because the app web may not exist in

every scenario in cloud-hosted apps

Reference the following libraries, in this order:

1. ASP.NET AJAX library (MicrosoftAjax.js)2. SP.Runtime.js file3. SP.js file4. SP.RequestExecutor.js file (cross-domain library)

JavaScript client object model library<script src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"></script><script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script><script type="text/javascript">var hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));var appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));var scriptbase = hostweburl + "/_layouts/15/";$.getScript(scriptbase + "SP.Runtime.js", function () { $.getScript(scriptbase + "SP.js", function () { $.getScript(scriptbase + "SP.RequestExecutor.js", execRequests); }); });

JavaScript client object model libraryfunction execRequests() { var clientContext = new SP.ClientContext(appweburl); var appWeb = clientContext.get_web(); appWebListColl = appWeb.get_lists(); clientContext.load(appWebListColl); clientContext.executeQueryAsync(onAppWebGetListSuccess, onJSOMError);

var factory = new SP.ProxyWebRequestExecutorFactory(appweburl); clientContext.set_webRequestExecutorFactory(factory); var appContextSite = new SP.AppContextSite(clientContext, hostweburl); var hostWeb = appContextSite.get_web(); hostWebListColl = hostWeb.get_lists(); clientContext.load(hostWebListColl); clientContext.executeQueryAsync(onHostWebGetListSuccess, onJSOMError);}

REST endpoints with OData SharePoint 2013 provides a Representational State Transfer (REST) web service that leverages the OData protocol (http://odata.org)

Construct HTTP requests to specially crafted URLs to access and manipulate SharePoint data Responses to these HTTP requests can be returned in Atom or JSON

format

Can be used with CSOM, JSOM, or any other stack No external assembly references required!

REST endpoints with OData

URL Returns_api/web/title The title of the current site_api/web/lists/getByTitle('Announcements') The Announcements list_api/web/lists/getByTitle('Announcements')/fields

The columns in the Announcements list

_api/web/lists/getByTitle('Tasks')/items The items in the Tasks list_api/web/siteusers The users in the site_api/web/sitegroups The user groups in the site_api/web/GetFolderByServerRelativeUrl('/Shared Documents')

The root folder of the Shared Documents library

_api/web/GetFolderByServerRelativeUrl('/Plans')/Files('a.txt')/$value

The file a.txt from the Plans library

Table adapted from http://msdn.microsoft.com/en-us/magazine/dn198245.aspx

Example read (GET) request URLs

REST endpoints with OData To get the title of my SharePoint site, construct an HTTP GET request to the following URL:https://djsp.sharepoint.com/_api/web/title

Returned data (if authorized):<?xml version="1.0" encoding="UTF-8"?><d:Title xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:gml="http://www.opengis.net/gml"xmlns:georss="http://www.georss.org/georss" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">Danny's O365 Dev Tenant</d:Title>

CSOM vs. REST Generally a matter of personal preference

CSOM REST

Less “chatty” (requests can be batched) More “chatty” (no request batching)

Handles the “plumbing” of calls to SharePoint

Requires you to construct and manage your own HTTPRequest/Response objects

Requires CAML for queries Uses standard OData vocabularies

Can interact with managed metadata taxonomies and workflows

No support for interacting with managed metadata taxonomies and workflows

Easy to leverage third-party libraries (jQuery)

Can be debugged using Fiddler

No external assembly references required

Table adapted from http://www.andrewconnell.com/blog/sharepoint-2013-csom-vs.-rest-...-my-preference-and-why

Authentication and authorization for apps

App authentication/authorization We can’t interact with data stored in SharePoint unless we (our apps) are authenticated to SharePoint and authorized to access data Authentication: Are you who you say you are? Authorization: Do you have permission to do what you are trying to

do?

How can cloud-hosted apps for SharePoint securely access data from the remote web? Firewalls could be between servers Code and script could be running on different domains The external web server might not even be running Windows!

App principals Apps for SharePoint have distinct identities

Associated with an app principal (just like users have user principals)

App principal can be granted permissions Apps must request permissions to the host web or any other location outside of the app web Always has Full Control to the app web

OAuth tokens are used to pass app identity Requires the use of Client ID and Secret values

App permissions AppManifest.xml must include requests for the scope at which permissions are needed and the permission needed within that scope

Scopes: Permissions:

App authorization policy types User-only

Only the user identity is considered (non-app interactions with SharePoint)

App + User Both the user identity and the app identity are considered “Access denied” if one and/or the other lacks permissions

App-only Only the app identity is considered Allows for elevation above current user’s permissions (or when there

is no current user) Only supported for server-side code in cloud-hosted apps Can’t be used with certain APIs (e.g., Project Server, search)

App permissions Trust must be explicitly granted by the user installing the app (all or nothing)

User installing the app must also have all permissions the app is requesting

OAuth in SharePoint 2013 OAuth 2.0 is an open protocol for authorization http://tools.ietf.org/html/draft-ietf-oauth-v2-22

Enables users to authorize the service provider (in this case, SharePoint 2013) to provide tokens instead of credentials

OAuth is used: To authorize requests by an app for SharePoint to access SharePoint

resources on behalf of a user To authenticate apps in the Office Store, an app catalog, or a

developer tenant

OAuth in SharePoint 2013 Windows Azure Access Control Service (ACS) acts as the authorization server for cloud-hosted apps

The cloud-hosted app uses OAuth to authenticate with SharePoint 2013 SharePoint requests a context token from ACS that it can send to

the cloud-hosted app’s server (contains a refresh token) The cloud hosted app’s server uses the refresh and context

tokens (along with its client ID and secret values) to request an access token from ACS

The cloud-hosted app’s server then uses the access token to talk back to SharePoint

OAuth flow in SharePoint 2013

Image from http://msdn.microsoft.com/en-us/library/fp142382.aspx

SharePoint and ACSknow ClientId

Your app and ACS know ClientSecret

JavaScript cross-domain library An app that includes a remote web that uses JavaScript for its data access logic likely has to make client-side calls across domains contoso.com (remote web domain) sharepoint.com (host web

domain)

Most browsers implement blocking mechanisms to prevent this behavior for security reasons “Access is denied” does not necessarily mean you are not

authorized!

JavaScript cross-domain library By using the cross-domain library (SP.RequestExecutor.js), the pages in your remote web can make client side calls to the SharePoint host and/or app webs on a different domain

Uses a hidden <iframe> and a client-side proxy page hosted in SharePoint to enable client-side communication using JavaScript Be mindful of IE security zones! Also requires a document mode of IE8 or above

JavaScript cross-domain library Your cloud-hosted app must provision an app web in order to use the cross-domain library Can be an empty page or list, but the app web must exist in addition

to the remote web

OAuth vs. JS cross-domain library Requirement/Scenario OAuth

Cross-domain

I use client-side technologies (HTML + JavaScript).

I want to use REST interfaces.

There is a firewall between SharePoint and my remote app, and I need to issue the calls through the browser.

My app needs to access resources as the logged-on user.

My app needs to elevate privileges to other than those of the current logged-on user.

My app needs to act on behalf of a user other than the one who is logged on.

My app needs to perform operations only while the user is logged on.

My app needs to perform operations even when the user is not logged on.

Table from http://msdn.microsoft.com/en-us/library/fp179897.aspx

Deploying provider-hosted apps

Deploying provider-hosted apps To use OAuth, you must register an app principal Automatically handled for Autohosted apps and <F5> localhost

deployments Requires a visit to /_layouts/15/AppRegNew.aspx for provider-

hosted apps

Deploying provider-hosted apps Generate/specify Client Id/Client Secret values

Specify a Title and App Domain

Deploying provider-hosted apps Update <appSettings> values in web.config<add key="ClientId" value="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" /><add key="ClientSecret" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx=" />

Deploy/publish your remote web project Set full URL for Start page in AppManifest.xml

Deploying provider-hosted apps Right-click and “Publish…” the app project Click Package the app to generate .app file

Deploying provider-hosted apps Deploy the .app file to your app catalog

Deploying provider-hosted apps Click the link to launch the app Grant permissions the app requests

Demo:Securely accessing SharePoint data from cloud-hosted apps,deploying provider-hosted apps, and app authorization policy types

Start building apps for SharePoint Office 365 developer site

http://msdn.microsoft.com/en-us/library/fp179924%28v=office.15%29

Free 30-day trial Visual Studio Ultimate/Premium MSDN subscribers get 1-year

subscription (otherwise costs $99/year) Plan E1 or E3 subscribers can provision a developer site from the

Admin Center

Sign up for a free 14-day CloudShare ProPlus trial http://cloudshare.com SharePoint 2013 environments have Visual Studio 2013 Ultimate

preinstalled

Azure IaaS (MSDN subscription benefit) http://portal.windowsazure.com

Conclusion Microsoft has made significant improvements to the developer experience in SharePoint 2013 Almost anything you can do in the server-side object model can now

be done through CSOM, JSOM, REST/OData endpoints

Cloud-hosted apps allow business logic to be executed on an external server (IIS, Azure, etc.) OAuth is used for app authentication and authorization OAuth can also be used for server-side code, to elevate privileges,

and perform operations when the user is not logged in JavaScript cross-domain library can be used for client-side script, to

traverse firewalls, and perform operations as the current user

Questions?

Thanks to our Sponsors!!!

Thank you!@dannyjesseedjessee@fulcrumco.comdannyjessee.com/blog

References

References Choose patterns for developing and hosting your app for SharePoint http://msdn.microsoft.com/library/fp179887%28v=office.15%29

What you can do in an app for SharePoint http://

msdn.microsoft.com/en-us/library/fp179899%28v=office.15%29

Important aspects of the app for SharePoint architecture and development landscape http://

msdn.microsoft.com/en-us/library/fp179922%28v=office.15%29

References (cont.) App permissions in SharePoint 2013

http://msdn.microsoft.com/en-us/library/fp142383%28v=office.15%29

OAuth authentication and authorization flow for cloud-hosted apps in SharePoint 2013 http://

msdn.microsoft.com/en-us/library/fp142382%28v=office.15%29

How to: Access SharePoint 2013 data from apps using the cross-domain library http://

msdn.microsoft.com/en-us/library/fp179927%28v=office.15%29

References (cont.) Apps for SharePoint overview

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

Choose the right API set in SharePoint 2013 http://msdn.microsoft.com/library/office/jj164060.aspx

Host webs, app webs, and SharePoint components in SharePoint 2013 http://msdn.microsoft.com/en-us/library/office/fp179925

UX design for apps in SharePoint 2013 http://

msdn.microsoft.com/en-us/library/office/fp179934%28v=office.15%29.aspx

References (cont.) Announcing Office Developer Tools for Visual Studio 2013 – March 2014 Update http://

blogs.msdn.com/b/visualstudio/archive/2014/03/03/announcing-office-developer-tools-for-visual-studio-2013-march-2014-update.aspx

Create apps for Office and SharePoint by using "Napa" Office 365 Development Tools http://msdn.microsoft.com/en-us/library/jj220038.aspx

How to: Create a basic app for SharePoint by using "Napa" Office 365 Development Tools http://msdn.microsoft.com/en-us/library/jj220041.aspx

References (cont.) How to: Create a basic autohosted app for SharePoint http://

msdn.microsoft.com/en-us/library/office/fp179886%28v=office.15%29.aspx

Data access options for apps in SharePoint 2013 http://msdn.microsoft.com/en-us/library/fp179897.aspx

Authorization and authentication for apps in SharePoint 2013 http://msdn.microsoft.com/en-us/library/fp142384.aspx

References (cont.) How to: Complete basic operations using SharePoint 2013 client library code http://msdn.microsoft.com/en-us/library/office/fp179912

How to: Complete basic operations using JavaScript library code in SharePoint 2013 http://msdn.microsoft.com/en-us/library/office/jj163201

How to: Complete basic operations using SharePoint 2013 REST endpoints http://msdn.microsoft.com/en-us/library/office/jj164022

References (cont.) SharePoint 2013: CSOM vs. REST ... My Preference and Why [Andrew Connell’s blog] http://www.andrewconnell.com/blog/sharepoint-2013-csom-vs.-rest-..

.-my-preference-and-why

Work with the cross-domain library across different Internet Explorer security zones in apps for SharePoint http://

msdn.microsoft.com/en-us/library/office/jj612823%28v=office.15%29.aspx

References (cont.) Office App Model Samples

https://officeams.codeplex.com/

Announcing the new SharePointContext helper in Apps for SharePoint 2013 Announcing the new SharePointContext helper in Apps for SharePoint 2013 http://

blogs.msdn.com/b/officeapps/archive/2013/11/07/announcing-the-new-sharepointcontext-helper-in-apps-for-sharepoint-2013.aspx

Backup slides

App authentication Internal authentication

Carries claims token with user identity Used in conjunction with client-side calls from pages in app web

(remote web when using cross-domain library)

External authentication Carries claims token with app identity Used in conjunction with server-side calls from pages in remote web Apps must contain code to manage access tokens and transmit the

access token in the request header

Developing for SharePoint

2013 improvements for developers Client-side object model (CSOM) has been greatly enhanced with many new APIs User profiles, search, taxonomy, feeds, publishing, sharing, workflow,

e-discovery, information rights management, analytics, business data, etc.

.NET and JavaScript client object models

REST/OData endpoints Based on SOAP, but much simpler to use

Both authenticate incoming requests from apps

2013 development options Sandboxed solutions still allowed, but deprecated

New app model (our focus today) Objectives are to maximize flexibility and capability while minimizing

footprint on the SharePoint server

Farm solutions still supported (on-premises only) Recommended only for administrative extensions to the platform All code runs with full trust

Everything is an app!