Made for Mobile - Let Office 365 Power Your Mobile Apps
0 likes597 views
The document discusses developing mobile apps that leverage Office 365 APIs using Cordova. It covers key topics like REST APIs, OAuth2 authentication, Azure Active Directory, the ADAL library, and using Cordova to build cross-platform apps. Code samples are provided to demonstrate configuring an app in Azure portal and adding Office 365 APIs to a Cordova project.
![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;
}](https://image.slidesharecdn.com/madeformobile-letoffice365poweryourmobileapps-160601084751/85/Made-for-Mobile-Let-Office-365-Power-Your-Mobile-Apps-12-320.jpg)
Made for Mobile - Let Office 365 Power Your Mobile Apps
- 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
- 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
- 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/)