SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph
-
Upload
sebastien-levert -
Category
Technology
-
view
444 -
download
0
Transcript of SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph
![Page 1: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/1.jpg)
Sébastien LevertD04 : Introduction à AngularJS pour Office 365 28 mai 2016#SPSParis @sebastienlevert
![Page 2: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/2.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/3.jpg)
![Page 4: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/4.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/5.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/6.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/7.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/8.jpg)
AgendaAngularJSMicrosoft GraphAzure ADDemosResources
![Page 9: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/9.jpg)
AngularJS1
![Page 10: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/10.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/11.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/12.jpg)
AngularJS is very… Trendy!
![Page 13: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/13.jpg)
Architecture patternEnhanced HTML templating2-way data-bindingRouting engineDependency injectionUnit testing
Key concepts
![Page 14: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/14.jpg)
Microsoft Graph2
![Page 15: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/15.jpg)
Developer vision
HTML
DATAUSERS
![Page 16: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/16.jpg)
Building integration with Office 365
![Page 17: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/17.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/18.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/19.jpg)
Demo of the Graph Explorerhttps://graphexplorer2.azurewebsites.net
![Page 20: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/20.jpg)
Azure AD Authentication3
![Page 21: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/21.jpg)
• 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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/22.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/23.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/24.jpg)
Demo of an Azure AD Applicationhttps://manage.windowsazure.com
![Page 25: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/25.jpg)
Integration of AngularJS with the Microsoft Graph4
![Page 26: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/26.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/27.jpg)
Demo of an AngularJS, from start to finish
![Page 28: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/28.jpg)
Demo of OfficeHub
![Page 29: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/29.jpg)
Ressources5
![Page 30: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/30.jpg)
dev.Office.comhttp://dev.office.comOpportunityGetting startedTransformResourcesShowcaseDocumentation
![Page 31: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/31.jpg)
dev.Office.comhttp://blogs.office.comOffice 365 newsDev announcementsEventsGarage series videosWeekly podcast
![Page 32: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/32.jpg)
dev.Office.comhttp://www.office.com/roadmapMonthly updatesDeveloper featuresAssociated blog posts
![Page 33: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/33.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/34.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/35.jpg)
Questions ?
![Page 36: SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/36.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022070511/58a5cdf71a28ab6c2a8b5bc1/html5/thumbnails/37.jpg)