Introduction to AngularJS with the Microsoft Graph

SÉBASTIEN LEVERTPRODUCT OWNER, OCEANIK

DEVELOPMENT & SOLUTIONS DIRECTOR, NEGOTIUM

SPONSORS

Who’s Sébastien Levert !?

Montreal, Canada oceanik.com

Office Servers & Services MVP

Web Developer@sebastienlever

tsebastienlevert.c

om

Agenda• AngularJS• Microsoft Graph• Azure AD• Demos• Resources

ANGULARJS

What is AngularJS ?• Superheroic JavaScript MVW framework• Developed by Google• Started in 2009• Used by Netflix, Youtube, Vevo, MSNBC, …, You ?• A game changer in web development• Angular 2.0 coming in 2015 2016

Why AngularJS ?• Getting closer to client-side development• Start thinking like a web developer, not like a SharePoint

developer• Living on the edge• Building applications faster, with less code• Because everyone is heading towards it

AngularJS is (still) very… Trendy !

Key Concepts• Architecture pattern• Enhanced HTML templating• 2-way data-binding• Routing engine• Dependency injection• Unit testing

MICROSOFT GRAPH

Building integration with Office 365

AZURE AD

Single authentication flow for Office 365• 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

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

Authentication Options• Azure AD only• Separate auth flow supports Azure AD accounts only

• Azure AD and Microsoft Accounts (Preview)• Converged auth flow supports Azure AD accounts and

Microsoft accounts (LiveID - hotmail.com, etc.)

ANGULARJS

What do we need to integrate?• Scaffolding of AngularJS application• Automatic authentication• Connecting data• Secured routes• Office UI Framework into AngularJS• Injection of tokens in HTTP calls

DEMOS, DEMOS EVERYWHERE!

OFFICE HUB

MY MESSAGES

Resources• http://dev.office.com• http://ngofficeuifabric.com/• http://github.com/sebastienlevert/officehub • http://slevert.me/slevert-twitter• http://slevert.me/slevert-slideshare• http://sebastienlevert.com

thank youquestions?

live ratingsHTTP://WWW.SEBASTIENLEVERT.COM@SEBASTIENLEV

ERT

spca.biz/KVU9