Post on 16-Apr-2017
www.winsmarts.com contact@winsmarts.com
Office365 Apps with TypeScript
sahilmalik@winsmarts.com | @sahilmalik
www.winsmarts.com contact@winsmarts.com
Obligatory about me slide ..
• Twitter: @sahilmalik
• Hands on developer!• C#, SP, O365, JS, TS, Cordova, Electron, iOS, Android, etc.
• Worked in 18 countries, 5 continents.
• Author of 20+ books, videos, trainings, etc. etc.
• MVP for 15ish years.• C#, SharePoint, Office365
• Office Servers and Services, Visual Studio and Development Technologies
www.winsmarts.com contact@winsmarts.com
What am I doing here?
• Two sessions,• This session: Where I put AzureAD and O365 dev in perspective, a lay of the
land. And end with a demo.
• Another session: Where is more hands on, where we do stuff with TypeScriptand Office365. Pretty cool stuff!
• So lets get started!!
www.winsmarts.com contact@winsmarts.com
Disclaimer
• I do not work for Microsoft
• All opinions presented here, are mine
www.winsmarts.com contact@winsmarts.com
Office365
Azure AD
www.winsmarts.com contact@winsmarts.com
What can talk to Azure AD?
• Web Browser to Web Application
• JavaScript SPA
• Native App
• Web application calling Web API• Application Identity
• Delegated user identity
• Daemon
www.winsmarts.com contact@winsmarts.com
What can talk to Office 365 APIs?
• Web Browser to Web Application
• JavaScript SPA*
• Native App*
• Web application calling Web API• Application Identity
• Delegated user identity
• Daemon
* can also call CSOM+REST also with user identity
www.winsmarts.com contact@winsmarts.com
What is special about these?
• JavaScript SPA*
• Native App*
* can also call CSOM+REST also with user identity
• Registered as native apps
• Use OAuth2 implicit flow
www.winsmarts.com contact@winsmarts.com
Authorization Code Grant Flow
www.winsmarts.com contact@winsmarts.com
Authorization Code Grant Flow
• #1 Request an Authorization Code
www.winsmarts.com contact@winsmarts.com
Authorization Code Grant Flow
• #2 Authorization Code Response
www.winsmarts.com contact@winsmarts.com
Authorization Code Grant Flow
• #3 Request access token with auth code
• #4. Access token response
www.winsmarts.com contact@winsmarts.com
Now lets talk a little about TypeScript..
www.winsmarts.com contact@winsmarts.com
Now lets talk a little about TypeScript..
www.winsmarts.com contact@winsmarts.com
I wish I had time to go in depth on TypeScript
• .. So I’ll just say this .. • JavaScript sucks!
• Typescript makes JavaScript usable, especially for larger applications.
• Strong typing
• Better paradigms (classes, modules, etc.)
www.winsmarts.com contact@winsmarts.com
If you are writing enterprise apps using JavaScript
www.winsmarts.com contact@winsmarts.com
Endorsement
• Angular2 is written using TypeScript
www.winsmarts.com contact@winsmarts.com
Demo Time!!
www.winsmarts.com contact@winsmarts.com
Two demos ..
1. ng2ADAL (well it’s not Microsoft ADAL)1. https://github.com/maliksahil/Angular2AzureADAuthLib
2. Electron App using TypeScript + Angular2 + Office365 APIs1. https://github.com/maliksahil/AngularJS2ElectronOffice365App
www.winsmarts.com contact@winsmarts.com
https://github.com/maliksahil/Angular2AzureADAuthLib
• .. Implements Authorization Code Grant flow for you, so you don’t have to write all that crap!
• Also takes care of renewing the token for you.
• Open source, feel free to extend it or fix it.
www.winsmarts.com contact@winsmarts.com
https://github.com/maliksahil/AngularJS2ElectronOffice365App
• Electron• Lets you write desktop apps (mac/windows/linux) using web technologies
• You can do some really fancy things very easily• Tap into bluetooth, filesystem, camera, notifications, jump lists, dock bar,
everything you can imagine a desktop app doing
• Also distributable as a UWP or Mac App
• And the code translates to Cordova too
www.winsmarts.com contact@winsmarts.com
Single Codebase
Cordova Electron Web
UWPiOSAndroidothers Mac Linux IE8 and above
Still pimping xcode/xaml/etc?..