http://dev.office.com/

Introduction to AngularJS with the Microsoft GraphSébastien Levert, Office Servers & Services MVP @ Negotium Technologies

http://dev.office.com/

Who’s Sébastien Levert

Montreal, Canada negotium.comOffice Servers &

Services MVP

Web Developer @sebastienlevertSebastienlevert.co

m

http://dev.office.com/

"The most strategic developer surface area for us is Office 365.“ —Satya Nadella

http://dev.office.com/

OpportunityOver 4

trillion emails sent with O365

100+ million downloads of mobile apps

850 million

meetings are created a month

2–3 hours/day

spent in Office add-ins1.2

billion+ users

470+ PB

of storage

http://dev.office.com/

AgendaAngularJSMicrosoft GraphAzure ADDemosResources

http://dev.office.com/

AngularJS1

Superheroic JavaScript MVW frameworkDeveloped by GoogleStarted in 2009Used by Netflix, Youtube, Vevo, MSNBC, …, You ?A game changer in web developmentAngular 2.0 coming in 2015 2016

What is AngularJS ?

Getting closer to client-side developmentStart thinking like a web developer, not like a SharePoint developerLiving on the edgeBuilding applications faster, with less codeBecause everyone is heading towards it

Why AngularJS ?

AngularJS is very… Trendy!

Architecture patternEnhanced HTML templating2-way data-bindingRouting engineDependency injectionUnit testing

Key concepts

http://dev.office.com/

Microsoft Graph2

http://dev.office.com/

Developer vision

HTML

DATAUSERS

http://dev.office.com/

Building integration with Office 365

http://dev.office.com/

Microsoft Graph API

https://graph.microsoft.com/

Your App

USERS FILES MAIL CALENDARGROUPS

Insights and relationships from Office Graph

TASKS

Single resource that proxies multiple Microsoft servicesAllows for easy traversal of objects and relationshipsSimplifies token acquisition and managementEliminates the need to traditional discovery (using “me” and “myorganization”)

Microsoft Graph, gateway to Office 365

Direct API endpoints for all the Office 365 Services may also be invoked

Outlook, OneDrive, OneNote, etc.Direct endpoints have new functionality before it is exposed via the Graph API

Examples:Outlook web hooksTime zone on calendar

Office 365 direct API Endpoints

http://dev.office.com/

Office 365 connected apps

http://dev.office.com/

Demo of the Graph Explorerhttps://graphexplorer2.azurewebsites.net

http://dev.office.com/

Azure AD Authentication3

• Sign users in using OpenID Connect Azure AD and Office 365

services Supports MFA and federated

user sign-in

• Device apps, web sites, SPAs, and service apps

• Pin apps to Office 365 app launcher from My apps

Single authentication flow for Office 365

http://dev.office.com/

Common consent• Single auth flow for

accessing all O365 services

• Admin and end-user consent

• Secure protocol OpenID Connect and OAuth 2.0 No capturing user credentials Fine-grained access scopes Long-term access through refresh

tokens

Azure AD onlySeparate auth flow supports Azure AD accounts onlyAzure AD and Microsoft Accounts (Preview)Converged auth flow supports Azure AD accounts and Microsoft accounts (LiveID - hotmail.com, etc.)

Authentication Options

Many apps want to sign users in from both Microsoft account and Azure ADNow in preview:Single endpoint, OpenID Connect and OAuth 2.0Single SDKSingle end user sign in experienceSingle app registration experience

Works with Microsoft Graph Single API endpoint, business and consumer data

Microsoft Account + Azure AD

http://dev.office.com/

Integrating with Office 365

https://graph.microsoft.com/

Your App

USERS FILES MAIL CALENDARGROUPS

Insights and relationships from Office Graph

TASKS

http://dev.office.com/

Demo of an Azure AD Applicationhttps://manage.windowsazure.com

http://dev.office.com/

Integration of AngularJS with the Microsoft Graph4

Scaffolding of AngularJS applicationAutomatic authenticationSecured routesInjection of tokens in HTTP calls

What do we need to integrate?

http://dev.office.com/

Demo of an AngularJS, from start to finish

http://dev.office.com/

Demo of OfficeHub

http://dev.office.com/

Ressources5

http://dev.office.com/

dev.Office.comhttp://dev.office.comOpportunityGetting startedTransformResourcesShowcaseDocumentation

4 Resources

http://dev.office.com/

dev.Office.comhttp://blogs.office.comOffice 365 newsDev announcementsEventsGarage series videosWeekly podcast

4 Resources

http://dev.office.com/

dev.Office.comhttp://www.office.com/roadmapMonthly updatesDeveloper featuresAssociated blog posts

4 Resources

http://dev.office.com/

http://dev.office.com/devprogram

Developer Program launch

Email Newsletters

Free Developer Subscriptio

n

1 YEAR FREE

Free Training

Free Tools Webinars

4 Resources

Office 365 Networkhttps://www.yammer.com/itpronetwork

@OfficeDev TwitterStartStart

Podcastshttp://dev.office.com/podcasts

UserVoice

http://officespdev.uservoice.com/

Stack overflow

[ms-office]

Channel 9 Dev Showhttp://aka.ms/O365DevShow Snack Demos

http://aka.ms/o365DevSnackDemos

http://dev.office.com/

Questions ?