Made for Mobile - Let Office 365 Power Your Mobile Apps presentation by Bill Ayers (L200)

1. Made for Mobile - Let Office 365
Power Your Mobile Apps
BILL AYERS, FLOW SIMULATION LTD

2. SPONSORS

3. Bill Ayers
MCM/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).

4. AGENDA
• Mobile First
• REST
• Office 365 API
• OAuth2
• Azure AD and ADAL
• Apache Cordova
• Microsoft Graph
• Conclusions

5. Mobile clients matter
Source: Morgan Stanley
87

6. Mobile is Becoming a Priority for Businesses
Source: Gartner

7. The world is changing…
“mobile is now redefining personal computing and not the other way round.“
Developer Economics, VisionMobile 2014

8. 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

9. Apps
• Self-contained, clean uninstall, sandboxed
• Office 365, SharePoint as a Service (devices+services model)

10. • 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

11. 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)

12. 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;
}

13. 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

14. 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

15. The Quest for Single Sign-on
• OpenID
• OAuth
• OAuth2
• OpenID Connect

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

17. Decoded JSON – JWT format
Payload:
{
"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
}
eyJhdWQiOiJhZDY5NmU1NS0zZjMzLTQwNzgtYjM2Ny0yZTdiNzVkNjQ1ZjIvbG9jYWxob
3N0OjQ0MzAwQDJjNDM5MzMwLTY4NWUtNGMxMy04MTdiLWUwNTdiOTYzN2FkMCIsImlzcyI6IjAwMDAwMDAxLTAwMDAtMDAwMC1jMDAwLTAwMDAwMD
AwMDAwMEAyYzQzOTMzMC02ODVlLTRjMTMtODE3Yi1lMDU3Yjk2MzdhZDAiLCJuYmYiOjEzNTI2NjU2NDUsImV4cCI6MTM1MjcwODg0NSwiYXBwY3R4c2VuZG
VyIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDDJjNDM5MzMwLTY4UwNTdiOTYzN2FkMCIsImFwcGN0eCI6IntcIkNhY2hlS2V5X
CI6XCJCU2lLOFNmQS9lVk5lTU10SUpjVkJPM2xJNUxYY1BjN0p3SUcyWGNqWDR3PVwiLFwiU2VjdXJpdHlUb2tlblNlcnZpY2VVcmlcIjpcImh0dHBzOi8vYWNjb3Vud
HMuYWNjZXNzY29udHJvbC53aW5kb3dzLm5ldC90b2tlbnMvT0F1dGgvMlwifSIsInJlZnJlc2h0b2tlbiI6IklBQUFBS0JDb1Bwby1FVm9PZ3dBMGZ3SDVQV3dyY29PR3
BGSHdpVW1CMnpBZjRjMXdoeFFzOXlWRlVtcWNqNmYyZ2JTRF9CM3dPakktRXN2b2dWVWVQeXBtMjF5RlQ3VkxFdW5OSW1rT1RxeHFtb1BwSE9SU3F0c2pXaEh
OdnUxM0ppVmNGZzh2UEFyMl9HbFFCNjBQVThQdEVUVlpjWXpCcExhY3hzNjNlVVdMajBTY0lQMGwzUW12dENTVEdidlRqUW1hR3RGaVZYQnZwLXhQN1RuZnl
kRUJUUG9hTDNDcERoQXA5TVhMNXpsRVIxbUtBdDN6bEEtSXpQSzdRTmxyOVJ5RnVPTnJGZmtSRnhyRHNBTDJMS0hPZ2pkZVM5Y0VHWnpZdG9odkdWRFFiVW
ptaFlxM3FueHYyM09qX25idm9KNUNJQXBTOTVMUTNXVkwyaFJKQlltUHVIQ1Z3emhjZG12QlJJNURJZVNYb25RR2d5blNVYU9vUUtheUg2b1R6RzcwSWljaUtSNm
5FMzJZYnhhaGJzdm1XOGszblpvaTV4TDdfa0JXSUZjQXh0Ny1sMUJxTEFockpoZEliZ0dVa1VpVGk5d3JJVm9KZ0RDTDNxSzZucGNHdm4xbGdRZWNBbFpkeG5qOGl
tcmdGVmRmNDVGa1EyQTZTOTJEakVjWE1odUZwakE2aHFpSzdHRU85ZnEwM0tER0tjIiwiaXNicm93c2VyaG9zdGVkYXBwIjoidHJ1ZSJ9

18. OAuth2 Authorization Flows
• Resource Owner Password Credentials
• Client Credentials
• Authorization Code
• Implicit Grant

19. 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/

20. Three ways to configure
• Azure portal (improvements coming)
• Add Connected Service in Visual Studio
• https://apps.dev.microsoft.com/

21. DEMO:
CONFIGURE MOBILE APPLICATION
USING AZURE PORTAL

23. 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

24. 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

25. “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”

26. Native Web
Easy
deployment
Native look
and feel,
performance
Web
apps
Codegen
/cross-
compilers
Native vs. Web
HTML5
Hybrid

27. 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

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

29. 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

30. 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.

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

33. 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 platformswindows

34. Microsoft Graph API
https://graph.microsoft.com/
USERS FILES MAIL
CALENDA
R
GROUPS
Insights and relationships from Office Graph
TASKS
• Formerly known as Office 365 Unified API
• One REST URL namespace
(https://graph.microsoft.com)
• One token

35. 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

36. DEMO: USING THE MICROSOFT GRAPH
SAMPLE CODE:
HTTP://GITHUB.COM/OFFICEDEV/PNP/SAMPLES/MICROS
OFTGRAPH.CORDOVA.MOBILE

37. 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

38. 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

39. 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/)

40. thank you
questions?
live ratings
HTTP://SPDOCTOR.COM/@SPDOCTOR
spca.biz/ZUA6