Developers deliver true business value when building Office Add-ins that integrate Office 365 data. With Microsoft releasing the Microsoft Graph this becomes easier, but how do you build apps like these and provide the best user experience?! This session covers a short introduction into both Office Mail Add-ins and the Microsoft Graph. Then the real fun starts when building an Office Mail Add-in which enables sync to your Azure AD Users into your Contacts by using the Microsoft Graph. This can be extended with Profile data from the SharePoint User Profile service. One of the biggest challenges is overcoming a single authentication, which will be covered.
4. WHAT CAN I BUILD?
Office Platform
ADD-INS AND WEB PARTS:
Make your solution a native
part of the modern Office
WEB AND DEVICE APPS:
Build smarter apps by
connecting to Office services
VOICE, VIDEO,
CONNECTORS, AND BOTS:
Create the next generation
of productivity solutions
5. What is Microsoft Graph?
› Single API for
› Accessing data
› /me, /users, /groups, /messages, /drive, ….
› Traversing data
› /drive/items/<id>/lastmodifiedByUser
› Accessing insights
› /insights/trending
› Work/School and Personal
https://graph.microsoft.com/
6. State of the world before Microsoft Graph
› Many different APIs to access data
› Separate auth stacks for work and personal
Work and school Personal
7. Today’s world with Microsoft Graph
Microsoft Graph
(https://graph.microsoft.com/)
Work and school Personal
…
8. Diverse API styles and endpoints
https://graph.windows.net/contoso.com/users
https://graph.windows.net/contoso.com/groups
https://apis.live.net/v5.0/me
https://contoso.sharepoint.com/_api/SP.UserProfiles.PeopleManager/GetMyProperties
https://graph.microsoft.com/v1.0/me/photo
https://outlook.office.com/api/v2.0/me/Messages
https://outlook.office.com/api/v2.0/me/Events
https://contoso-my.sharepoint.com/personal
/yina_contoso_com/_api/v2.0/drive
https://contoso.sharepoint.com/sites
/designCouncil/_api/v2./drive
https://api.onedrive.com/v1.0/drive
https://contoso.sharepoint.com/_api/search/query?Querytext='*'&Prop
erties='GraphQuery:actor(ME,action:1020,or(action:1020,action:1003
,action:1001,action:1024,action:1005,action:1037,action:1039,action
:1036)'&SelectProperties='Docid,Title
9. Operation Service endpoint
GET my profile https://graph.microsoft.com/v1.0/me
GET my files https://graph.microsoft.com/v1.0/me/drive/root/children
GET my photo https://graph.microsoft.com/v1.0/me/photo/$value
GET my mail https://graph.microsoft.com/v1.0/me/messages
GET my calendar https://graph.microsoft.com/v1.0/me/calendar
GET my manager https://graph.microsoft.com/v1.0/me/manager
GET last user to modify file foo.txt https://graph.microsoft.com/v1.0/me/drive/root/children/foo.txt/lastModifiedByUser
GET users in my organization https://graph.microsoft.com/v1.0/users
GET group conversations https://graph.microsoft.com/v1.0/groups/<id>/conversations
GET people related to me https://graph.microsoft.com/beta/me/people
GET my tasks https://graph.microsoft.com/beta/me/tasks
GET my notes https://graph.microsoft.com/beta/me/notes/notebooks
GET files trending around me https://graph.microsoft.com/beta/me/insights/trending
Unified API style – single endpoint
https://graph.microsoft.com
11. Introducing the add-in model
› Office add-ins are the means for enabling contextual experiences
› Office add-ins boost productivity by integrating services into Office client
› Office add-ins do not “live” on the Office client
› Custom code executes in the client, cloud, or on-premises
› Acquire add-ins via centralized location (store)
› Add-in catalog (SharePoint or FileShare)
› Public store (via submission process)
19. App authentication with Microsoft Graph
Azure AD v1.0 endpoint Azure AD v2.0 endpoint
Token handling Token per resource Single token
Conditional access device
device policies
Supported Not currently supported
OAuth 2.0 and OpenID
Connect compliant
No Yes
Permissions Static: Specified during app
registration
Dynamic: Request during app
runtime; includes incremental
consent
Account types Work or school Work or school
Personal
Client libraries Active Directory
Authentication (ADAL) SDKs
for most development
platforms
Microsoft Authentication
Library (MSAL) – Preview only
20. AUTHENTICATION FLOW
Native Application
Azure AD Authorization
Endpoint
Azure AD Token
Endpoint
Microsoft Graph
Return authorization code
Sign-in via browser
Redeem authorization code and acquire access token for Microsoft Graph resource
Return access token and refresh token
Call Microsoft Graph using the access token
Return Http Response
Request authorization code
25. Demo scenario
› Build a Outlook Web Add-in to synchronize AD users with your personal
Contacts
› Steps
› Setup the basics for the Office Web Add-in
› Add Office UI Fabric
› Provide plumbing for authentication
› Support synchronization of Contacts
› Augment Contact with SharePoint User Profile info (Birthday)
28. Key take-aways
30
› Microsoft Graph is the API to rule them all
› Single repeatable pattern for
› Mail, Contact, Calendar, OneDrive, SharePoint, Insights, …
› Reuse of Access Token for SharePoint CSOM / REST calls
› Office Web Add-ins provide contextual experience
› Office UI Fabric is the official UX design framework for Office Add-ins
Source: https://dev.office.com/add-in-availability
Modules in Outlook 2016: https://dev.office.com/docs/add-ins/outlook/extension-module-outlook-add-ins?product=outlook
Authentication to Office 365 APIs using resource id
Authorization Code Grant Flow
The client application starts the flow by redirecting the user agent to the Azure AD authorization endpoint. The user authenticates and consents, if consent is required.
The Azure AD authorization endpoint redirects the user agent back to the client application with an authorization code. The user agent returns authorization code to the client application’s redirect URI.
The client application requests an access token from the Azure AD token issuance endpoint. It presents the authorization code to prove that the user has consented.
The Azure AD token issuance endpoint returns an access token and a refresh token. The refresh token can be used to request additional access tokens.
The client application uses the access token to authenticate to the Web API.
After authenticating the client application, the web API returns the requested data.
https://msdn.microsoft.com/en-us/library/azure/dn645542.aspx
https://graph.microsoft.io/en-us/docs/authorization/auth_register_app_v2
Should I use the v2.0 endpoint? » https://docs.microsoft.com/en-us/azure/active-directory/active-directory-v2-limitations