Made for Mobile - Let Office 365

Power Your Mobile AppsBILL AYERS, FLOW SIMULATION LTD

SPONSORS

Bill AyersMCM/MCSM Charter SharePoint

• MCT, MCTS, MCITP, MCSD, MCAD, MCSA, MCDBA, Professional Scrum Master, etc.

• Flow Simulation Ltd.

• www.SPDoctor.net

• BillA@flosim.com

• @SPDoctor

• Consultant specialising in SharePoint and Office 365 Development and Architecture for Collaboration and Mobile Development (Since Windows CE beta).

AGENDA

• Mobile First

• REST

• Office 365 API

• OAuth2

• Azure AD and ADAL

• Apache Cordova

• Microsoft Graph

• Conclusions

Mobile clients matter

Source: Morgan Stanley87

Mobile is Becoming a Priority for Businesses

Source: Gartner

The world is changing…

“mobile is now redefining personal computing and not the other way round.“

Developer Economics, VisionMobile 2014

Mobile-first, Cloud-first

The opportunity ahead will require us to reimagine a lot of what we have done in the past for a mobile and cloud-first world, and do new things.

Satya Nadella

Apps

• Self-contained, clean uninstall, sandboxed

• Office 365, SharePoint as a Service (devices+services model)

• Greatly improved REST API in SharePoint 2013 in order to support SharePoint Add-ins

• Office 365 REST endpoints for SharePoint (Sites), Outlook/Exchange, Azure AD, OneDrive, Cognitive Svcs. etc.

• HTTP verbs specify operations (as originally intended)

• Uses OData Operators

• API Sandbox (https://apisandbox.msdn.microsoft.com/)

http://server/_api/web/lists/getbytitle(“Butterflies")/items

?$select=ID,Title

&$order=Title

&$filter=startswith(Title,”M”)

REST – Representational State Transfer

Creating and Updating Data

• Creating New Items

• Formulate a REST URL for the parent list

• Use the POST verb

• Updating Existing Items

• Formulate a URL to the item itself

• Use the PATCH, MERGE, or PUT verbs

• Deleting Items

• Formulate a URL to the item

• Use the DELETE verb

• X-HTTP-Method header (firewall arms race)

JavaScript and REST

getAccessToken(resourceUrl, appId, redirectUrl, function (response) {

var requestUri = "https://graph.microsoft.com/v1.0/me/messages";

var xhr = new XMLHttpRequest();

xhr.open('GET', requestUri);

xhr.setRequestHeader("Authorization", "Bearer " + response.accessToken);

xhr.setRequestHeader("Accept", "application/json;odata.metadata=minimal");

xhr.onload = function () {

if (xhr.status === 200) {

var response = JSON.parse(xhr.responseText);

var data = "";

if (response.value)

for (var i = 0; i < response.value.length; i++)

data += "<li>" + displayValue(response.value[i]) + "</li>";

document.getElementById("data").innerHTML = data;

}

It gets better!

• Wrapper libraries for Office 365 APIs (with CORS support)

• Available for .NET and JavaScript

• Takes care of AuthN and AuthZ

• Included in latest update for Office 365 API Tools for Visual Studio and Visual Studio 2015

• http://blogs.office.com/2014/05/12/net-and-javascript-libraries-for-office-365-apis/

• http://github.com/OfficeDev/PnP

• Use local storage to enable functionality while disconnected

Example (JavaScript):

var authContext = new O365Auth.Context(); authContext.getIdToken('https://outlook.office365.com/').then((function (token) { var client = new Microsoft.OutlookServices.Client(https://outlook.office365.com/api/v1.0/',token.getAccessTokenFn('https://outlook.office365.com'));

client.me.calendar.events.getEvents().fetch().then(function (events) {

// do something with events… authContext.logOut(); }, function (reason) { // error handling here…

}); }).bind(this), function (reason) { // error handling here…

});

Sample Code: github.com/SPDoctor/Office365Cordova

The Quest for Single Sign-on

• OpenID

• OAuth

• OAuth2

• OpenID Connect

OAuth2 standard: http://tools.ietf.org/html/rfc6749

Decoded JSON – JWT formatPayload:

{

"aud":ab75de55-3073-364-b7-8f32d696e7645f2/localhost:44300@2c057b90-685e-4c13-817b-e43933637ad0

"iss":00000001-0000-0000-c000-000000000000@2c057b90-685e-4c13-817b-e43933637ad0

"nbf":2014-10-11 21:20:25Z (11/11/2012 12:27:25 PM) - 1352665645

"exp":2014-10-12 08:27:25Z (11/12/2012 12:27:25 AM) - 1352708845

"appctxsender":00000003-0000-0ff1-ce00-000000000000@2c057b90-685e-4c13-817b-e43933637ad0

"appctx":{

"CacheKey":"XcjXMtIJcVBO7JwIG2BSiA/eVNeM3lIK8Sf5LXcPc4w=“

"SecurityTokenServiceUri":"https://accounts.accesscontrol.windows.net/tokens/OAuth/2"

}

"refreshtoken":IAAAAKOgwA0o-EBCoP5PWpVofwHw…

"isbrowserhostedapp":true

}

eyJhdWQiOiJhZDY5NmU1NS0zZjMzLTQwNzgtYjM2Ny0yZTdiNzVkNjQ1ZjIvbG9jYWxob3N0OjQ0MzAwQDJjNDM5MzMwLTY4NWUtNGMxMy04MTdiLWUwNTdiOTYzN2FkMCIsImlzcyI6IjAwMDAwMDAxLTAwMDAtMDAwMC1jMDAwLTAwMDAwMDAwMDAwMEAyYzQzOTMzMC02ODVlLTRjMTMtODE3Yi1lMDU3Yjk2MzdhZDAiLCJuYmYiOjEzNTI2NjU2NDUsImV4cCI6MTM1MjcwODg0NSwiYXBwY3R4c2VuZGVyIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDDJjNDM5MzMwLTY4UwNTdiOTYzN2FkMCIsImFwcGN0eCI6IntcIkNhY2hlS2V5XCI6XCJCU2lLOFNmQS9lVk5lTU10SUpjVkJPM2xJNUxYY1BjN0p3SUcyWGNqWDR3PVwiLFwiU2VjdXJpdHlUb2tlblNlcnZpY2VVcmlcIjpcImh0dHBzOi8vYWNjb3VudHMuYWNjZXNzY29udHJvbC53aW5kb3dzLm5ldC90b2tlbnMvT0F1dGgvMlwifSIsInJlZnJlc2h0b2tlbiI6IklBQUFBS0JDb1Bwby1FVm9PZ3dBMGZ3SDVQV3dyY29PR3BGSHdpVW1CMnpBZjRjMXdoeFFzOXlWRlVtcWNqNmYyZ2JTRF9CM3dPakktRXN2b2dWVWVQeXBtMjF5RlQ3VkxFdW5OSW1rT1RxeHFtb1BwSE9SU3F0c2pXaEhOdnUxM0ppVmNGZzh2UEFyMl9HbFFCNjBQVThQdEVUVlpjWXpCcExhY3hzNjNlVVdMajBTY0lQMGwzUW12dENTVEdidlRqUW1hR3RGaVZYQnZwLXhQN1RuZnlkRUJUUG9hTDNDcERoQXA5TVhMNXpsRVIxbUtBdDN6bEEtSXpQSzdRTmxyOVJ5RnVPTnJGZmtSRnhyRHNBTDJMS0hPZ2pkZVM5Y0VHWnpZdG9odkdWRFFiVWptaFlxM3FueHYyM09qX25idm9KNUNJQXBTOTVMUTNXVkwyaFJKQlltUHVIQ1Z3emhjZG12QlJJNURJZVNYb25RR2d5blNVYU9vUUtheUg2b1R6RzcwSWljaUtSNm5FMzJZYnhhaGJzdm1XOGszblpvaTV4TDdfa0JXSUZjQXh0Ny1sMUJxTEFockpoZEliZ0dVa1VpVGk5d3JJVm9KZ0RDTDNxSzZucGNHdm4xbGdRZWNBbFpkeG5qOGltcmdGVmRmNDVGa1EyQTZTOTJEakVjWE1odUZwakE2aHFpSzdHRU85ZnEwM0tER0tjIiwiaXNicm93c2VyaG9zdGVkYXBwIjoidHJ1ZSJ9

OAuth2 Authorization Flows

• Resource Owner Password Credentials

• Client Credentials

• Authorization Code

• Implicit Grant

Azure Active Directory

• Active Directory hosted in Azure

• Azure AD – a sort of DC Lite

• Can synchronize with on-prem (DirSync, ADFS etc.)

• Azure AD knows about users and groups

• Now supports Applications

• AAD is replacing ACS (Access Control Services) used by SharePoint client APIs

• Office365 APIs use AAD and OAuth2

• Make yourself known to AAD by registering your app

• OAuth Sandbox: https://oauthplay.azurewebsites.net/

Three ways to configure

• Azure portal (improvements coming)

• Add Connected Service in Visual Studio

• https://apps.dev.microsoft.com/

DEMO:

CONFIGURE MOBILE APPLICATION

USING AZURE PORTAL

ADAL

• ADAL – Active Directory Authentication Library

• Install-Package Microsoft.Identity.Model.Clients.ActiveDirectory

• V1 supports ACS, V2 is AAD only – now V3

• Available in several forms

• JavaScript version ADAL.js

• Angular.js bindings

• Underpins authorization in other libraries and plug-ins

• “Next Generation” is called MSAL – Microsoft Authentication Library

Active Directory Authentication Libraries

Target V1 V2 (current) V3 (preview)

.NET ADAL.NET ADAL.NET ADAL.NET

Android ADAL.Android ADAL.NET/Xamarin

iOS ADAL.objC ADAL.NET/Xamarin

MAC ADAL.objC ADAL.NET/Xamarin

JavaScript ADAL.JS ADAL.JS

JavaScript Mobile

(Cordova)

O365auth.js O365auth.js or

ADAL.JS

ADAL Cordova

plugin 0.6.2

“If only there was some way we could use

that JavaScript library and build a

mobile app that just somehow worked

across Windows, Android and iOS

devices without me having to learn new

programming languages and tooling and

all that other stuff”

Native Web

Easy deployment

Native look and feel, performance

Web apps

Codegen

/cross-

compilers

Native vs. Web

HTML5

Hybrid

What is Cordova (aka PhoneGap)?

• Platform for developing hybrid apps with web technology (HTML, CSS and JavaScript) delivered to client device as a package which behaves like a native application

• An open source collection of JavaScript device APIs (plug-ins) to give access to hardware features

• Bridges the “Gap” between phone capabilities and standard JavaScript APIs

• Toolsets built on top of Cordova

• PhoneGap (Abode)

• AppBuilder (Telerik)

• VSTAC (VS-TACO)

28

Reasons to use HTML5 Hybrid Apps

• Code re-use across platforms – one code-base, skill-set

• Prototype and build quickly (low cost)

• Use widely available web development skills

• Large JS community and frameworks

• HTML5 gives limited access to device functions (hence PhoneGap)

• Great option for LOB apps

• Access to mobile marketplace like native

• Users perceive it as an “App”

• Large number of apps in app stores are actually hybrid HTML5 apps

Visual Studio Tools for Apache Cordova• Acquire all required 3rd party dependencies

• Configure everything to allow you to build/deploy for the Android, iOS, and Windows platforms

• Debug apps running on Android and Windows Store

• Easily add native device capabilities through plug-ins

• Select “Cross Platform Mobile Development” option when installing Visual Studio

Command Line Tools

• The “modern” development tools: Git, Grunt, Gulp, Node and Code

• npm install –g cordova-cli

• npm install –g ionic@beta

• ionic start myproject

• Ionic serve

• etc. etc.

DEMO: ADDING OFFICE 365 API TO A CORDOVA CROSS-PLATFORM

APP

ADAL Cordova Plugin

• Current version 0.6.2 recommended (not the NPM version which is at 0.6.0/0.6.1)

• Uses the native ADALs for iOS/objective C, Android and .NET

• Can make use of platform capabilities such as secure token caching

• Refresh token is handled for you

• Not currently supporting Ripple emulator (“I Haz Cheeseburger”)

• To deploy to Windows Phone 8.1 you may need to deploy from the child project in \platforms\windows

Microsoft Graph API

https://graph.microsoft.com/

USERS FILES MAILCALENDA

RGROUPS

Insights and relationships from Office Graph

TASKS

• Formerly known as Office 365 Unified API

• One REST URL namespace

(https://graph.microsoft.com)

• One token

TASKS

manager

memberOf

FILES

MESSAGES

workingWith

Shared with me

directReports

createdBy

FILES

CONVERSATIONS

createdBy

workingWith

EVENTS

trendingAround

GROUPS

TASKS

NOTES

NOTES

public

modifiedBy

USER

trendingAround

API

DEMO: USING THE MICROSOFT GRAPH

SAMPLE CODE:

HTTP://GITHUB.COM/OFFICEDEV/PNP/SAMPLES/MICROS

OFTGRAPH.CORDOVA.MOBILE

Give Your Apps a Professional Look!

• jQuery Mobile (open source)

• Kendo UI Mobile (commercial, recently open-sourced)

• Ionic (+ angular.js) – Use NuGet package IonicVS2015 or Ionic CLI

• AvailableLight – minimalist solution for learning (http://github.com/SPDoctor/AvailableLightDemo)

* Other frameworks are available - these are specifically designed for mobile

Conclusions

• Let’s re-use our JavaScript and REST API skills

• View APIs as just a time saver to wrap the REST calls

• Learn once, use anywhere

• Office 365 API allows us to deliver business benefit where it’s needed

• Microsoft Graph will make it even better

• Changing fast – need to be agile

• Spread the word – mobile first

spca.biz/ZUA6

Recommended Reading:

• Office 365 Dev Center (http://dev.office.com/)

• Github.com/officedev

• Patterns and Practices (https://github.com/OfficeDev/PnP)

• Blogs.office.com/dev (podshow)

• Visual Studio TACO dev blog: (http://taco.visualstudio.com/)

thank you

questions?

live ratings

HTTP://SPDOCTOR.COM/@SPDOCTOR

spca.biz/ZUA6