This document contains slides from a presentation about Office365 development using TypeScript. The presentation discusses authentication with Azure AD, the authorization code grant flow, and advantages of using TypeScript for enterprise JavaScript applications. It promotes a library for Angular 2 authentication with Azure AD and demonstrates an Electron desktop app that uses TypeScript, Angular 2 and the Office 365 APIs. The presentation aims to provide perspective on Office 365 development and a hands-on demo of capabilities with TypeScript.

1. www.winsmarts.com
contact@winsmarts.com
Office365 Apps with TypeScript
sahilmalik@winsmarts.com | @sahilmalik

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

3. 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 TypeScript
and Office365. Pretty cool stuff!
• So lets get started!!

4. www.winsmarts.com
contact@winsmarts.com
Disclaimer
• I do not work for Microsoft
• All opinions presented here, are mine

5. www.winsmarts.com
contact@winsmarts.com
Office365
Azure AD

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

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

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

9. www.winsmarts.com
contact@winsmarts.com
Authorization Code Grant Flow

10. www.winsmarts.com
contact@winsmarts.com
Authorization Code Grant Flow
• #1 Request an Authorization Code

11. www.winsmarts.com
contact@winsmarts.com
Authorization Code Grant Flow
• #2 Authorization Code Response

12. www.winsmarts.com
contact@winsmarts.com
Authorization Code Grant Flow
• #3 Request access token with auth code
• #4. Access token response

13. www.winsmarts.com
contact@winsmarts.com
Now lets talk a little about TypeScript..

14. www.winsmarts.com
contact@winsmarts.com
Now lets talk a little about TypeScript..

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

16. www.winsmarts.com
contact@winsmarts.com
If you are writing enterprise apps using JavaScript

17. www.winsmarts.com
contact@winsmarts.com
Endorsement
• Angular2 is written using TypeScript

18. www.winsmarts.com
contact@winsmarts.com
Demo Time!!

19. 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 APIs
1. https://github.com/maliksahil/AngularJS2ElectronOffice365App

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

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

22. www.winsmarts.com
contact@winsmarts.com
Single Codebase
Cordova Electron Web
UWPiOSAndroidothers Mac Linux IE8 and above
Still pimping xcode/xaml/etc?..