sharepoint saturday paris 2016 - angularjs with the microsoft graph

37
Sébastien Levert D04 : Introduction à AngularJS pour Office 365 28 mai 2016 #SPSParis @sebastienlevert

Upload: sebastien-levert

Post on 16-Feb-2017

444 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Sébastien LevertD04 : Introduction à AngularJS pour Office 365 28 mai 2016#SPSParis @sebastienlevert

Page 2: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Diamond

Platinum

Gold

Silver

Organizers& Community

www.spsevents.org/city/Paris/Paris2016

Keynote Speaker: Jeff Teper Microsoft

CorporateVice-President

SharePoint + OneDrive

Donation

Page 3: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph
Page 4: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Dont’ miss / Ne ratez pas

Keynote Jeff Teper Corporate Vice President - OneDrive + SharePoint

Who is Jeff Teper: A true leader; leading product strategy and engineering for consumer and enterprise business with >300M users and >$3 billion in revenues. Managing 800+ person engineering team spanning cloud services to mobile applications.

Page 5: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Tombala / Raffle

After Jeff Teper’s KeynoteAprès la Keynote de Jeff Teper

2

4

21

4

4

3

Page 6: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

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

Page 7: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Who’s Sébastien Levert

Montreal, Canada oceanik.comOffice Servers &

Services MVP

Web Developer @sebastienlevertsebastienlevert.co

m

Page 8: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

AgendaAngularJSMicrosoft GraphAzure ADDemosResources

Page 9: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

AngularJS1

Page 10: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

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 ?

Page 11: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

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 ?

Page 12: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

AngularJS is very… Trendy!

Page 13: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

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

Key concepts

Page 14: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Microsoft Graph2

Page 15: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Developer vision

HTML

DATAUSERS

Page 16: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Building integration with Office 365

Page 17: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Microsoft Graph API

https://graph.microsoft.com/

Your App

USERS FILES MAIL CALENDARGROUPS

Insights and relationships from Office Graph

TASKS

Page 18: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

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

Page 19: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

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

Page 20: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Azure AD Authentication3

Page 21: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

• 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

Page 22: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

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

Page 23: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

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

Page 24: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

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

Page 25: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Integration of AngularJS with the Microsoft Graph4

Page 26: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Scaffolding of AngularJS applicationAutomatic authenticationSecured routesInjection of tokens in HTTP calls

What do we need to integrate?

Page 27: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Demo of an AngularJS, from start to finish

Page 28: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Demo of OfficeHub

Page 29: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Ressources5

Page 30: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

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

Page 31: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

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

Page 32: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

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

Page 33: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

http://dev.office.com/devprogram

Developer Program launch

Email Newsletters

Free Developer Subscriptio

n

1 YEAR FREE

Free Training

Free Tools Webinars

Page 34: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

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

Follow OfficeDev

Page 35: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Questions ?

Page 36: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph

Diamond

Platinum

Gold

Silver

Organizers& Community

www.spsevents.org/city/Paris/Paris2016

Keynote Speaker: Jeff Teper Microsoft

CorporateVice-President

SharePoint + OneDrive

Donation

Page 37: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph