SharePoint Fest 2019 - Build an intelligent application by connecting it to the Microsoft Graph

1. Build an intelligent application by
connecting it to the Microsoft Graph
Sébastien Levert

2. Hi! I’m Seb!
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at

3. Agenda

4. Agenda

5. Introduction

6. Microsoft Graph is all about you
If you or your customers are part of the millions of users that are using Microsoft
cloud services, then Microsoft Graph is the fabric of all your data
It all starts with /me

7. Gateway to your data in the Microsoft
cloud
Your app
Gateway
Your or your
customer’s
data
Office 365 Windows 10 Enterprise Mobility + Security
1Microsoft Graph

8. Microsoft Graph
ALL
Microsoft 365
Office 365
Windows 10
EMS
ALL ONE
https://graph.microsoft.com

9. Microsoft 365 Platform
web, device,
and service apps
Extend Microsoft 365 experiences
1
iOS/Android/Windows/Web
Build your experience
Microsoft Graph

10. Agenda

11. Getting Started

12. Exploring the Graph
• Using the Graph Explorer
• Using plain HTTP Calls
• Using .NET
• Using PnP PowerShell
• Using JavaScript (Browser or Node)
• Using the SDKs

14. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Connecting to your tenant
Connect-PnPOnline -Graph -LaunchBrowser
# Getting the appropriate scoped
Connect-PnPOnline –Scopes @("Mail.Send", "User.Read.All")
# Build the Headers with the Access Token value
$headers = @{
"Authorization" = [String]::Format("Bearer {0}", (Get-PnPAccessToken));
"Content-Type" = "application/json"
}
# Calling the Microsoft Graph
Invoke-RestMethod -Header $headers -Uri "https://graph.microsoft.com/v1.0/me"
Get-Contacts.ps1

15. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
GET https://graph.microsoft.com/v1.0/me/contacts
Accept: application/json
Content-Type: application/json
{
"value": [{
"id":"AAMkAGZkNzVjNzkyLWE0OT…",
"createdDateTime": "2018-05-22T18:19:02Z",
"lastModifiedDateTime": "2018-05-22T18:19:02Z",
//…
}]
}
Listing All Contacts

16. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
GET https://graph.microsoft.com/v1.0/me/contacts/AAMkAGZkNzVjNzkyLWE0OT…
Accept: application/json
Content-Type: application/json
{
"id":"AAMkAGZkNzVjNzkyLWE0OT…",
"createdDateTime": "2018-05-22T18:19:02Z",
"lastModifiedDateTime": "2018-05-22T18:19:02Z",
//…
}
Getting a specific Contacts

17. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POST https://graph.microsoft.com/v1.0/me/contacts
Accept: application/json
Content-Type: application/json
{
"givenName": "Sébastien",
"surname": "Levert",
"emailAddresses": [{
"address": "seb@valointranet.com",
"name": "Sébastien Levert"
}],
"businessPhones": [
"+1 555 555 5341"
]
}
Creating a Contact

18. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
PATCH https://graph.microsoft.com/v1.0/me/contacts/AAMkAGZkNzVjNzkyLWE0OT…
Accept: application/json
Content-Type: application/json
{
"givenName":"Seb"
}
Updating a specific Contact

19. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
DELETE https://graph.microsoft.com/v1.0/me/contacts/AAMkAGZkNzVjNzkyLWE0OT…
Accept: application/json
Content-Type: application/json
{
}
Getting a specific Contacts

20. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Building an Email JSON representation
$EmailBody = @{
"Message" = @{
"Subject" = "This is a test email from PowerShell!" ;
"Body" = @{
"ContentType" = "HTML" ;
"Content" = "This email was sent from PowerShell with the Microsoft Graph.";
} ;
"ToRecipients" = @(
@{
"EmailAddress" = @{
"Address" = "admin@sebastienlevert.onmicrosoft.com"
}
}
)
}
}
Invoke-RestMethod -Header $headers –Uri "https://graph.microsoft.com/v1.0/me/sendMail" -
Method Post -Body ($EmailBody | ConvertTo-Json -Depth 4)
Send-Email.ps1

21. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Requiring the Microsoft Graph SDK
const MicrosoftGraph = require("../../lib/src/index.js").Client;
// Getting the Access Token from a secret file
const secrets = require("./secrets");
// Initializing the Microsoft Graph SDK
const client = MicrosoftGraph.init({
defaultVersion: 'v1.0’,
debugLogging: true,
authProvider: (done) => {
done(null, secrets.accessToken);
}
});
send-email.js

22. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Building the Email Message
const mail = {
subject: "This is a test email from NodeJS!",
toRecipients: [{
emailAddress: {
address: "admin@slevert.onmicrosoft.com"
}
}],
body: {
content: "This email was sent from NodeJS using the Microsoft Graph.",
contentType: "html"
}
}
// Email from the Microsoft Graph
client.api("/users/me/sendMail").post({message: mail}, (err, res) => {
if (err) console.log(err);
else console.log("Sent an email");
});
send-email.js

23. Agenda

24. Advanced Scenarios

25. Be notified by the Graph
• Webhooks

26. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POST https://graph.microsoft.com/beta/subscriptions
{
"changeType": "Created",
"notificationUrl": "https://<url>/api/webhookCallback",
"resource": "me/messages"
}
Creating a webhook on the Graph

27. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POST https://<url>/api/webhookCallback
{
"value":[
{
"subscriptionId":"7f105c7d-2dc5-4530-97cd-4e7af6534c07",
"subscriptionExpirationDateTime":"2015-11-20T18:23:45.9356913Z",
"changeType":"Created",
"resource":"Users/<user-id>/messages/<message-id>",
"resourceData":{
"@odata.type":"#Microsoft.Graph.Message",
"@odata.id":"Users/<user-id>/messages/<message-id>",
"@odata.etag":"W/"CQAAABYAAACoeN6SYXGLRrvRm+CYrrfQAACvvGdb"",
"Id“:"<message-id>"
}
}
]
}
Being notified from a webhook

28. Extending the Graph
• Open type extensions
• Schema extensions

29. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POST https://graph.microsoft.com/beta/me/contacts/ID/extensions
{
"@odata.type": "Microsoft.Graph.OpenTypeExtension",
"extensionName": "Contacts.Extensions.LinkedIn",
"linkedInUrl": "https://www.linkedin.com/in/seb/"
}
Open type extensions

30. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
GET
https://graph.microsoft.com/beta/me/contacts/ID?expand=Extensions($filter=
Id eq 'Contacts.Extensions.LinkedIn')
{
…
"extensions": [
{
"@odata.type": "#microsoft.graph.openTypeExtension",
"extensionName": "Contacts.Extensions.LinkedIn",
"linkedInUrl": https://www.linkedin.com/in/seb/
}
]
}
Getting the value of an Open Type

31. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POST https://graph.Microsoft.com/v1.0/schemaExtensions
{
"id": "linkedin_information",
"description": "All information about LinkedIn account",
"targetType": ["Contacts"],
"available": "Online",
"properties" : [
"name": "linkedInUrl",
"type": "String"
]
}
Defining a schema extension

32. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POST https://graph.microsoft.com/v1.0/me/contacts/ID
{
"linkedin_information": {
"linkedInUrl": "https://www.linkedin.com/in/seb/"
}
}
Adding a schema extension data

33. Graph & SharePoint
• SPFx supports the MSGraphClient to
simplify the authentication
• SPFx supports the AadHttpClient for
custom LOB applications
• Caution : Permissions are global to your
tenant for regularWebParts.
• Isolated WebParts have single
permissions (Preview in 1.7)

34. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Sites.ReadWrite.All"
},
{
"resource": "secured-apis-apis-everywhere-v1",
"scope": "user_impersonation"
}]
}
package-solution.json

35. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
constructor(webPartContext: WebPartContext) {
this._webPartContext = webPartContext;
}
public getItems(context: WebPartContext): Promise<any[]> {
return new Promise<ISessionItem[]>((resolve, reject) => {
this._webPartContext.msGraphClientFactory.getClient()
.then((client: MSGraphClient): void => {
client.api(graphUrl).get((error, response: any) => {
if (error) { console.error(error); return; }
resolve(response.value);
});
});
});
}
graph-service.ts

36. Agenda

37. Next Steps

38. Resources
• https://dev.office.com
• https://aka.ms/ge
• https://graph.microsoft.com
• https://github.com/microsoftgraph/msgraph-community-samples
• https://github.com/sebastienlevert/apis-apis-everywhere

39. Share your experience
• Use hashtags to share your experience
• #Office365Dev
• #MicrosoftGraph
• Log issues & questions to the GitHub Repositories

40. Thank you!
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at